hyperbuild-8-mockupslisted

Step 8 of the hyperbuild pipeline — reads the PRD's canonical screen inventory, freezes the mockup screen list (every full/partial screen per its mockup_feasibility, cap 12 standard / 20 premier), and spawns 3-6 hb-mockup-smith subagents in parallel, grouped by design, so EVERY full/partial screen exists as a self-contained HTML mockup in all 3 design systems (tokens inlined, REAL PRD content — never lorem ipsum, phone-frame wrapper for mobile; partial screens get real chrome over a clearly-marked placeholder viewport; none screens get an art-direction card per design instead of a mockup). The orchestrator then renders screenshots/<screen>.png for every mockup via headless Chrome and writes runs/<run_tag>/designs/index.html — a side-by-side iframe gallery grouped by screen with design names and jump nav — the page the user opens to pick a design at the step 12 gate. Every smith is bound by docs/DESIGN-CRAFT.md — the craft contract (signature element, depth model, shape language, type pairing, CSS-drawn art) p
zakariaf/hyperbuild · ★ 0 · Web & Frontend · score 72

Install: claude install-skill zakariaf/hyperbuild

# Step 8 — Mockups (parallel, 3–6 smiths, every full/partial screen × 3 designs) You are executing step 8 (mockups) of the hyperbuild pipeline. Step 7 produced three complete design systems with a shared token contract. Step 9 (skill research) runs CONCURRENTLY with you as the 8 ∥ 9 pair — the router drives both steps' spawn waves in the same block; you share no inputs with it. Your successor for gating purposes is unchanged: step 12 will verify every `full`/`partial` inventory screen exists in all three designs (plus an art-direction card per design for every `none` screen and a screenshot per mockup) and then show the user your `designs/index.html` gallery — the single human checkpoint of the whole pipeline rides on this step's output; step 11 needs your gallery only at gate time. **Goal:** for EVERY `full`/`partial` screen in the frozen inventory × each of the 3 designs, a self-contained HTML mockup at `runs/<run_tag>/designs/<letter>/mockups/<screen-slug>.html`; an art-direction card in each design's design-system.md for every `none` screen; a headless-Chrome render at `runs/<run_tag>/designs/<letter>/screenshots/<screen-slug>.png` for every mockup; plus the comparison gallery `runs/<run_tag>/designs/index.html`. **⚠ THE MOCKUPS ARE WHERE THE CRAFT EITHER SHIPS OR DIES.** `docs/DESIGN-CRAFT.md` is BINDING on this step: step 7's design systems commit to a signature element, a depth model, a shape language, a type pairing, and CSS-drawn empty-state art — a mockup that re