How do I install the Slidev skill?

Run npx skillmds@latest add hsiangjenli/slidev in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Slidev skill do?

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. It is listed under Web & Frontend on SkillMD.

Is Slidev safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Slidev?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Slidev free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Slidev?

hsiangjenli (@hsiangjenli) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Slidev by hsiangjenli — Agent Skill

Name: Slidev
Author: hsiangjenli

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

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.

Basic Syntax

---
theme: default
title: My Presentation
---

# First Slide

Content here

---

# Second Slide

More content

<!--
Presenter notes go here
-->

--- 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 {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

Diagrams & Math

Feature	Usage	Reference
Mermaid diagrams	```mermaid	diagram-mermaid
PlantUML diagrams	```plantuml	diagram-plantuml
LaTeX math	$inline$ or `$$block$$`	diagram-latex

Layout & Styling

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

Animation & Interaction

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

Syntax Extensions

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

Presenter & Recording

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

Export & Build

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.

Editor & Tools

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
MCP server (AI agents)	`http://localhost:<port>/__mcp` or `slidev mcp`	tool-mcp

Lifecycle & API

Feature	Usage	Reference
Slide hooks	`onSlideEnter()`, `onSlideLeave()`	api-slide-hooks
Navigation API	`$nav`, `useNav()`	core-global-context

Common Layouts

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

Resources

Documentation: https://sli.dev
Theme Gallery: https://sli.dev/resources/theme-gallery
Showcases: https://sli.dev/resources/showcases

Slidev

File contents

Slidev - Presentation Slides for Developers

When to Use

Quick Start

Basic Syntax

Core References

Feature Reference

Code & Editor

Diagrams & Math

Layout & Styling

Animation & Interaction

Syntax Extensions

Presenter & Recording

Export & Build

Editor & Tools

Lifecycle & API

Common Layouts

Resources

Frequently asked questions

Slidev

File contents

Slidev - Presentation Slides for Developers

When to Use

Quick Start

Basic Syntax

Core References

Feature Reference

Code & Editor

Diagrams & Math

Layout & Styling

Animation & Interaction

Syntax Extensions

Presenter & Recording

Export & Build

Editor & Tools

Lifecycle & API

Common Layouts

Resources

Related skills

Frequently asked questions

How do I install the Slidev skill?

What does the Slidev skill do?

Is Slidev safe to use?

Which AI agents work with Slidev?

Is Slidev free to use?

Who published Slidev?