← ClaudeAtlas

prototype-guidelisted

Generates self-contained HTML prototypes with design context from project files. Read design principles, personas, and hypothesis files, then produce a working prototype for Usability and Value risk validation. Use when creating prototypes or validating through tangible artifacts.
shinpr/claude-code-discover · ★ 10 · Web & Frontend · score 80
Install: claude install-skill shinpr/claude-code-discover
# Prototype Generation Guide ## Purpose Prototypes are **hypothesis validation tools**, not final implementations. They test Usability and Value risks by making ideas tangible enough for evaluation. ## Output Format Generate a **single self-contained HTML file** in `docs/discovery/prototypes/`. The file must: - Open directly in a browser (double-click) with no build step - Include all CSS and JavaScript inline - Use mock data instead of real APIs Choose the smallest browser-native implementation that makes the validation boundary observable. Use an external CSS or font resource only when a supplied design decision requires it and the prototype remains directly openable; a library choice is not part of the validation outcome. ## Design Context Injection Before generating, read the target hypothesis and the source artifacts whose decisions can change the tested flow: 1. **Design Principles** — read `docs/product/design-principles.md` 2. **Persona** — read relevant file from `docs/product/personas/` 3. **Hypothesis Under Test** — read the target hypothesis file from `docs/discovery/hypotheses/` 4. **Vision** — read `docs/product/vision.md` for tone and value proposition Prefer these canonical paths but accept equivalent supplied evidence. These sources drive only the decisions they actually govern. Use their content directly; do not replace missing evidence with plausible product prose. Inspect another artifact only when it can change the tested interaction. ### Bluepr