TASK.md

id	03-build-screens
title	Build Screens
description	Per-screen vertical pipeline — prompt, design, JSX, split — for every screen in screens.json
wbs	type path nodejs ./wbs.js
blocking	true
dependencies	003-implement-design-tokens
tags	screens stitch react
inputs	.stitch/screens.json .stitch/DESIGN.md .stitch/UX.md
outputs	src/pages/**/*.tsx src/components/**/*.tsx src/App.tsx
checks	id cmd description screens-json-exists test -f .stitch/screens.json Screen definitions exist id cmd description pages-created ls src/pages/*.tsx 2>/dev/null | wc -l | awk '{if ($1 > 0) exit 0; exit 1}' At least one page component was created id cmd description typescript-valid npx tsc --noEmit All generated code compiles

Build Screens

Reads .stitch/screens.json and spawns a 4-step pipeline per screen:

1. Generate Prompt — create .stitch/prompts/{screenId}.md from UX + design system
2. Generate HTML Design — run Stitch to produce .stitch/designs/{screenId}/design.html
3. Convert to JSX — transform HTML into src/pages/{Component}.tsx with routing
4. Split Components — extract reusable atoms/molecules/organisms via react-prune

Screens are chained sequentially so each completes before the next begins.