`, topbar text, and the four example `<section class="slide">` blocks with real slides. 3. For the presenter edition, copy the file again and change `<body>` to `<body class="presenter-file">`. Never fork slide content between editions. 4. Verify (both scripts need chromium on PATH): ```bash python3 scripts/check-slides.py path/to/deck.html # fit audit — gates the build python3 scripts/shoot-slides.py path/to/deck.html # PNG per slide ``` 5. Open the PNGs and look at them. The audit checks fit; only an eye catches colliding labels, dead space, or bottom-heavy slides. ## Rules that are load-bearing - Slides are 1600×900 px. No `vw`/`vh`/`%` for slide content — px only. The stage transform does all scaling. - `overflow:hidden` on `.slide` is intentional. Content that doesn't fit is a build bug: cut or split the slide, never enable scroll. - Keep `justify-content:safe center` on `.sbody` — plain `center` spills overflow over the title where the audit can't see it. - Every slide ends with `p.cite` pinned at the bottom, even "Sources: internal discussion". A bare bottom edge reads unfinished. - No external resources — no CDN, web fonts, or remote images. Embed Chart.js inline if charts are needed. - Slide `<section>`s are direct children of `#deck` only. - Keep the literal `</body>` out of new JS strings — the screenshot harness patches before the last one. ## Slide anatomy ```html <section class="slide" data-hour="Block 00:00-01:00" data-t="0:05" data-dur="8"> <p class="kicker">Eyebrow</p> <h1>Title</h1> <div class="sbody">…</div> <p class="cite">Sources: …</p> <div class="script">…presenter notes…</div> </section> ``` `data-hour` labels the block (set on a block's first slide), `data-t` is the planned clock position, `data-dur` the planned minutes — the presenter timer flags overruns against them. ## Authoring Component catalogue, slide types, the `svg.dia` diagram system, retheming via `:root` tokens, and the build-script pattern for 15+ slide decks: **read `references/authoring.md`**. Talk-track schema (`.script` blocks: `say-exactly`, `do-now`, `ask`, `expected`, `if-quiet`, `bridge`, `timing`, …), presenter view, and the presenter-file edition: **read `references/presenter-notes.md`**. Editing the runtime or stylesheet, writing a deck generator, charts, print, or the audit/screenshot internals: **read `references/runtime-contract.md`**. ## Interaction patterns worth reaching for - `.veil` blurs a value until V is pressed — the room commits a guess before seeing the answer. Pair with a `.predict` box. - `.divider` slides reset attention between blocks; `.hourbar` pips show progress through the day. - `.flow`, `.ladder`, `.orbit`, `.days`, `.roles`, `.check` cover most structural needs before any new CSS. ## Common mistakes | Symptom | Cause | Fix | |---|---|---| | Slide content clipped live | skipped the fit audit | run check-slides.py, cut content | | Overflow paints over the title | `justify-content:center` | restore `safe center` | | Slide off-centre / unscaled | stage transform via CSS var() | keep the JS inline-style transform | | Chart renders blank | responsive sizing in a `display:none` slide | set `data-w`/`data-h`, bootstrap handles the rest | | Presenter popup unstyled | deck `<style>` isn't first in `<head>` | reorder — the popup injects stylesheet #1 | | Screenshot shows only slide 1 | patch injected before first `</body>` | shoot-slides.py already patches the last | | "57 slides, all fit" but unreadable | fit ≠ readable

