This skill should be used when asked to create or edit Slidev (sli.dev) presentation slide decks.
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:
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).
Follow this order when the user asks to work with slides.
New deck → Go to §2 (Pick a template).
Existing deck → Read slides.md first. Never rewrite; make targeted edits. Jump to §7 (Editing workflow).
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.
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".
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.
Open the chosen asset template and modify it. Key rules:
<v-clicks> so the speaker reveals one point at a time.```ts not ```). Otherwise Shiki cannot highlight.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 |
slides.md in full before any edit. Understand the headmatter, the slide count, the layouts used, the theme.---, change a layout line, add a <v-clicks> wrapper. Never reformat unrelated slides.pnpm dev --open in the deck directory; the user verifies in the browser.Ask the user what they need:
pnpm export — requires playwright-chromium as dev dep.pnpm build produces dist/.references/08-export-deploy.md for ready CI snippets.Before reporting a deck done, run through references/11-quality-checklist.md. Covers content, frontmatter, speaker notes, runtime checks, and accessibility.
TODO: markers.``` code ``` → always specify the language.references/.When details are needed beyond this file, read the specific reference, don't guess. Each references/ file is self-contained.
Internal (bundled, read on demand):
references/01-syntax.md — markdown conventions, headmatter, slide separators, notes, importsreferences/02-layouts.md — all built-in layouts with side-by-side comparisonreferences/03-components.md — v-click, v-motion, Toc, Link, icons, Youtube, Tweetreferences/04-code-presentation.md — Shiki, Magic-Move, TwoSlash, Monaco, code groupsreferences/05-diagrams-math.md — Mermaid, PlantUML, KaTeX, chemistryreferences/06-themes-styling.md — theme gallery, colorSchema, fonts, UnoCSS, scoped CSSreferences/07-config.md — complete headmatter schema + slidev.config.tsreferences/08-export-deploy.md — PDF, PPTX, static, GitHub Pages, Vercel, Netlify, CIreferences/09-live-demo-patterns.md — dual-pane layouts, demo choreography, fallback slidesreferences/10-troubleshooting.md — cache, Monaco, Playwright export, common errorsreferences/11-quality-checklist.md — pre-ship checks for content, frontmatter, speaker notes, runtime, accessibilityAsset templates (bundled, copy-then-modify):
assets/starter-deck.md — minimal deckassets/conference-talk-deck.md — 20–40 min narrative structureassets/workshop-deck.md — hands-on, dual-pane demo slotsassets/lightning-talk-deck.md — 5–10 min, punchyassets/package-json-template.json — reproducible Slidev + Playwright pinningOfficial:
npx skills add b33eep/create-slidev-presentation下载完整 Skill 目录，包含 SKILL.md 及所有相关文件
Search for places (restaurants, cafes, etc.) via Google Places API proxy on localhost.
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Start voice calls via the OpenClaw voice-call plugin.
Notion API for creating and managing pages, databases, and blocks.
Gemini CLI for one-shot Q&A, summaries, and generation.
Category:developer