| name | slide-deck |
| description | Research a topic then build a self-contained HTML slide deck with sidebar navigation. Use when asked to create a presentation, slide deck, or interactive guide from research. |
| compatibility | Requires Docker |
Requirements
- Docker (image
pi-slide-deck-validate built on first run)
- No Python, html5lib, or beautifulsoup4 needed on host
Slide Deck Builder
How
- Research with
read, bash, grep. Collect source URLs.
- Plan categories, slide IDs, order. Each slide gets
id="slide-<slug>".
- Copy
templates/sidebar-deck.html as the scaffold. It has every CSS class, layout, and JS hook you need — don't reinvent any of it.
- Write one
<div class="slide"> per topic. Nav items must have a 1:1 mapping to slide IDs.
- Output to
{skill-dir}/tmp/{yyyy-mm-dd}-{topic-slug}.html. Create mkdir -p {skill-dir}/tmp first. Resolve {skill-dir} from this SKILL.md's location.
- Open in browser:
open {output-path}.
Content Rules
- Description first. Every slide opens with
<div class="description"> explaining what and why, before anything else.
- Actionable examples.
<div class="prompts"> for CLI commands, agent prompts, "try this" steps. Skip if topic has none.
- Real code, no pseudocode.
<div class="code-block"> with actual runnable TypeScript/bash/JSON. No ... ellipsis hiding relevant code.
- Key points grid.
<div class="key-points"> (2-col) for the 2-4 most important takeaways per slide.
- Feature grids only for overviews.
<div class="feature-grid"> on title/intro slides, not per-topic slides.
- Category tag every slide.
<span class="ext-tag tag-<category>">. Tags: safety, tool, command, ui, render, prompt, git, session, game, system, provider.
- Strong highlights the noun, not the verb. "a stateful tool that demonstrates..." not "a stateful tool that demonstrates..."
- Source links on every slide.
<div class="sources"> at the bottom with <a href> links to origin files, repos, docs, Wikipedia. No slide without at least one link.
Negative Constraints
- No CDN, no
@import, no external deps of any kind (including fonts). The template uses system font stacks — copy them, don't add Google Fonts.
- No light mode, no theme toggle, no responsive breakpoints below 768px.
- Don't invent new CSS custom properties. The template defines them all.
- Don't cram multiple topics into one slide.
- Don't write HTML from scratch. Copy
templates/sidebar-deck.html and fill in content — the scaffold's <div class="main"> wrapper, nav structure, and JS hooks must be preserved exactly.
- No misnested elements. Browsers auto-close parents on invalid nesting (e.g.
<span> wrapping <div>), silently breaking DOM. Use the template's nesting patterns exactly.
Verification
Before writing, run:
scripts/validate.sh OUTPUT.html
Runs in Docker — no host dependencies. Uses html5lib parser (mirrors browser DOM construction) to catch misnested elements, broken nav links, and external deps. Fix all ✗ before writing.
Editorial rules (description first, sources with links, etc.) are enforced by Content Rules above — the validator only checks structural validity.
