create-prototype

Create Prototype

Create fully functional client-side prototype for Feature Unit {{input:feature_id}}.

Follow foundation/development/feature_unit_workflow.md Step 1 (Prototype Creation). Configuration is read from foundation-config.yaml.

This happens after Checkpoint 0 (spec creation) and before Checkpoint 1 (prototype review).

Implements prototype creation after Checkpoint 0 (spec) is complete. Creates a fully interactive, client-side prototype with mocked APIs.

Trigger

• Spec created with UI requirements (Checkpoint 0 complete, UI changes present) OR
• No UI changes required (skip prototype)

Tasks

1. Load configuration:

   • Read foundation-config.yaml to get feature unit settings
   • Determine directory structure and prototype paths

2. Load spec and manifest:

   • {configured_directory}/in_progress/{{input:feature_id}}/{{input:feature_id}}_spec.md (or completed/ if completed)
   • {configured_directory}/in_progress/{{input:feature_id}}/manifest.yaml (or completed/ if completed)

3. Check if UI changes present:

   • Review spec and manifest for UI components
   • Verify UX Requirements section exists in spec (from Checkpoint 0)
   • If no UI changes → skip to implementation
   • If UI changes present → proceed

4. Create prototype:

   • Use configured prototype directory structure (or default: frontend/src/prototype/)
   • Create prototype component(s): {prototype_dir}/components/{{input:feature_id}}_*.tsx
   • Create mock API fixtures: {prototype_dir}/fixtures/{{input:feature_id}}_*.ts
   • Integrate into prototype main file

5. Prototype requirements:

   • Fully interactive (click, type, navigate)
   • All API calls mocked (no real backend)
   • All UI states testable (empty, error, loading, success)
   • Accessible (keyboard nav, ARIA if applicable)
   • Uses existing design system components (if available)
   • Documented mock API responses

6. Make prototype runnable:

   • Ensure prototype can be run (e.g., npm run dev:prototype)
   • Document how to run prototype