interactive-prototype
Installation
SKILL.md
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:
Read .claude/design-tokens.jsonif existsBash(ls ~/.claude/design-systems/ 2>/dev/null)— if brief mentions a brand matching a folder name → auto-applyGlobfor codebase tokens:**/tailwind.config.*,**/theme.{ts,js,json},**/tokens.{css,scss},**/_variables.*- 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).