← ClaudeAtlas

prototypelisted

Use when a design question is best answered by a throwaway prototype — a single shareable HTML file for state/logic, or several toggleable UI variations to compare. Triggers on "prototype", "throwaway", "mockup", "compare layouts", "validate the interaction", "sketch out", "try this quickly", "build a demo", "原型", "试做", "试这个方案", "搭个快速 demo".
int2t05/engineering-skills · ★ 3 · Web & Frontend · score 74
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