القائمة
Build a hi-fi clickable React prototype with realistic device chrome. Triggered by "prototype", "clickable", "app mockup", "interactive demo".
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Build an HTML slide deck (1920×1080, keyboard nav, exportable) when user asks for a presentation, pitch deck, slides, or keynote. Uses deck_stage.js starter and Claude Design taste rules.
Screenshot + console sweep + visual inspection of an artifact for layout/color/typography regressions. Silent on pass, reports only on issues. Use after /done reports clean and before end-of-turn.
Build animated motion design (explainer, transition reel, product intro). Uses Stage/Sprite timeline from animations.jsx for in-browser compositions or Remotion for full video/MP4 workflows.
Apply buffered tweaks from pending.yaml to the source HTML file. Invoked when user says "save tweaks", "apply tweaks", "persist panel changes", or runs /apply-tweaks.
Generate a working demo artifact on dummy content so the user can see a reference implementation. Use when user says "show me an example deck", "what does a prototype look like", "give me a starter", "I want to see an example of X". Generates live — not from a static gallery.
Extract or build a design system (tokens, components, style guide). Use for "design system", "style guide", "tokens", "UI kit".
| name | interactive-prototype |
| description | Build a hi-fi clickable React prototype with realistic device chrome. Triggered by "prototype", "clickable", "app mockup", "interactive demo". |
| argument-hint | <feature or app description> |
| allowed-tools | Read Write Edit Glob Grep Bash(cp:*) Bash(open:*) Bash(mkdir:*) mcp__chrome-devtools__* |
Build a working clickable prototype — not a static mockup. Uses React + Babel inline with pinned versions, wrapped in a DeviceFrame.
Before design questions, silently check for context:
Read .claude/design-tokens.json if existsBash(ls ~/.claude/design-systems/ 2>/dev/null) — if brief mentions a brand matching a folder name → auto-applyGlob for codebase tokens: **/tailwind.config.*, **/theme.{ts,js,json}, **/tokens.{css,scss}, **/_variables.*Skill: ingest-github; Figma URL → Skill: ingest-figma; image attachment → Skill: ingest-screenshot; .md/.pdf → ReadIf nothing found, ask ONE AskUserQuestion: design system from registry / codebase / screenshot / Figma / none (use frontend-design) / Claude decides. Report "Using . Proceeding."
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:
Do not ask about brand context — Phase 0 already handled it.
Using context from Phase 0, commit to a mobile-aware system:
Skill: frontend-designartifacts/<slug>.html with shell:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>{{name}}</title>
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
<script src="./device_frame.jsx" type="text/babel"></script>
<script src="./animations.jsx" type="text/babel"></script>
<style>body { margin: 0; display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #f4f4f6; }</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const { useState } = React;
// your components here
function App() {
const [screen, setScreen] = useState('home');
return <DeviceFrame kind="ios">
{screen === 'home' && <HomeScreen onNav={setScreen}/>}
{screen === 'detail' && <DetailScreen onBack={() => setScreen('home')}/>}
</DeviceFrame>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App/>);
</script>
</body>
</html>
Bash(cp starters/device_frame.jsx "$(dirname <html>)/") + Bash(cp starters/animations.jsx "$(dirname <html>)/") — copy into the same dir as the HTMLuseState for current screen. For transitions use <Transition> from animations.jsx.const styles = {...}. Use component-prefixed names: const headerStyles, const cardStyles. Inline styles also OK.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/<slug>.html
Fix errors → Skill: verify-artifact in background.
/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