メニュー
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.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
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".
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.
| name | make-deck |
| description | 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. |
| argument-hint | <brief or topic> |
| allowed-tools | Read Write Edit Glob Grep Bash(cp:*) Bash(open:*) Bash(mkdir:*) Bash(realpath:*) mcp__chrome-devtools__* |
Build an HTML slide deck that looks designed, not AI-generated. Uses starters/deck_stage.js for keyboard nav, scaling, speaker notes, and print-to-PDF.
Before asking design questions, detect context silently via auto-checks. Only ask the user if nothing is found.
Read .claude/design-tokens.json — project tokens, if exist → loadBash(ls ~/.claude/design-systems/ 2>/dev/null) — org-level registry. If the brief mentions a brand name matching a folder → auto-apply it (e.g. brief "Acme deck" + ~/.claude/design-systems/acme/ → use Acme)Glob **/tailwind.config.* **/theme.{ts,js,json} **/tokens.{css,scss} **/_variables.* at project root — if found, note "codebase detected" and Read themSkill: ingest-github firstSkill: ingest-figma firstSkill: ingest-screenshot first.md / .txt / .pdf file attached → Read it (may contain brand refs or content)If no context found after auto-detect, use AskUserQuestion with a single question, text-options:
~/.claude/design-systems/ (if any)Skill: frontend-design for aesthetic-from-scratchReport what was found/chosen in one line: "Using . Proceeding…"
Check the user's brief ($ARGUMENTS) for these signals:
If ≥2 of 3 present → skip long questionnaire, proceed with max 1-2 clarifying questions.
If <2 present → invoke AskUserQuestion with:
Ask at least 4 relevant questions even in gate-passed mode if anything is still unclear. Do not ask about brand context — Phase 0 already handled it.
Instead of asking user "use speaker notes?", decide from signals:
| Signal in brief | → speaker notes |
|---|---|
| "quick", "standup", "lightning", "recap", <100 chars | off — self-sufficient slides, no notes |
| "for investors", "Board meeting", "keynote", "All Hands" | on — sparse slides, notes carry narrative |
| Attached PRD / long doc (>500 words) | on — slides distill, notes script |
| Only 1-3 slides requested | off |
| 10+ slides requested | on (probably a story arc) |
| Ambiguous / none of above | ask a single yes/no question |
If on: generate <script type="application/json" id="speaker-notes">[...]</script> at the end of <body> with one string per slide — full conversational narrative, not bullet-point summary. Keep slides visual-heavy.
If off: skip notes entirely; slides must stand alone.
Using context gathered in Phase 0, commit to a visual system up front:
Skill: frontend-design)Vocalize the system in one paragraph before writing slides.
artifacts/<slug>.html with shell:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>{{deck title}}</title>
<script src="./deck_stage.js"></script>
<style>/* your tokens + slide styles */</style>
</head>
<body>
<deck-stage width="1920" height="1080">
<section><!-- slide 1 --></section>
...
</deck-stage>
</body>
</html>
Bash(cp starters/deck_stage.js "$(dirname <html>)/") — copy starter into the same dir as the HTML (important for nested paths like artifacts/foo/deck.html)text-wrap: pretty<deck-stage> sections have overflow: hidden — overflow is visually silent, content just disappears. You must budget vertically up front.
Typical chrome layout on each slide consumes ~430px of the 1080 canvas:
| Item | Reserved |
|---|---|
| Section padding top | 96px |
| Chrome row (abs, but visual weight) | 24px |
| Kicker margin-top + kicker | 44 + 22 = 66px |
h2.section-title (font-size 80–96px × 2 lines) | ~200px |
| h2 margin-bottom | 36px |
| Content grid margin-top | 16px |
| Section padding bottom | 96px |
| Total reserved | ~430px |
Content budget: 1080 − 430 = ~650px. Any primary card, row, or media container in the content area must fit inside this.
Hard caps to keep you honest:
min-height: ≤ 500pxmin-height: ≤ 620pxIf a slide feels too busy — split it or cut content. Overflow is a design smell, not a typography problem.
Set hyphens: manual; -webkit-hyphens: manual; on <section> to prevent browsers from inserting soft-hyphens mid-word (breaks long Russian words across lines in narrow columns).
/done artifacts/<slug>.html — opens in browser, checks console, saves screenshot
Fix any errors; re-run until clean
Mandatory programmatic overflow audit (blocks end-of-turn if any slide overflows or is too tight):
// Paste into mcp__chrome-devtools__evaluate_script
async () => {
const stage = document.querySelector('deck-stage');
if (!stage) return { skipped: 'no deck-stage' };
// Decoratives we deliberately ignore (bleed past section bounds by design):
// glow halos, hero backdrops, chrome overlays, anything flagged data-decorative.
const DECORATIVE = '.glow, .glow-2, .hero-glow, .chrome, [data-decorative], [aria-hidden="true"].backdrop';
const isDecorative = (el) => {
if (el.matches(DECORATIVE) || el.closest(DECORATIVE)) return true;
const cs = getComputedStyle(el);
// pointer-events:none + no text + low opacity → visual decoration, skip
if (cs.pointerEvents === 'none' && !el.textContent?.trim() && parseFloat(cs.opacity) < 1) return true;
return false;
};
const out = [];
for (let i = 0; i < stage.totalSlides; i++) {
stage.goToSlide(i);
await new Promise(r => setTimeout(r, 80));
const s = stage.querySelectorAll('section')[i];
const sRect = s.getBoundingClientRect();
const scale = 1080 / sRect.height;
// Measure ALL elements (including position:absolute like .arrow-between, .save-cta,
// .footer-row that ARE meaningful content) — only decoratives are skipped.
let maxBottom = 0, culprit = null;
for (const el of s.querySelectorAll('*')) {
if (isDecorative(el)) continue;
const cs = getComputedStyle(el);
if (cs.display === 'none' || cs.visibility === 'hidden') continue;
const r = el.getBoundingClientRect();
if (r.height === 0 && r.width === 0) continue;
const b = (r.bottom - sRect.top) * scale;
if (b > maxBottom) { maxBottom = b; culprit = el.className?.toString?.().slice(0, 40) || el.tagName; }
}
const contentBottom = Math.round(maxBottom);
const overflow = contentBottom - 1080;
const headroom = 1080 - contentBottom;
const status = overflow > 0 ? 'FAIL' : headroom < 40 ? 'WARN' : 'OK';
out.push({ slide: i + 1, contentBottom, overflow, headroom, status, culprit });
}
stage.goToSlide(0);
return out;
}
FAIL (overflow > 0) — content clipped. Do not claim done. Shrink cards / fonts / padding, then re-run.WARN (headroom < 40px) — visually too close to the edge (any small font-metric variance clips). Aim for ≥ 60px headroom.OK — ship.Common fixes: reduce min-height on cards, shrink headline font, drop a row, merge kicker+title, tighten vertical gaps.
If the browser shows an overflow that this script says doesn't exist, hard-reload with cache-bust:
mcp__chrome-devtools__navigate_page({ type: "reload", ignoreCache: true }). Most such disagreements come from a cached CSS state prior to your latestEdit.
Invoke Skill: verify-artifact silently in background (vision check on layout — it handles per-slide screenshots automatically when it detects <deck-stage>)
Reference .claude/last-preview.png in end-of-turn summary
/export-pptx artifacts/<slug>.html — native PPTX via screenshots/export-pdf artifacts/<slug>.html — PDF/export-standalone artifacts/<slug>.html <dist>.html — single-file offline HTML/register-asset artifacts/<slug>.html — add to assets.html overview<script type="application/json" id="speaker-notes">[...]</script>/make-tweakable artifacts/<slug>.htmloklch() to harmonize with existing palette)