Agent skill · creative production · aiskillstore
slidev
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.
Why this skill is useful
Provides specific commands and configurations for creating interactive technical presentations that the AI wouldn't reliably generate on its own.
What it needs
Requires pnpm installed locally. About 4k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Slidev - Presentation Slides for Developers Web-based slides maker built on Vite, Vue, and Markdown. When to Use Technical presentations or slidedecks with live code examples Syntax-highlighted code snippets with animations Interactive demos (Monaco editor, runnable code) Mathematical equations (LaTeX) or diagrams (Mermaid, PlantUML) Record presentations with presenter notes Export to PDF, PPTX, or host as SPA Code walkthroughs for developer talks or workshops Quick Start 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. Basic Syntax --- separates slides First frontmatter = headmatter (deck config) HTML comments = presenter notes Core References 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 Reference Code & Editor Feature Usage Reference --------- ------- ----------- Line 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-run} editor-monaco-run Edit files <<< ./file.ts {monaco-write} editor-monaco-write Code animations ts twoslash code-twoslash Import code <<< @/snippets/file.js code-import-snippet Diagrams & Math Feature Usage Reference --------- ------- --------- …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/slidev