prototype-guidelisted
Install: claude install-skill Florellaoccipital551/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
- Use Tailwind CSS via CDN and Google Fonts for typography
- Include all CSS and JavaScript inline
- Use mock data instead of real APIs
## Design Context Injection
Before generating, read the relevant project files to understand the full context:
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
These files drive every design decision. A prototype built without reading them validates nothing.
### Blueprint Context (include when `docs/product/design/` exists)
Read all available artifacts from `docs/product/design/` (information architecture, brand direction, user flows, content model, AI interaction model). When present, brand direction overrides ad-hoc aesthetic inference from design principles.
### Additional Context (include when available)
5. **State Design** — which states to demonstrate (Loading / Empty / Error / Partial / Success)
6. **Ac