# Slide Deck > Use when creating or editing HTML presentation decks, slide decks, training or workshop slides, presenter decks, or speaker-notes documents — especially self-contained single-file decks that must run offline on unknown projectors, carry per-slide talk tracks, support a presenter-view window, or need rendered-image and overflow verification before delivery. - Skill: `datavedam/slide-deck` (Agent Skill, multi-file: 7 files) - Install (CLI): `npx skillmds@latest add datavedam/slide-deck` - Raw SKILL.md: https://api.skillmd.com/api/skills/datavedam/slide-deck/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: datavedam (https://skillmd.com/u/datavedam) - Updated: 2026-09-22 - Page: https://skillmd.com/skills/datavedam/slide-deck --- # Slide deck Single-file HTML decks on a fixed 1600×900 canvas: identical on a 4K monitor and a hotel projector, zero dependencies, works over `file://`. Each slide carries its presenter script inside itself; the same file serves the room, the presenter popup, the printed handout, and the readable presenter edition. ## Quick start 1. Copy `assets/deck-template.html` to the output path. It is a working deck — open it in a browser to see the machinery. 2. Replace the ``, topbar text, and the four example `<section class="slide">` blocks with real slides. 3. For the presenter edition, copy the file again and change `<body>` to `<body class="presenter-file">`. Never fork slide content between editions. 4. Verify (both scripts need chromium on PATH): ```bash python3 scripts/check-slides.py path/to/deck.html # fit audit — gates the build python3 scripts/shoot-slides.py path/to/deck.html # PNG per slide ``` 5. Open the PNGs and look at them. The audit checks fit; only an eye catches colliding labels, dead space, or bottom-heavy slides. ## Rules that are load-bearing - Slides are 1600×900 px. No `vw`/`vh`/`%` for slide content — px only. The stage transform does all scaling. - `overflow:hidden` on `.slide` is intentional. Content that doesn't fit is a build bug: cut or split the slide, never enable scroll. - Keep `justify-content:safe center` on `.sbody` — plain `center` spills overflow over the title where the audit can't see it. - Every slide ends with `p.cite` pinned at the bottom, even "Sources: internal discussion". A bare bottom edge reads unfinished. - No external resources — no CDN, web fonts, or remote images. Embed Chart.js inline if charts are needed. - Slide `<section>`s are direct children of `#deck` only. - Keep the literal `</body>` out of new JS strings — the screenshot harness patches before the last one. ## Slide anatomy ```html <section class="slide" data-hour="Block 00:00-01:00" data-t="0:05" data-dur="8"> <p class="kicker">Eyebrow</p> <h1>Title</h1> <div class="sbody">…</div> <p class="cite">Sources: …</p> <div class="script">…presenter notes…</div> </section> ``` `data-hour` labels the block (set on a block's first slide), `data-t` is the planned clock position, `data-dur` the planned minutes — the presenter timer flags overruns against them. ## Authoring Component catalogue, slide types, the `svg.dia` diagram system, retheming via `:root` tokens, and the build-script pattern for 15+ slide decks: **read `references/authoring.md`**. Talk-track schema (`.script` blocks: `say-exactly`, `do-now`, `ask`, `expected`, `if-quiet`, `bridge`, `timing`, …), presenter view, and the presenter-file edition: **read `references/presenter-notes.md`**. Editing the runtime or stylesheet, writing a deck generator, charts, print, or the audit/screenshot internals: **read `references/runtime-contract.md`**. ## Interaction patterns worth reaching for - `.veil` blurs a value until V is pressed — the room commits a guess before seeing the answer. Pair with a `.predict` box. - `.divider` slides reset attention between blocks; `.hourbar` pips show progress through the day. - `.flow`, `.ladder`, `.orbit`, `.days`, `.roles`, `.check` cover most structural needs before any new CSS. ## Common mistakes | Symptom | Cause | Fix | |---|---|---| | Slide content clipped live | skipped the fit audit | run check-slides.py, cut content | | Overflow paints over the title | `justify-content:center` | restore `safe center` | | Slide off-centre / unscaled | stage transform via CSS var() | keep the JS inline-style transform | | Chart renders blank | responsive sizing in a `display:none` slide | set `data-w`/`data-h`, bootstrap handles the rest | | Presenter popup unstyled | deck `<style>` isn't first in `<head>` | reorder — the popup injects stylesheet #1 | | Screenshot shows only slide 1 | patch injected before first `</body>` | shoot-slides.py already patches the last | | "57 slides, all fit" but unreadable | fit ≠ readable | shoot-slides.py and view the PNGs |