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.

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

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

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.