Animated slide decks, built with agents.

Give your coding agent a brief. Decks supplies slide components, animation tools and a workflow for presentations with transitions and interactive visualizations.

$ bun add slidev-addon-decks @slidev/cli slidev-theme-the-unnamed
$ bunx -p slidev-addon-decks decks init
$ bunx -p slidev-addon-decks decks new my-talk --story

Install Decks Read the docs

Free, Apache-2.0. Runs on Slidev, with shared guidance for Claude Code, Codex, Cursor and four other agents.

OpenData: public data, made usable for AI agents, slide 1 of 2

Twenty-nine files. No headers. No changelog.

About 7,691 unnamed fields per row, and the salary field alone has sat in 14 different columns.

OpenData: public data, made usable for AI agents: the deck's text

Slide 1, step 1Twenty-nine files. No headers. No changelog.About 7,691 unnamed fields per row, and the salary field alone has sat in 14 different columns.
Slide 1, step 2We reconcile it once. One dataset, one query.Every file mapped onto one schema and published as a single dataset.
Slide 2, step 1969 datasets. 203 agencies. 1.6 billion rows.Every square is one dataset OpenData agents cleaned and published.
Slide 2, step 217 categories, four of them most of the catalog.Education, government, health and economics are 566 of the 952.
Slide 2, step 3952 datasets. 3,291 relationships.952 of the 969 are ready and linked. The graph is how an agent sees the connections.
Slide 2, step 4Seven weeks, and the graph grew by half.630 datasets and 2,135 links in July; 952 and 3,291 today.

Open the example deck

Claude Code drafted this deck from one prompt in 16.8 minutes.

The Keeling curve deck below came from a fresh project set up with the commands above, then a second Claude Code session revised it.

The prompt

make a 5-slide story deck about what the Keeling curve shows about atmospheric CO2

Draft time: 16.8 min
Claude usage: $2.61
Agent turns: 47

Load the Keeling deck in the player Writing decks with an agent

A test write, blocked by the hook

We sent this line to the write hook of a project set up with decks init, as a Write to decks/my-talk/pages/01-cover.md. sh "$CLAUDE_PROJECT_DIR/.claude/hooks/decks.sh" hook lint blocks a write to deck prose when the text matches a list of phrases common in AI-written prose, including the captions in a story slide's code.

<p class="od-lede">At its core, the tide is a game-changer.</p>

Decision: deny. Rules: banned-phrase, ai-vocab.

BLOCKED: AI-rhetoric patterns found in prose.

stdin:1 [banned-phrase] "At its core, the tide is a game-changer." -> Banned AI-tell phrase. State the fact directly.
stdin:1 [ai-vocab] "At its core, the tide is a game-changer." -> AI-marketing vocabulary. Plain words.

