Design 36,091 installs

prototype

by mattpocock/skills

Build a throwaway prototype to flesh out a design before committing to it. Routes between two branches - a runnable terminal app for state/business-logic…

Skill content

Throwaway code that answers a single design or logic question through an interactive prototype.

- Choose between two branches: a terminal app for testing state machines and business logic, or multiple toggleable UI variations on a single route for design exploration

- Minimal setup with one command to run; state lives in memory with no persistence unless the question explicitly requires it

- Surface full state after every action so changes are immediately visible and the prototype's answer is clear

- Delete or fold validated decisions back into production code once the question is answered; capture the verdict before cleanup

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. 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. 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.

Rules that apply to both