slidev

slidevjs/slidev · Agent Skill

Create developer slide decks with Slidev using Markdown, Vue components, code highlighting, and animations.

Overview

Publisher	slidevjsOrganization
Repository	slidevjs/slidev ↗
Skill folder	`slidev`
Stars	49,230
Forks	2,248
Bundled files	55
License	MIT
Last updated	October 23, 2026
Links	Skill source ↗ · Repository ↗

Mozgi check

What we found in the skill files. Details come with a subscription.

Security

low risk · no obvious risks found — the full report shows the details

Compatibility

instructions only — works with most agents

Similar skills

72 similar skills found

Also with subscription

Installation

A skill is a folder with a SKILL.md file. Pick your agent and run the commands in a terminal (macOS, Linux or Git Bash on Windows) from your project root.

Copy the prompt into Claude, Codex or another assistant: it will review the skill and install it for you.

Install the “slidev” skill from mozgi.io (https://mozgi.io/skills/antfu-slidev/) for me.

1. Download the archive: https://mozgi.io/skills/antfu-slidev/download
   If it fails, take the skill folder from the source: https://github.com/slidevjs/slidev/tree/main/skills/slidev
2. Read SKILL.md and the other files. Check the skill is safe: no hidden commands, no sending data elsewhere, no scripts doing something other than described. If anything looks suspicious, stop and tell me.
3. Put the “slidev” folder into your agent's skills folder: .claude/skills/ for Claude Code, .agents/skills/ for Codex, .cursor/skills/ for Cursor, .gemini/skills/ for Gemini CLI. Inside the project if we are in one, otherwise in the home folder (~/.claude/skills/ etc.).
4. Make sure <skills folder>/slidev/SKILL.md exists.
5. Briefly tell me what this skill does and offer to try it on my task.

If you cannot do a step yourself, tell me what to click or type.

git clone --depth 1 --branch main https://github.com/slidevjs/slidev.git /tmp/slidev
mkdir -p .claude/skills
cp -r /tmp/slidev/skills/slidev .claude/skills/slidev

Restart Claude Code — the skill appears in the list; call it manually with /slidev. For all projects use ~/.claude/skills.

git clone --depth 1 --branch main https://github.com/slidevjs/slidev.git /tmp/slidev
mkdir -p .agents/skills
cp -r /tmp/slidev/skills/slidev .agents/skills/slidev

Codex looks for skills in .agents/skills from the current folder up to the repo root; call one with /skills or $slidev. For all projects use ~/.agents/skills.

git clone --depth 1 --branch main https://github.com/slidevjs/slidev.git /tmp/slidev
mkdir -p .cursor/skills
cp -r /tmp/slidev/skills/slidev .cursor/skills/slidev

Cursor picks the skill up on start; call it with “/” in Agent chat. Cursor also reads .claude/skills and .agents/skills. For all projects use ~/.cursor/skills.

git clone --depth 1 --branch main https://github.com/slidevjs/slidev.git /tmp/slidev
mkdir -p .gemini/skills
cp -r /tmp/slidev/skills/slidev .gemini/skills/slidev

Gemini CLI offers to activate the skill when a task matches — you approve it. For all projects use ~/.gemini/skills.

Review the source files

55 files Download Zip

Read SKILL.md and any companion files before deciding whether to install. Click a file to preview it.

SKILL.md contents

Original author text · read-only

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

Frequently asked questions

What does the slidev skill do?

Create developer slide decks with Slidev using Markdown, Vue components, code highlighting, and animations.

How do I install slidev?

Open the “Installation” block on this page and pick your agent — Claude Code, Codex, Cursor or Gemini CLI — for ready-made commands that copy the skill folder to the right place. Or copy the prompt from the “Via assistant” tab and let the assistant review and install the skill.

Which AI models work with slidev?

Skills are plain Markdown instructions (the Agent Skills format), so slidev works with any agent that reads SKILL.md: Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and more. The model loads the instructions only when a task matches the skill's description.

Is slidev free?

The skill is published openly by slidevjs under the MIT license. The skill itself costs nothing — you only pay your AI provider for the tokens you use.

Is it safe to install skills?

A skill is a set of instructions your agent will follow, so read SKILL.md and its companion files before installing. Scripts in the skill folder only run if your agent runs them — keep an eye on what it does and do not grant unnecessary permissions.

How is a skill different from an MCP server or a plugin?

An MCP server or plugin gives the model new tools — code that runs and returns a result. A skill gives it knowledge and process: how to approach a task, which steps to follow and what good output looks like. It needs no server or API key.

Related skills

All skills →

remotion-video-creation Provides 29 rules for creating videos in React using Remotion, covering 3D, animation, audio, and captions. affaan-m258k

videodb Processes video and audio: ingests, indexes, searches, edits, transcodes, generates media, and creates alerts. affaan-m258k

ui-demo Creates professional UI demo videos for web applications using Playwright, including cursor and natural pacing. affaan-m258k

taste Creates a creative direction for music videos and short-form edits in angelcore, cloud-trance, hyperpop styles, synchronizing visuals with music. affaan-m258k

fal-ai-media Generates images, videos, and audio using fal.ai models, including text-to-image, text-to-video, and text-to-speech. affaan-m258k

tasteforge-video Creates and manages workflows for video, images, and 3D assets, including style analysis, validation, and timeline export. affaan-m258k