/frontend

Implement new React components using spec-driven development.

Your Task

$ARGUMENTS

Process: Plan → Implement (Two-Phase)

Phase 1: Create Implementation Specification

Use agent: frontend-planner

1. Gather Requirements

   • If Jira ticket referenced: mcp__jira__get_issue for requirements
   • If Figma design referenced:
     • mcp__figma__get_file for structure
     • mcp__figma__get_node for specific components
   • Extract: colors, typography, spacing, states

2. Design the Component Architecture Create an Implementation Specification with:

   • Component hierarchy (parent/children)
   • Props interface for each component
   • State management approach
   • Event handlers needed
   • Accessibility requirements
   • Test scenarios (Given/When/Then)

3. Output the Specification Write a complete Implementation Specification following the spec-driven-planning skill format:

   • Task type: NEW_FEATURE
   • Design reference with extracted values
   • Requirements list
   • Phase 1: Test specifications with exact test code
   • Phase 2: Implementation checklist by file
   • Phase 3: Verification commands
   • Accessibility checklist
   • Acceptance criteria mapping

Phase 2: Execute Implementation

Use agent: frontend-implementer

1. Execute Test Phase (RED)

   • Create test files as specified in plan
   • Run tests to verify they FAIL

   npm test -- ComponentName.test.tsx --run
   # MUST FAIL - proves tests are valid
   

2. Execute Implementation Phase (GREEN)

   • Implement each file in the order specified
   • Check types frequently:

   npx tsc --noEmit
   

   • Run tests to verify they PASS

   npm test -- ComponentName.test.tsx --run
   # MUST PASS
   

3. Full Verification

   npx tsc --noEmit
   npm test -- --run
   npm run lint
   npm run build
   

Output

Provide both:

1. Implementation Specification (the plan)
2. Implementation Report:
   • Components created
   • Test results summary
   • Verification confirmation
   • Acceptance criteria status