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 grep_search or find_by_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 write_to_file.
  • Modify existing files using replace_file_content (single block) or multi_replace_file_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.