Help us improve
Share bugs, ideas, or general feedback.
From slidev
Create and present web-based slidedecks using Slidev with Markdown, Vue components, code highlighting, animations, interactive demos, LaTeX, and Mermaid for technical presentations, conference talks, code walkthroughs, and teaching materials.
npx claudepluginhub slidevjs/slidev --plugin slidevHow this skill is triggered — by the user, by Claude, or both
Slash command
/slidev:slidevThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Web-based slides maker built on Vite, Vue, and Markdown.
README.mdreferences/animation-click-marker.mdreferences/animation-drawing.mdreferences/animation-rough-marker.mdreferences/api-slide-hooks.mdreferences/build-og-image.mdreferences/build-pdf.mdreferences/build-remote-assets.mdreferences/build-seo-meta.mdreferences/code-groups.mdreferences/code-import-snippet.mdreferences/code-line-highlighting.mdreferences/code-line-numbers.mdreferences/code-magic-move.mdreferences/code-max-height.mdreferences/code-twoslash.mdreferences/core-animations.mdreferences/core-cli.mdreferences/core-components.mdreferences/core-exporting.mdProvides Slidev overview, routes to focused skills for content strategy, styles, interactive demos, syntax, code blocks, exports, troubleshooting, and agents for end-to-end presentation pipelines. Use for project setup and workflows.
Guides Slidev setup, presentation planning, content strategy, brand extraction, interactive demos, syntax, code blocks, exports, and troubleshooting via skills and agents.
Scaffolds Slidev presentation decks with slides.md, package.json, Makefile, and public/ folder. Generates concise markdown slides from project docs or prompts.
Share bugs, ideas, or general feedback.
Web-based slides maker built on Vite, Vue, and Markdown.
pnpm create slidev # Create project
pnpm run dev # Start dev server (opens http://localhost:3030)
pnpm run build # Build static SPA
pnpm run export # Export to PDF (requires playwright-chromium)
Verify: After pnpm run dev, confirm slides load at http://localhost:3030. After pnpm run export, check the output PDF exists in the project root.
---
theme: default
title: My Presentation
---
# First Slide
Content here
---
# Second Slide
More content
<!--
Presenter notes go here
-->
--- separates slides| Topic | Description | Reference |
|---|---|---|
| Markdown Syntax | Slide separators, frontmatter, notes, code blocks | core-syntax |
| Animations | v-click, v-clicks, motion, transitions | core-animations |
| Headmatter | Deck-wide configuration options | core-headmatter |
| Frontmatter | Per-slide configuration options | core-frontmatter |
| CLI Commands | Dev, build, export, theme commands | core-cli |
| Components | Built-in Vue components | core-components |
| Layouts | Built-in slide layouts | core-layouts |
| Exporting | PDF, PPTX, PNG export options | core-exporting |
| Hosting | Build and deploy to various platforms | core-hosting |
| Global Context | $nav, $slidev, composables API | core-global-context |
| Feature | Usage | Reference |
|---|---|---|
| Line highlighting | ```ts {2,3} | code-line-highlighting |
| Click-based highlighting | ```ts {1|2-3|all} | code-line-highlighting |
| Line numbers | lineNumbers: true or {lines:true} | code-line-numbers |
| Scrollable code | {maxHeight:'100px'} | code-max-height |
| Code tabs | ::code-group (requires comark: true) | code-groups |
| Monaco editor | ```ts {monaco} | editor-monaco |
| Run code | ```ts {monaco-run} | editor-monaco-run |
| Edit files | <<< ./file.ts {monaco-write} | editor-monaco-write |
| Code animations | ````md magic-move | code-magic-move |
| TypeScript types | ```ts twoslash | code-twoslash |
| Import code | <<< @/snippets/file.js | code-import-snippet |
| Feature | Usage | Reference |
|---|---|---|
| Mermaid diagrams | ```mermaid | diagram-mermaid |
| PlantUML diagrams | ```plantuml | diagram-plantuml |
| LaTeX math | $inline$ or $$block$$ | diagram-latex |
| Feature | Usage | Reference |
|---|---|---|
| Canvas size | canvasWidth, aspectRatio | layout-canvas-size |
| Zoom slide | zoom: 0.8 | layout-zoom |
| Scale elements | <Transform :scale="0.5"> | layout-transform |
| Layout slots | ::right::, ::default:: | layout-slots |
| Scoped CSS | <style> in slide | style-scoped |
| Global layers | global-top.vue, global-bottom.vue | layout-global-layers |
| Draggable elements | v-drag, <v-drag> | layout-draggable |
| Icons | <mdi-icon-name /> | style-icons |
| Feature | Usage | Reference |
|---|---|---|
| Click animations | v-click, <v-clicks> | core-animations |
| Rough markers | v-mark.underline, v-mark.circle | animation-rough-marker |
| Drawing mode | Press C or config drawings: | animation-drawing |
| Direction styles | forward:delay-300 | style-direction |
| Note highlighting | [click] in notes | animation-click-marker |
| Feature | Usage | Reference |
|---|---|---|
| Comark syntax | comark: true + {style="color:red"} | syntax-comark |
| Block frontmatter | ```yaml instead of --- | syntax-block-frontmatter |
| Import slides | src: ./other.md | syntax-importing-slides |
| Merge frontmatter | Main entry wins | syntax-frontmatter-merging |
| Feature | Usage | Reference |
|---|---|---|
| Recording | Press G for camera | presenter-recording |
| Timer | duration: 30min, timer: countdown | presenter-timer |
| Remote control | slidev --remote | presenter-remote |
| Ruby text | notesAutoRuby: | presenter-notes-ruby |
| Feature | Usage | Reference |
|---|---|---|
| Export options | slidev export | core-exporting |
| Build & deploy | slidev build | core-hosting |
| Build with PDF | download: true | build-pdf |
| Cache images | Automatic for remote URLs | build-remote-assets |
| OG image | seoMeta.ogImage or og-image.png | build-og-image |
| SEO tags | seoMeta: | build-seo-meta |
Export prerequisite: pnpm add -D playwright-chromium is required for PDF/PPTX/PNG export. If export fails with a browser error, install this dependency first.
| Feature | Usage | Reference |
|---|---|---|
| Side editor | Click edit icon | editor-side |
| VS Code extension | Install antfu.slidev | editor-vscode |
| Prettier | prettier-plugin-slidev | editor-prettier |
| Eject theme | slidev theme eject | tool-eject-theme |
| Feature | Usage | Reference |
|---|---|---|
| Slide hooks | onSlideEnter(), onSlideLeave() | api-slide-hooks |
| Navigation API | $nav, useNav() | core-global-context |
| Layout | Purpose |
|---|---|
cover | Title/cover slide |
center | Centered content |
default | Standard slide |
two-cols | Two columns (use ::right::) |
two-cols-header | Header + two columns |
image / image-left / image-right | Image layouts |
iframe / iframe-left / iframe-right | Embed URLs |
quote | Quotation |
section | Section divider |
fact / statement | Data/statement display |
intro / end | Intro/end slides |