# Interactive Prototype > Build a hi-fi clickable React prototype with realistic device chrome. Triggered by "prototype", "clickable", "app mockup", "interactive demo". - Skill: `bluzir/interactive-prototype` (Agent Skill) - Install (CLI): `npx skillmds@latest add bluzir/interactive-prototype` - Raw SKILL.md: https://api.skillmd.com/api/skills/bluzir/interactive-prototype/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: bluzir (https://skillmd.com/u/bluzir) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/bluzir/interactive-prototype --- # Interactive Prototype Build a working clickable prototype — not a static mockup. Uses React + Babel inline with pinned versions, wrapped in a DeviceFrame. ## Phase 0 — Context pre-flight (auto-detect, ONE question max) Before design questions, silently check for context: 1. `Read .claude/design-tokens.json` if exists 2. `Bash(ls ~/.claude/design-systems/ 2>/dev/null)` — if brief mentions a brand matching a folder name → auto-apply 3. `Glob` for codebase tokens: `**/tailwind.config.*`, `**/theme.{ts,js,json}`, `**/tokens.{css,scss}`, `**/_variables.*` 4. Scan brief for: github URL → `Skill: ingest-github`; Figma URL → `Skill: ingest-figma`; image attachment → `Skill: ingest-screenshot`; `.md`/`.pdf` → `Read` If nothing found, ask ONE `AskUserQuestion`: design system from registry / codebase / screenshot / Figma / none (use frontend-design) / Claude decides. Report "Using . Proceeding." ## Phase 1 — Ambiguity gate Check brief for: platform (iOS/Android/desktop/web), app category (food delivery, social, productivity, etc.), feature count, design context (brand/codebase). If platform + category present → max 2 clarifying questions. Otherwise `AskUserQuestion`: - Platform - Screens needed (list) - Transitions between screens (instant / slide / fade / custom) - Does it need "live data" mocking (fake API returns) - How interactive — taps only, or scroll/swipe/drag - Variations wanted **Do not** ask about brand context — Phase 0 already handled it. ## Phase 2 — Visual system Using context from Phase 0, commit to a mobile-aware system: - Min 44px hit targets on mobile - Consistent spacing / type scale from loaded tokens - If no tokens → invoke `Skill: frontend-design` ## Phase 3 — Build 1. `artifacts/.html` with shell: ```html {{name}}

``` 2. `Bash(cp starters/device_frame.jsx "$(dirname )/")` + `Bash(cp starters/animations.jsx "$(dirname )/")` — copy into the same dir as the HTML 3. Navigation pattern: `useState` for current screen. For transitions use `` from animations.jsx. 4. **Critical React rule:** never `const styles = {...}`. Use component-prefixed names: `const headerStyles`, `const cardStyles`. Inline styles also OK. 5. Mock data inline; no external fetch. ## Phase 4 — Verify **Important:** because this artifact loads external `.jsx` starters, `file://` will hit CORS errors. Run `/serve` first (one-time), then preview via http: ``` /serve /done http://127.0.0.1:4567/artifacts/.html ``` Fix errors → `Skill: verify-artifact` in background. ## Phase 5 — Next steps - `/make-tweakable` to expose knobs (primaryColor, fontSize, density variants) - `/export-standalone` for offline deliverable - `/handoff` to produce component files for the dev team - `/register-asset` to add to overview