---
name: slides
description: Generate the video's slide deck (HTML + Mermaid, offline, brand-styled) from its beat map. Use after beats.md exists, or when the creator asks for slides/diagrams for a video.
---
<!-- Adapted from the hijoseromero production repo (Claude Code skill). Generic version: personal rules, private paths and names removed.
   Assumes a repo laid out as content/videos/NNN-slug/, content/ideas.md, pipeline/, tools/ (auto-editor, faster-whisper, Playwright).
   Drop this file at.claude/skills/slides/SKILL.md and invoke with /slides. -->

# Slide deck generation

House standard: `pipeline/slides/README.md`. Template: `pipeline/slides/template.html`. Reference deck: a previous video's `slides/deck.html`.

1. Read the video's `beats.md`, the Slide ID column defines exactly which slides exist. No orphan slides, no uncovered beats (`face` = camera only, no slide).
2. Copy the previous video's deck as the starting point (style continuity; decks are versioned so diffs show drift). Replace `<section id="...">` contents per beat.
3. Rules: one idea per slide; ≤5 text lines; numbers BIG (`.big`); diagrams > bullets (Mermaid `flowchart`, dark theme is preconfigured); brand palette only.
4. Write the source as `slides/deck-src.html`, then BUILD the presentable deck:
  `tools/.venv/bin/python tools/build_deck.py <video>/slides/deck-src.html` → `deck.html` (static, charts as inline SVG, signature embedded, publish-safe). Never present deck-src directly, mermaid renders hidden slides at zero size AND can throw live "Syntax error" bombs the built deck doesn't have (happened on 004). **Always include the red warning banner div at the top of deck-src's `<body>`** (`⚠️ SOURCE FILE, do not present. Open deck.html`), build_deck.py strips it from the built output. When handing off, give the creator the full path to `deck.html`, never just "the deck".
5. Footer on every slide: centered `your-site.com` (`#site` div in the template pattern). **Mouse nav is REQUIRED on every deck** : the `.nav` ‹ › buttons at mid-height left/right edges, wired to `show(i±1)`, pattern is in `pipeline/slides/template.html`; never ship a deck without them.
  **Caption-safe area (learned on 001):** YouTube/VLC closed captions render in the bottom-center of the frame, the bottom ⅙ of the screen (bottom 180px at 1080p). NO essential content (bullets, numbers, diagram nodes, table rows, mini-hooks) in that band; only the footer branding lives there, and it's accepted that CC-on viewers will cover it. If a slide's content creeps into the band, shrink or raise it.
6. Publish-safety: decks are hosted on the blog after the video posts, no private info, paths, or red-line content (incl. catch-all secrecy) in slides OR html. Check your privacy rules file.
7. **MANDATORY full audit: screenshot EVERY slide of the BUILT deck and LOOK at them.**
  `tools/.venv/bin/python tools/audit_deck.py <deck.html> <scratch-dir>` (1920×1080, waits out the entrance animations, plain firefox --screenshot fires at t=0 and captures empty slides), then montage and inspect. Check: text overflow/cramped chart nodes, chart+label readability at distance, footer/signature not overlapped, animations settle to fully-visible content, **and nothing but the footer inside the bottom-⅙ caption-safe band**. Fix and re-audit until clean, never hand off unseen slides.
8. Add `[SLIDE: id]` cues to `recording-guide.md` if any beat changed.
