菜单
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. Use when this capability is needed.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/tomevault-io/skills-registry --skill create-slidev-presentation命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
| 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. Use when this capability is needed. |
| metadata | {"author":"b33eep"} |
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:
Source: b33eep/claude-code-setup — distributed by TomeVault.
基于 SOC 职业分类
