Build polished, self-contained HTML slide decks — then iterate on them live in a browser editor where you point at an element, type a change, and an agent applies it.
nextgen-slides is an agent skill for Claude Code (and other coding agents). It teaches the agent a disciplined, content-first workflow for making presentations as a single .html file: nail the words on a plain canvas, lock one styled reference slide, then roll that look across the deck — all previewed live in a local visualizer.
Every deck is one file, inline CSS/JS, zero runtime dependencies, and a self-scaling 1920×1080 stage that renders identically in a browser, an editor, or a projector.
npx skills add MadsNyl/nextgen-slidesThat drops the skill into .claude/skills/ (add -g for ~/.claude/skills/, so it's available in every project). Then just ask your agent:
"Make me a slide deck about …" · "Build an HTML presentation for …" · "Open the slides so I can edit them."
The skill ships a dependency-free visualizer: a local browser tool that serves your deck next to a side panel. Double-click any text to edit it in place, single-click an element to leave a comment for the agent, and batch your requests in the panel — each one tracks live from Queued → Working → Done ✓ as the agent applies it, while the deck live-reloads as edits land.
node .claude/skills/nextgen-slides/visualizer/bin/slides-viz.js launch deck.htmlThe same skill also builds videos — self-contained motion-graphics as a single HTML file, driven by a deterministic timeline engine (one master clock over the Web Animations API), so they render live in the browser with no export step. Open one in the editor and the panel automatically switches to a video UI: a transport bar with play/pause, a frame-accurate scrubber, speed control, and a replay button. Comments capture the exact timecode, so you can tell the agent "tighten this at 0:13."
Two video references ship with the skill — a motion-graphics explainer and a stat-driven hype reel — built the same self-scaling 1920×1080 way as the decks. The editor detects the deck type automatically: a deck exposing window.videoDirector opens the video editor; everything else opens the slides editor.
Ten reference decks ship with the skill — each commits hard to a single visual and thematic direction, so there's a strong starting point for almost any talk. Below: the first three slides of each.
Literary keynote. Navy & gold, Fraunces + Newsreader, big italic pull-quotes.
Brutalist, high-contrast. Black/white + electric red, giant numerals.
Calm print feel. Cream paper, terracotta, Instrument Serif, hairline rules.
Neon product keynote. Near-black, mint/violet glows, gradient hero.
International Typographic. White, red accent, visible grid, Archivo.
Playful 80s. Pastel shapes, squiggles, thick borders, tilted cards.
Hacker terminal. Phosphor green on black, window chrome, scanlines.
Nature editorial. Deep forest green, sage, botanical line art.
Investor deck. Deep indigo, blue→violet gradient, generous whitespace.
Vintage broadsheet. Aged paper, masthead, drop caps, columns.
The skill drives a content-first, style-later workflow in gated stages:
- Interview — a short round of questions: purpose, audience, angle, length.
- Outline — the agent scaffolds a plain white content canvas and opens it in the editor; you refine the words together, live.
- Reference slide — once the content is settled, the agent styles one slide and iterates on it until you confirm the look.
- Propagate — the locked style rolls across every slide.
- Iterate — propagate isn't the finish line. The agent stays in the live loop, refining the deck with you until you hit Continue to close the editor.
The visualizer, the outline canvas, and the finished deck all share the same contract (.slide / .active / window.goToSlide / a computed #counter), so live editing works identically at every stage. Videos follow the parallel window.videoDirector timeline contract.
nextgen-slides/
├─ README.md
├─ docs/screenshots/ # gallery + editor images
└─ skills/
└─ nextgen-slides/
├─ SKILL.md # the skill definition the agent reads
├─ references/ # 10 deck templates + 2 video templates + starters + guides
│ ├─ editorial-serif.html · bold-signal.html · warm-paper.html · … (decks)
│ ├─ motion-explainer.html · bold-signal-video.html (videos)
│ ├─ deck-template.html · outline-template.html
│ ├─ stage.css · style-presets.md · animation-patterns.md
└─ visualizer/ # dependency-free live editor (slides + video)
├─ server.js · sdk.js · bin/slides-viz.js
└─ ui/ # shared editor-core.js + editor.css, two shells
You don't have to go through the agent — the templates are standalone:
cp skills/nextgen-slides/references/swiss-grid.html deck.html
# edit deck.html, keeping the .slide structure + script block
open deck.html # ← / → or space to navigateMIT