prototypelisted
Install: claude install-skill int2t05/engineering-skills
# Prototype
A prototype is **throwaway code that answers a question**. The question decides the shape.
## When to use
- "Does this logic / state model feel right?" → logic prototype
- "What should this look like?" → UI prototype
- Sanity-check a state machine or data model before committing; explore UI directions before picking one
- Triggers on "prototype", "throwaway", "mockup", "compare layouts", "validate the interaction", "sketch out", "try this quickly", "build a demo", "原型", "试做", "试这个方案", "搭个快速 demo"
**Not for:** production UI implementation (use `frontend-design`); production code (use `implement`).
## Steps
### 1. Pick a branch
The two branches produce very different artifacts; getting this wrong wastes the whole prototype.
- **Logic / state model** → load `references/logic.md`. Single shareable HTML file with free-play
buttons and tabbed guided walkthroughs a non-developer can drive.
- **What it looks like** → load `references/ui.md`. Several radically different UI variations on one
route, switchable via `?variant=` and a floating bar.
If the question is ambiguous and the user isn't reachable, default to whichever branch matches the
surrounding code (backend module → logic; page/component → UI) and state the assumption up top.
### 2. Build it throwaway from day one
- Locate it close to where it will be used, but name it so a reader sees it's a prototype
- Trivial to run: one command in the task runner, or a single HTML file double-clicked
- No persis