← ClaudeAtlas

prototypelisted

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, explore what a UI should look like, or walk a stakeholder through a whole flow end to end.
clnnn/playbook · ★ 0 · AI & Automation · score 73
Install: claude install-skill clnnn/playbook
# Prototype A prototype is **throwaway code that answers a question**. The question decides the shape. ## Pick a branch Identify which question is being answered — from the user's prompt, the surrounding code, or by asking if the user is around: - **"Does this logic / state model feel right?"** → [LOGIC.md](LOGIC.md). Build a single shareable HTML file — free-play buttons plus tabbed guided walkthroughs — that pushes the state machine through cases that are hard to reason about on paper, and that a non-developer can drive. - **"What should this look like?"** → [UI.md](UI.md). Generate several radically different UI variations on a single route, switchable via a URL search param and a floating bottom bar. - **"Does this whole flow hang together?"** → [SKELETON.md](SKELETON.md). Build one shareable page a stakeholder can click through end to end — a screen per activity, every step of the flow working in its simplest form — to find the missing or misordered step before anything is built. The branches produce very different artifacts — getting this wrong wastes the whole prototype. Each names the risk it hunts: a wrong state model, an unchosen design, a flow with a hole in it. If the question is genuinely ambiguous and the user isn't reachable, default to whichever branch better matches the surrounding code (a backend module → logic; an existing page or component → UI; a flow that isn't built yet → skeleton) and state the assumption at the top of the prototype. ## Rules tha