Feature Development Skill

This skill guides you through a rigorous cycle of Planning, Execution, and Verification to ensure high-quality delivery.

When to use this skill

• The user requests a new feature (e.g., "Add a login page").
• The user asks for a complex refactor (e.g., "Migrate to TypeScript").
• You are unsure of the implementation details and need to "think" first.

Workflow Steps

1. Planning Phase (Architect Mode)

• Analyze: Read the request and any linked files.
• Research: Check for existing patterns or reusable components using grepsearch or findby_name.
• Plan Artifact: Create implementation_plan.md using the standard template.

Goal: What are we building? Proposed Changes: List files to create/modify. * Verification: How will we prove it works?

• Task List: Update the system task.md (via task_boundary) with granular subtasks.

2. Execution Phase (Builder Mode)

• Decompose: Break down the implementation into small, atomic groups of tool calls.
• Implement:

Create new files using writetofile. Modify existing files using replacefilecontent (single block) or multireplacefile_content (scattered edits).

• Safety:

Respect .gitignore. Do not overwrite files without reading them first.

3. Verification Phase (Reviewer Mode)

• Lint/Build: Run npm run lint or npm run build to catch syntax errors immediately.
• Visual Proof:

Use browser_subagent to visit the local dev server. Take a screenshot or recording of the new feature. * Crucial: Embed this proof in the walkthrough.md.

4. Reporting

• Walkthrough: Create or update walkthrough.md with:

Summary of changes. Screenshots/Videos. * Any known issues or next steps.

• Notify: Call notify_user with the list of artifacts.

Decision Tree

• Is it a one-line fix? -> Skip this skill, use Fast Mode rules.
• Is it a UI change? -> MUST use browser_subagent for verification.
• Is it a backend change? -> MUST write a reproduction script or test case.