| name | new-storybook |
| description | Scaffold a new episode storybook HTML deck with the shared house theme, SVG sprite cast, and Deck slide controller. Use when starting a new "ep-N-*-storybook.html" presentation so the theme stays consistent across episodes instead of being copy-pasted. |
| disable-model-invocation | true |
new-storybook
Scaffold a new episode deck from the canonical template so every episode shares
the same theme, fonts, slide controller, and sprite cast.
When to use
Starting a new episode presentation. Run /new-storybook (user-invoked only —
it writes a file, so Claude never triggers it on its own).
What the deck is
One .html file in the repo root that links the shared design system
(assets/storybook.css + assets/deck.js) via relative paths — no build step,
works on file:// and GitHub Pages. The deck itself holds only its slides,
episode-specific sprites, and a NEW COMPONENTS <style> block. See
../../../CLAUDE.md for the full house conventions.
Steps
-
Ask for the episode number and topic if not given. Derive the filename:
ep-<N>-<kebab-topic>-storybook.html in the repo root — match the existing
pattern (ep-2-skills-subagents-hooks-storybook.html,
ep-3-claude-setup-and-claudemd-storybook.html).
-
Copy the template in this skill dir to the new file:
cp .claude/skills/new-storybook/template.html ep-<N>-<topic>-storybook.html
-
Fill the placeholders (do NOT touch assets/storybook.css or
assets/deck.js — those are shared by every deck):
<title> — the episode title.<body data-ep-label="Ep N · Topic"> — feeds the fixed deck header.- Slide 1
kicker / h1 / opening bubble / promise caption.
- Replace the sample content/act/outro slides with the real episode beats.
THE END… OF EPISODE N in the outro.
-
Add episode-specific sprites as new <symbol id="ch-..."> blocks in the
SVG defs, then reference with <svg class="char bob"><use href="#ch-NAME"/></svg>.
The base cast (#ch-claude, #ch-lead) is injected by assets/deck.js —
don't redefine it.
-
Add episode-specific component CSS only in the trailing
NEW COMPONENTS (this episode) block at the very bottom — never edit the
shared assets/storybook.css for one episode's needs.
House rules (don't break these)
- Shared design system:
assets/storybook.css = comic base + storybook
override + deck header/footer chrome; assets/deck.js = sprites + header/footer
Deck controller. A change there hits every deck — episode styling goes in
the deck's own NEW COMPONENTS block (later in the document, wins cascade ties).
- Episode JS (if any) goes in its own small inline
<script> after the
assets/deck.js tag — never fork deck.js.
- Fragments: any element with class
frag is hidden until stepped into.
Add .pop or .slam for entrance style. Order in the DOM = reveal order.
- Navigation:
→/space/PageDown advance (one fragment, then one slide),
←/PageUp back, Home/End jump. The Deck controller handles all of it — leave
the <div id="bar">, <div id="counter">, <div class="hint"> in place.
- One
<section class="slide"> per slide. The counter auto-detects the count.
Building from a plain outline
For richer slides (diagrams, mappings, comic loops) than the template's samples,
also consider the frontend-slides skill — it knows the full component palette
and animation patterns. This skill is the fast path to a correctly-themed skeleton.
Verify before done
- Open the file in a browser; arrow through every slide.
- Confirm the counter shows the right total and the progress bar fills.
- Check it at a narrow width (mobile) and short height — the theme has responsive
breakpoints that should keep slides readable.
