prototype

/prototype — wire screens into one clickable flow, render and CLICK it

This skill makes a navigable flow you can click through, not a pretty dead-end frame. It owns the gap /design leaves: /design hand-codes ONE static screen and renders it to a PNG; /diagram draws how a system is wired. Neither lets a PM open a file and walk the path — tap a button, land on the next screen, watch a value update. That clickable-prototype gap is real and Bennu had not closed it before this skill.

Core principle: A clickable prototype validates a FLOW, not a look — so the thing you must lock before any HTML is the SCREEN MAP and the NAVIGATION GRAPH, not the art direction. Get the inventory of screens and, for every hotspot, which screen it leads to and what state it changes — then the same self-contained-HTML discipline /design already uses produces a working flow instead of pretty cul-de-sacs.

This is the interaction counterpart to /design (identity) and /diagram (structure). It reuses their renderer and skeptic loop; the only new thing it teaches is multi-screen wiring inside one file.

---

The one thing that makes this not /design

/design's hard gate is "lock the art direction before HTML." /prototype's hard gate is: lock the SCREEN MAP + NAVIGATION GRAPH before HTML. Skip it and you get beautiful screens that go nowhere — the exact failure this skill exists to prevent. Fidelity is a dial, not the point: default to the lowest fidelity that proves the flow.

---

How to run

Stages in order. Hard gate: no HTML until the screen map + nav graph are locked (Stage 2).

1. Brief (intake — keep it to these lines)

Settle before building. Ask only what's missing from context; don't interrogate.

• flow — the one user journey to validate (e.g. "first-run onboarding", "add a payee and pay")
• key path — the single end-to-end sequence the prototype MUST demo, screen by screen. This is the spine everything else hangs off; without it the prototype sprawls.
• actors & decision — who clicks through it, and what PM/design decision it must unblock
• fidelity — lo-fi wireframe (greyscale boxes, prove the flow) / mid (real layout, placeholder polish) / hi-fi (looks shippable). Default lo-fi; raise only with a reason. Hi-fi visual identity is /design's job, not this skill's — borrow tokens, don't compete.
• simulated state — what must change on interaction (a form value echoed back, a toggle, a list that grows, a "logged-in" flag that persists across a reload)
• working path — settled now: default .scratch/prototype/<slug>.html for exploration, or the target project's home for real work. Every later command uses this one path.