/create-slidev-presentation

name: create-slidev-presentation
description: Build or edit Slidev (sli.dev) presentations for tech talks, workshops, conference sessions, and live-coding demos. Use when the user asks to create slides, a deck, a presentation, a workshop deck, a conference talk, or edit an existing slides.md.
type: command
source: https://github.com/b33eep/claude-code-setup

Slidev Presentation Skill

Overview

Create and edit high-quality Slidev presentations. Slidev turns a single Markdown file into a presentation with live code, animations, diagrams, and PDF/PPTX export. It is the strongest tool available for **tech talks** because slides can show code the way code actually behaves — Monaco editors run inline, Shiki Magic-Move morphs code between states, TwoSlash surfaces TypeScript type info, and the whole deck is a git-versionable markdown file.

**Primary use cases this skill supports:**

• Conference talks (20–40 min, narrative arc, Q&A)
• Workshops and hands-on sessions (live coding, exercises, dual-pane cmd/result)
• Lightning talks (5–10 min, punchy, high animation)
• Live-coding demos embedded in any deck
• Edits to an existing Slidev project

**Runtime requirements:** Node.js ≥ 20.12.0 (Node 24 recommended; Slidev's own `create-slidev` pins `engines.node >=20.12.0`). `pnpm` is the preferred package manager (matches Slidev's official docs); `npm` and `yarn` work identically.

**Slidev version this skill targets:** v52+ (Shiki Magic-Move, TwoSlash, MDC syntax, modern Monaco API all available).

Decision Flow

Follow this order when the user asks to work with slides.

1. Is this a new deck or an existing one?

**New deck** → Go to §2 (Pick a template). **Existing deck** → Read `slides.md` first. Never rewrite; make targeted edits. Jump to §7 (Editing workflow).

2. Pick the right starting template

Ask the user (or infer from their phrasing) which of these fits best:

| User signal | Template | When | |---|---|---| | "quick slides", "simple deck", "just a few slides" | `assets/starter-deck.md` | Minimal, no opinionated structure | | "conference talk", "30 minutes", "keynote-ish" | `assets/conference-talk-deck.md` | Narrative: cover → agenda → sections → Q&A | | "workshop", "hands-on", "tutorial", "live coding heavy" | `assets/workshop-deck.md` | Mixed: explanation + dual-pane demo slots + exercise markers | | "lightning talk", "5 minute", "quick demo" | `assets/lightning-talk-deck.md` | 8–12 slides, high animation, one core idea |

If none fits cleanly, start from `starter-deck.md` and compose. **Don't invent a new structure** — copy an asset and modify.

3. Bootstrap the project

Run the following (adapt cwd):

# Create project directory and scaffold (interactive prompt accepts defaults)
pnpm create slidev my-deck
cd my-deck

Then **replace** the generated `slides.md` with the selected template from `assets/`. Keep the generated `package.json`, `netlify.toml` (if any), and `.gitignore`.

For a manual bootstrap without the interactive prompt, see `references/07-config.md` → "Minimal project scaffold".

4. Configure headmatter

Every deck has one YAML block at the top (headmatter) that configures the whole deck. Start with this **opinionated default** and add options as needed:

---
theme: seriph
title: Your Talk Title
info: |
  One-line description — shows in browser tab, PDF metadata, presenter mode.
author: Speaker Name
keywords: [tag1, tag2]
colorSchema: auto
transition: slide-left
mdc: true
lineNumbers: false
drawings:
  persist: false
fonts:
  sans: 'Geist'
  serif: 'Geist'
  mono: 'Geist Mono'
  provider: google
  weights: '400,500,600,700'
lang: en
---

**When to change what** — see `references/07-config.md` for a complete field reference.

5. Write the slide body

Open the chosen asset template and modify it. Key rules:

• **One concept per slide.** If a slide has two headings, split it.
• **6×6 rule.** Max 6 bullets, max 6 words per bullet. Anything more belongs in speaker notes.
• **Progressive disclosure.** Wrap bullet lists in `<v-clicks>` so the speaker reveals one point at a time.
• **Code blocks always get a language** (` ```ts ` not ` ``` `). Otherwise Shiki cannot highlight.
• **Speaker notes go in HTML comments at the end of each slide.** They only appear in presenter mode.

6. Choose the right feature for each idea

Use the feature that matches the intent. Don't reach for Monaco when line highlighting is enough.

| Intent | Feature | Doc | |---|---|---| | "Explain this code line by line" | Shiki line highlighting: ` ```ts {1\|3-5\|all} ` | `references/04-code-presentation.md` | | "Show code evolving between versions" | **Shiki Magic-Move** — morphs between code states | `references/04-code-presentation.md` | | "Let the audience run the code" | Monaco editor: ` ```ts {monaco-run} ` | `references/04-code-presentation.md` | | "Show TypeScript type info inline" | **TwoSlash** — type hover & errors rendered static | `references/04-code-presentation.md` | | "Reveal bullets one by one" | `<v-clicks>` wrapper | `references/03-components.md` | | "Animate an element sliding in" | `v-motion` directive | `references/03-components.md` | | "Flow diagram / sequence / architecture" | Mermaid fenced block | `references/05-diagrams-math.md` | | "Math formula" | KaTeX: `$ E = mc^2 $` inline, `$$...$$` block | `references/05-diagrams-math.md` | | "Split slide: cmd left, result right" | `layout: two-cols` (or a custom `dual-pane` layout) | `references/09-live-demo-patterns.md` |

7. Editing an existing deck

1. **Read `slides.md` in full** before any edit. Understand the headmatter, the slide count, the layouts used, the theme. 2. **Locate the target slide** by heading or content. 3. **Make the smallest possible edit** — add a slide with `---`, change a layout line, add a `<v-clicks>` wrapper. Never reformat unrelated slides. 4. If the change affects the whole deck (e.g. theme change), update only the headmatter. 5. Run `pnpm dev -