← ClaudeAtlas

prototypelisted

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.
ConnorGriffin/skills · ★ 20 · Web & Frontend · score 66
Install: claude install-skill ConnorGriffin/skills
# 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 tiny interactive terminal app that pushes the state machine through cases that are hard to reason about on paper. - **"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. The two branches produce very different artifacts — getting this wrong wastes the whole prototype. 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; a page or component → UI) and state the assumption at the top of the prototype. ### Prototype vs. ui-craft The UI branch overlaps with the `ui-craft` skill — pick deliberately: - **`ui-craft`** is a *pre-implementation* exploration. It produces standalone static HTML mockups, outside the app, screenshotted and iterated until a visual spec is **locked**. Reach for it when nothing is built yet and the deliverable is an agreed-on design. - **`prototype`'s UI branch** produces throwaway *runnable* variants **inside the actual app**, wired to real routing, components, and data. Reach for it when the ques