Setting the skill. One moment.
Skills
Skill 7 of 19
Create and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features.
2 minutes · 346 words · 17 sections
Install
npx skills add antfu/skills --skill slidevnpx skills add antfu/skillsThe first command installs just this skill, by the name in its SKILL.md; the second installs the whole repository.
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 (opens in a new tab) |
| Animations | v-click, v-clicks, motion, transitions | core-animations (opens in a new tab) |
| Headmatter | Deck-wide configuration options | core-headmatter (opens in a new tab) |
| Frontmatter | Per-slide configuration options | core-frontmatter (opens in a new tab) |
| CLI Commands | Dev, build, export, theme commands | core-cli (opens in a new tab) |
| Components | Built-in Vue components | core-components (opens in a new tab) |
| Layouts | Built-in slide layouts | core-layouts (opens in a new tab) |
| Exporting | PDF, PPTX, PNG export options | core-exporting (opens in a new tab) |
| Hosting | Build and deploy to various platforms | core-hosting (opens in a new tab) |
| Global Context | $nav, $slidev, composables API | core-global-context (opens in a new tab) |
| Feature | Usage | Reference |
|---|---|---|
| Line highlighting | ```ts {2,3} | code-line-highlighting (opens in a new tab) |
| Click-based highlighting | ```ts {1|2-3|all} | code-line-highlighting (opens in a new tab) |
| Line numbers | lineNumbers: true or {lines:true} | code-line-numbers (opens in a new tab) |
| Scrollable code | {maxHeight:'100px'} | code-max-height (opens in a new tab) |
| Code tabs | ::code-group (requires comark: true) | code-groups (opens in a new tab) |
| Monaco editor | ```ts {monaco} | editor-monaco (opens in a new tab) |
| Run code | ```ts {monaco-run} | editor-monaco-run (opens in a new tab) |
| Edit files | <<< ./file.ts {monaco-write} | editor-monaco-write (opens in a new tab) |
| Code animations | ````md magic-move | code-magic-move (opens in a new tab) |
| TypeScript types | ```ts twoslash | code-twoslash (opens in a new tab) |
| Import code | <<< @/snippets/file.js | code-import-snippet (opens in a new tab) |
| Feature | Usage | Reference |
|---|---|---|
| Mermaid diagrams | ```mermaid | diagram-mermaid (opens in a new tab) |
| PlantUML diagrams | ```plantuml | diagram-plantuml (opens in a new tab) |
| LaTeX math | $inline$ or $$block$$ | diagram-latex (opens in a new tab) |
| Feature | Usage | Reference |
|---|---|---|
| Canvas size | canvasWidth, aspectRatio | layout-canvas-size (opens in a new tab) |
| Zoom slide | zoom: 0.8 | layout-zoom (opens in a new tab) |
| Scale elements | <Transform :scale="0.5"> | layout-transform (opens in a new tab) |
| Layout slots | ::right::, ::default:: | layout-slots (opens in a new tab) |
| Scoped CSS | <style> in slide | style-scoped (opens in a new tab) |
| Global layers | global-top.vue, global-bottom.vue | layout-global-layers (opens in a new tab) |
| Draggable elements | v-drag, <v-drag> | layout-draggable (opens in a new tab) |
| Icons | <mdi-icon-name /> | style-icons (opens in a new tab) |
| Feature | Usage | Reference |
|---|---|---|
| Click animations | v-click, <v-clicks> | core-animations (opens in a new tab) |
| Rough markers | v-mark.underline, v-mark.circle | animation-rough-marker (opens in a new tab) |
| Drawing mode | Press C or config drawings: | animation-drawing (opens in a new tab) |
| Direction styles | forward:delay-300 | style-direction (opens in a new tab) |
| Note highlighting | [click] in notes | animation-click-marker (opens in a new tab) |
| Feature | Usage | Reference |
|---|---|---|
| Comark syntax | comark: true + {style="color:red"} | syntax-comark (opens in a new tab) |
| Block frontmatter | ```yaml instead of --- | syntax-block-frontmatter (opens in a new tab) |
| Import slides | src: ./other.md | syntax-importing-slides (opens in a new tab) |
| Merge frontmatter | Main entry wins | syntax-frontmatter-merging (opens in a new tab) |
| Feature | Usage | Reference |
|---|---|---|
| Recording | Press G for camera | presenter-recording (opens in a new tab) |
| Timer | duration: 30min, timer: countdown | presenter-timer (opens in a new tab) |
| Remote control | slidev --remote | presenter-remote (opens in a new tab) |
| Ruby text | notesAutoRuby: | presenter-notes-ruby (opens in a new tab) |
| Feature | Usage | Reference |
|---|---|---|
| Export options | slidev export | core-exporting (opens in a new tab) |
| Build & deploy | slidev build | core-hosting (opens in a new tab) |
| Build with PDF | download: true | build-pdf (opens in a new tab) |
| Cache images | Automatic for remote URLs | build-remote-assets (opens in a new tab) |
| OG image | seoMeta.ogImage or og-image.png | build-og-image (opens in a new tab) |
| SEO tags | seoMeta: | build-seo-meta (opens in a new tab) |
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 (opens in a new tab) |
| VS Code extension | Install antfu.slidev | editor-vscode (opens in a new tab) |
| Prettier | prettier-plugin-slidev | editor-prettier (opens in a new tab) |
| Eject theme | slidev theme eject | tool-eject-theme (opens in a new tab) |
| Feature | Usage | Reference |
|---|---|---|
| Slide hooks | onSlideEnter(), onSlideLeave() | api-slide-hooks (opens in a new tab) |
| Navigation API | $nav, useNav() | core-global-context (opens in a new tab) |
| 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 |
Create and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, code walkthroughs, teaching materials, or developer decks.
The verbatim description from this skill’s front matter — the string an agent matches on to decide whether to load it.
main, last pushed 23 June 2026.SKILL.md, not by matching a directory convention. One layout observed: skills/*/SKILL.md.h1 and no skipped levels:/antfu/skills.md, and each skill at its own .md URL.55 files · 57 KB
Everything this skill ships beside its prose. All of it is set here, as subchapters of skill 7.
Documentation the agent loads on demand, rather than up front.
Everything else published alongside the skill.