Line numbers refer to the NEW text being written. Rewrite the flagged
phrasing (don't synonym-swap). A rewrite that keeps the same sentence
skeleton with new words still reads as AI; change the structure, or
just state the fact plainly. If a hit is a legitimate direct quote,
append the lint-allow marker to that exact line:
  md/vue: <!-- lint-allow: pattern-id -->
  ts: // lint-allow: pattern-id

The run that drafted the Keeling curve deck, abbreviated47 turns, 17 minutes, $2.61. 12 of 45 tool calls shown.

claude -p "make a 5-slide story deck about what the Keeling curve shows about atmospheric CO2"
Skill(building-a-deck)
Launching skill: building-a-deck
Loads the deck-building workflow that decks init installed.
Bash(cat .claude/rules/story-stage.md .claude/rules/deck-data.md .claude/rules/deck-writing.md)
Reads the stage, data and writing rules before drafting.
Bash(bunx -p slidev-addon-decks decks new keeling --story --author "Riley Hilliard")
Scaffolded decks/keeling/ and registered alias "keeling".
Scaffolds a story deck and registers it.
Bash(curl gml.noaa.gov/webdata/ccgg/trends/co2/co2_mm_mlo.csv ...)
NOAA's Mauna Loa monthly, annual and growth-rate files.
Bash(cat node_modules/slidev-addon-decks/agent/exemplars/tides/...)
Reads the story deck the package ships as an example.
Bash(curl gml.noaa.gov/education/carbon_toolkit/basics.html)
NOAA's explanation of the seasonal cycle.
Bash(cat > scripts/extract.py)
Bash(cat > record.ts)
Bash(cat > seasons.ts)
Bash(cat > decades.ts)
Bash(cat > halfway.ts)
A script that copies the CSVs into one generated file, then one data module per slide.
Bash(cat > components/RecordStage.vue)
Bash(cat > components/SeasonStage.vue)
Bash(cat > components/DecadeStage.vue)
Bash(cat > components/HalfwayStage.vue)
One stage component per story slide.
Write(decks/keeling/data-sources.md)
The fact-check input: each figure and where it came from.
Bash(bunx -p slidev-addon-decks decks check)
Bash(bunx -p slidev-addon-decks decks lint keeling)
Bash(bunx -p slidev-addon-decks decks build keeling)
All page files match their manifests.
Bash(bunx -p slidev-addon-decks decks shot keeling $n 2 --port 3030)
errors: none
Screenshots slides 2 to 5 at every click, then reads the images and fixes what they show.
Bash(bunx -p slidev-addon-decks decks check)
Bash(bunx -p slidev-addon-decks decks lint keeling)
Bash(bunx -p slidev-addon-decks decks build keeling)
Bash(bunx -p slidev-addon-decks decks fact-extract keeling)
✓ built in 840ms
Checks, lints and builds again after the fixes, then lists every figure for the fact-check.

Install it, then ask your agent for a deck.

Decks adds slide components, an agent setup and a story-deck scaffold to your project.

bun add slidev-addon-decks @slidev/cli slidev-theme-the-unnamed
bunx -p slidev-addon-decks decks init
bunx -p slidev-addon-decks decks new my-talk --story

npm i slidev-addon-decks @slidev/cli slidev-theme-the-unnamed
npx -p slidev-addon-decks decks init
npx -p slidev-addon-decks decks new my-talk --story

pnpm add slidev-addon-decks @slidev/cli slidev-theme-the-unnamed
pnpm exec decks init
pnpm exec decks new my-talk --story

Decks is free and Apache-2.0 licensed. Claude usage is billed separately.

Describe the talk: Give your coding agent the topic, audience and the story you want to tell.
Review the draft: Watch the deck locally with bunx -p slidev-addon-decks decks dev my-talk. Ask for changes to a slide or chart.
Check the sources: Run fact-checking-a-deck before presenting. Each figure stays linked to its source.

Files created by the setup Agent instructions, deck scaffold and source map

After bun add, then bunx -p slidev-addon-decks decks init and bunx -p slidev-addon-decks decks new my-talk --story

.claude/
rules/
deck-data.mdwhere each figure's source goes
deck-patterns.mdlayouts, type and chart specs
deck-writing.mdheadline, bullet and word budgets
project-glossary.mdyour terms; starts empty
prose-patterns.mdthe AI-prose patterns the hook blocks
story-stage.mdhow a story slide is written
skills/
building-a-deck/SKILL.mdscaffold, write, check, build
fact-checking-a-deck/SKILL.mdre-runs the source behind every figure
agents/deck-author.mdthe agent that builds or revises one deck
decks.jsonthe files init wrote, with their hashes
hooks/decks.shruns the package's lint and prompt hooks
settings.jsonthe two hook entries, merged into yours
decks/my-talk/
pages/
01-cover.mdthe cover
02-first.mdthe first story slide
components/FirstStage.vueits chart and captions, step by step
data-sources.mdslide-by-slide sources for the fact-check
data/first.tsits figures, each with a source comment
slides.mdheadmatter and the page list
styles/index.cssdeck-only CSS
.github/instructions/decks.instructions.md
AGENTS.mda marked Decks block with the commands
CLAUDE.mdimports AGENTS.md
decks.jsonthe deck registry
GEMINI.md

Follow the quickstart for the full setup.

Every example is a deck you can open and edit.

Pick one to load it into the player at the top of the page. Each row says how the deck was made.

Story slides and v-click How the presentation advances

Slidev's v-click shows or hides one element per click. A story slide redraws the chart from the current click count.

Going back

v-click and a chart libraryEach click toggles an element, so going back makes the chart jump to its earlier state.

Decks story slideThe chart is drawn from the click count, so going back plays the animation in reverse.

Captions

v-click and a chart libraryCaptions are separate elements that you reveal alongside the chart and keep in sync by hand.

Decks story slideThe caption is a card next to the chart, and its text changes at each step.

The next slide

v-click and a chart libraryEach slide mounts its own chart, so the next slide starts empty.

Decks story slideA chart can stay on screen from one slide into the next.

One theme.json restyles every slide.

Colors, fonts and cover branding come from one theme file. A deck's theme.json sets only the keys it lists, and the rest keep their defaults.

Default themeWith this theme.json

A slide from the tides deck, "Tides run on the Moon's clock", with the default theme

theme.json

{
  "surfaces": {
    "canvas": "#15110e",
    "canvas-cover": "#120f0c",
    "surface": "#1d1814",
    "surface-raised": "#26201b",
    "muted": "#3a3029"
  },
  "ramps": {
    "cyan": ["#2f8f83", "#3fae9f", "#62c7b8", "#9be0d4"],
    "amber": ["#c9741c", "#e8913a", "#f2b05e", "#f8cf8f"]
  }
}

This file changes the background colors and the two chart colors the slide uses. The values come from the warm palette in the template deck. Theming with theme.json

Requirements and limits

Decks runs on Slidev with shared instructions for seven agent platforms.

Agent: Claude Code, Codex, Cursor, Copilot, Gemini CLI, Windsurf or OpenCode. Shared guidance; automatic writing hooks in Claude Code.
Slides: Slidev with the slidev-theme-the-unnamed base theme. Every slide is dark; there is no light slide theme.
Runtime: Node 20.19+ or 22.12+ (Vite's minimum). Bun is optional.
Export: PDF only, through Chromium. No Keynote or PowerPoint files.
Charts: OpenChart 9.0.0-rc.2, a release candidate.

Documentation

Start a new deck Add Decks to an existing Slidev deck Write with an agent Customize the theme

Decks is free under the Apache-2.0 license.

Install Decks Read the docs