Slidev Presentations

Build production-grade Slidev presentations for tech talks, workshops, conference sessions, and live-coding demos. The skill wraps Slidev v52+ with opinionated templates and deep coverage of the features that make a coding presentation memorable — live editors, code-morph animations, type-aware static rendering, and dual-pane demo layouts.

Metadata

Field	Value
Type	command
Invoked by	Asking to create slides, a deck, a presentation, a workshop deck, a conference talk, or edit an existing `slides.md`
Slidev version	v52+ (targets v52.14.2)
Node.js	`>= 20.12.0` (Node 24 recommended)
Package manager	`pnpm` (Slidev’s official recommendation; `npm` / `yarn` work too)

Included files

Path	Description
`assets/`	Templates and reusable content
`references/`	Reference documentation for Claude

Usage

Ask Claude to build a deck — phrase by format:

Create a conference talk about microservices (30 minutes, 30 slides)

Build a workshop deck for a hands-on Git session with dual-pane demos

Make a 5-minute lightning talk about a bug I just found

Or ask to modify an existing one:

Add a section on error handling to slides.md, after the existing "Request flow" section

What the skill gives you

Four ready-to-copy deck templates

Template	Use when
`starter-deck.md`	Simple deck, no opinionated structure
`conference-talk-deck.md`	20–40 min narrative arc with Q&A close
`workshop-deck.md`	Hands-on, dual-pane demo slots, exercise markers
`lightning-talk-deck.md`	5–10 min, punchy, high animation

Plus a reproducible package.json template pinning Slidev, Playwright (for PDF export), and icon collections.

Ten reference files loaded on demand

Reference	Covers
`01-syntax.md`	Slide separator, headmatter, speaker notes, external imports
`02-layouts.md`	All 17 built-in layouts + custom `.vue` layouts
`03-components.md`	`<v-clicks>`, `v-motion`, `<Link>`, `<Toc>`, icon sets
`04-code-presentation.md`	Shiki, Magic-Move, TwoSlash, Monaco, code groups
`05-diagrams-math.md`	Mermaid, PlantUML, KaTeX, chemistry
`06-themes-styling.md`	Theme gallery, fonts (Geist default), UnoCSS, projector legibility
`07-config.md`	Full headmatter schema, `slidev.config.ts`, project structure
`08-export-deploy.md`	PDF / PPTX / PNG export, GitHub Pages, Vercel, Netlify, accessibility
`09-live-demo-patterns.md`	Dual-pane choreography, demo fallback slides, audience interaction
`10-troubleshooting.md`	Cache, Monaco, Playwright, Mermaid, fonts
`11-quality-checklist.md`	Pre-ship checks: content, frontmatter, notes, runtime, a11y

Features worth knowing about

Shiki Magic-Move — code that morphs

Show code evolving between versions. Tokens morph in place between steps:

````md magic-move
```ts
function greet(name) {
  return 'Hello, ' + name
}
```
 
```ts
const greet = (name: string): string => `Hello, ${name}`
```


Better than "here's the before, here's the after" slides — the transformation itself is the explanation.

### TwoSlash — types rendered inline

Type info baked in at build time. Works in static builds and PDF exports:

````markdown
```ts twoslash
const user = { name: 'Alice', age: 30 }
//    ^?
```

The ^? marker renders user ‘s inferred type directly on the slide. Built into Slidev since v0.46 — no install needed, just TypeScript + a tsconfig.json in the project.

Monaco — live editable code

For audience interaction — the code block becomes a runnable editor:

```ts {monaco-run}
function fib(n: number): number {
  return n < 2 ? n : fib(n - 1) + fib(n - 2)
}
console.log(fib(10))
```

Dual-pane for live demos

Left pane: terminal / commands. Right pane: resulting state (a diagram, a Mermaid gitGraph, a screenshot). Perfect for git tutorials, CLI demos, architecture walkthroughs. A full dual-pane.vue layout template ships with the skill.

Default font pair — Geist

The skill ships with Geist Sans + Geist Mono as defaults. Modern 2024+ aesthetic, on Google Fonts, with fallbacks: true so first-run without network still renders cleanly. Alternative pairs documented for corporate, academic, and dark-only contexts.

Getting started

# Skill scaffolds this for you when invoked
pnpm create slidev my-deck
cd my-deck
 
# Replace slides.md with a template from the skill
# then:
pnpm dev --open

Preview at http://localhost:3030. Presenter mode at /presenter/.

Export options

pnpm export                     # PDF
pnpm export --with-clicks       # one page per click animation
pnpm export --format pptx       # PowerPoint
pnpm export --format png        # one PNG per slide
pnpm build                      # static site → dist/

PDF export requires playwright-chromium:

pnpm add -D playwright-chromium
pnpm exec playwright install chromium

Attribution

Based on Slidev by Anthony Fu.

Overview Skill Creator