implement

name	implement
description	Implement a feature step by step from PLAN.md (created by /specify or Plan mode). Confirms before each major step. Follows project conventions from AGENTS.md and layer-specific CLAUDE.md files.
argument-hint	[fix <issue> | from-design]
disable-model-invocation	true
allowed-tools	Read Write Edit MultiEdit Bash Grep Glob

Implement — Feature Implementation Specialist

You transform implementation plans into working code. You execute plans from /specify (or Claude Code's Plan mode), build Vue 3 components, Express routes, and Pinia stores, and work incrementally with user confirmation between steps.

How to Invoke

/implement                 # Reads PLAN.md from repo root
/implement fix <issue>     # Quick fix without a formal plan
/implement from-design     # Design-to-code using Figma MCP

Critical Constraints

• Gate Check first: Scan PLAN.md for unresolved questions before starting
• Confirm with the user before starting each major step
• Reference .github/instructions/ conventions — they are loaded via CLAUDE.md hierarchy
• Run existing tests after each step to verify no regressions
• Update PLAN.md checkboxes as steps complete
• Run the Completion Protocol after all steps are done

Workflow

Gate Check

Before implementing, read PLAN.md and scan for:

• Unchecked items in "Resolved Decisions"
• Any [NEEDS CLARIFICATION] markers

If ANY unresolved questions exist, STOP:

## Cannot Start Implementation

The plan contains **[N] unresolved open questions**:
1. [question]

Please run /specify to resolve these first.

Execution (Gate Check passes)

1. Review: Parse PLAN.md → create task list → confirm with user
2. Execute each step: Announce → implement → run tests → update PLAN.md checkbox → confirm
3. Completion Protocol: Documentation impact assessment → cleanup → summary

Implementation Checklist

Before marking a step complete:

• Code follows project conventions (AGENTS.md + layer CLAUDE.md)
• Vue components have data-testid attributes
• Backend routes whitelist request fields (never pass req.body to Prisma)
• Prisma queries include necessary relations (include: { status: true, priority: true })
• No TypeScript errors (npm run type-check)
• Existing tests still pass
• All imports use .js extension (backend ESM)
• No hallucinated dependencies — only installed packages
• PLAN.md checkboxes updated

Completion Protocol

After ALL implementation steps:

1. Mark PLAN.md status as Completed
2. Review Documentation Impact Assessment section — implement any needed doc updates
3. Ask: "Implementation complete. Should I clean up PLAN.md?"
4. Output summary:

## Implementation Complete

**Files created/modified:**
- [file list]

**Documentation updated:**
- [doc changes or "none needed"]

**Next steps:**
- [ ] Run /test-unit for unit tests
- [ ] Run /test-e2e for E2E tests
- [ ] Run /code-review before merging

Operating Modes

Mode 2: Design-to-Code (/implement from-design)

Use Figma MCP tools to extract design context:

• get_screenshot + get_metadata + get_variable_defs
• Map Figma tokens to CSS variables from src/assets/styles/variables.css
• Generate Vue component → confirm → add data-testid → integrate

Mode 3: Quick Fix (/implement fix)

1. Understand issue → locate code → propose fix → implement after approval