メニュー
First-run setup + health check. Verifies Chrome DevTools MCP, installs optional deps (monolith, pptxgenjs, puppeteer), creates working dirs, runs smoke test. Use on fresh clone or when things feel broken.
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 | doctor |
| description | First-run setup + health check. Verifies Chrome DevTools MCP, installs optional deps (monolith, pptxgenjs, puppeteer), creates working dirs, runs smoke test. Use on fresh clone or when things feel broken. |
| allowed-tools | Read Write Bash(claude:*) Bash(which:*) Bash(brew:*) Bash(npm:*) Bash(node:*) Bash(mkdir:*) Bash(ls:*) Bash(test:*) mcp__chrome-devtools__* |
Cold-start health check + optional auto-install. Safe to run multiple times.
Run in parallel where possible:
Bash(claude mcp list) — parse output, look for chrome-devtools: ✓ ConnectedBash(which monolith) — existence checkBash(which node) — requiredBash(which gh) — for /ingest-githubBash(test -f package.json && echo yes || echo no)Bash(test -d starters && echo yes || echo no) — expect yesBash(test -d artifacts && echo yes || echo no)Bash(test -d .claude/skills && echo yes || echo no) — expect yesPrint structured report:
Chrome DevTools MCP: ✓ / ✗ (if ✗, show install command)
monolith CLI: ✓ / ✗ (optional; needed for /export-standalone)
Node: ✓ / ✗ (required)
gh CLI: ✓ / ✗ (needed for /ingest-github)
package.json: exists / missing
starters/ dir: exists / missing
artifacts/ dir: will create
.claude/skills/: N skills found
FIGMA_TOKEN env: set / not set (only needed for /ingest-figma)
For each missing item, ask the user with AskUserQuestion: "Install X now?" (yes/skip/all).
Repair commands (only on yes):
Bash(claude mcp add chrome-devtools -s user -- npx chrome-devtools-mcp@latest) — note: requires Claude Code restart to take effectBash(brew install monolith) (macOS) or tell user for linuxBash(test -f package.json || npm init -y)
Bash(npm install -D pptxgenjs puppeteer)
Bash(mkdir -p artifacts assets/thumbs test)If everything is green (and user didn't just run install → restart):
test/smoke-deck.html:
<!doctype html>
<html><head><meta charset="utf-8"/><title>Smoke</title>
<script src="../starters/deck_stage.js"></script></head>
<body><deck-stage width="1920" height="1080">
<section style="padding:60px;font:48px/1.2 Georgia"><h1>One</h1></section>
<section style="padding:60px;font:48px/1.2 Georgia;background:#f4e4d7"><h1>Two</h1></section>
<section style="padding:60px;font:48px/1.2 Georgia;background:#4a5d2e;color:#fff"><h1>Three</h1></section>
</deck-stage></body></html>
/done test/smoke-deck.html.claude/last-preview.png exists and console is cleanPrint one-liner hints:
Available commands & skills:
/make-deck <brief> — build a slide deck
/interactive-prototype <brief> — clickable React prototype
/wireframe <thing> — low-fi variants
/create-design-system <src> — extract style guide
/ingest-github <url> — pull tokens from repo
/ingest-screenshot <path> — extract tokens from image
/ingest-figma <url> — pull from Figma (needs FIGMA_TOKEN)
/make-tweakable <html> — add live tweak panel
/apply-tweaks <html> — persist panel changes
/register-asset <html> — add to assets.html overview
/verify-artifact <html> — vision-based QA
/export-pdf /export-pptx /export-standalone /handoff
/preview /done /screenshot — operational atomics