slidevby Slidev

Slidev Skill.

A Claude Code and Codex skill for PPT and slide decks: developer slide decks with Markdown, Vue components, code highlighting, and animation.

Presentations
HTML slides

Download OpenDesign View usage guide

slidevjs/slidev · skills/slidev/SKILL.mdSKILL.md

--- name: slidev description: 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. --- ## When to Use ## Quick Start ## Basic Syntax ## Common Layouts

Front matter and section headings read from the upstream file on 2026-09-14 · 8,896 characters in full

01 What it does

What the slidev Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

Slidev is a web-based slides maker for developers built on Vite, Vue, and Markdown. It creates technical presentations with syntax-highlighted code snippets, live code examples using Monaco editor, interactive demos, LaTeX equations, and Mermaid or PlantUML diagrams. Slides are written in Markdown with --- separators, first frontmatter as headmatter for deck config, and HTML comments for presenter notes.

It supports click-based animations (v-click, magic-move), line highlighting, code tabs, recording with camera, remote control, and timer. Export to PDF or PPTX requires playwright-chromium. Build commands include pnpm run dev for local preview at localhost:3030, pnpm run export for PDF, and pnpm run build for static SPA deployment.

What it produces

PDF export of the presentation

See the example prompt ↗

How It Works

01
Initialize Project
Run pnpm create slidev to scaffold a new Slidev presentation project.
02
Write Slides in Markdown
Separate slides with ---, configure deck settings in first frontmatter block, and add presenter notes in HTML comments.
03
Start Development Server
Run pnpm run dev to launch the local server and open the presentation at http://localhost:3030.
04
Export or Build
Use pnpm run export for PDF output or pnpm run build to create a static SPA for hosting.

02 Find your fit

When to Use the slidev Skill

Use the slidev skill in Claude Code or Codex when the job is PPT and slide decks of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

Technical presentations or slidedecks with live code examples
Syntax-highlighted code snippets with animations
Interactive demos using Monaco editor or runnable code
Mathematical equations with LaTeX or diagrams with Mermaid and PlantUML
Code walkthroughs for developer talks or workshops

Know the Boundaries

Needs SlidevThe SKILL.md names this dependency; the skill does not work without it in your project.

What to Provide

Code snippetsExternal code files imported with <<< @/snippets/file.js syntax for display in slides.

03 Inside the skill

Rules the slidev Skill Gives Claude Code and Codex

5 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

Headmatter Is First Frontmatter
The first frontmatter block in the file configures deck-wide settings, not individual slide settings.
Presenter Notes in HTML Comments
Write presenter notes inside HTML comment blocks within each slide. They won't appear on the slide itself.
playwright-chromium Required for Export
Install pnpm add -D playwright-chromium before running export commands. If export fails with a browser error, this dependency is missing.
Main Entry Wins in Merging
When importing slides with src, frontmatter from the main entry file takes precedence over imported file frontmatter.
Comark Enables Advanced Syntax
Set comark: true in headmatter to enable code groups and inline style attributes like {style="color:red"}.

04 Put it to work

Install slidev in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add slidev to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

npx skills add https://github.com/slidevjs/slidev --skill slidev

Generic skills CLI form for skills/slidev/SKILL.md; the repository may document its own path.

Give the Skill a First PPT and Slide Decks Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt

Create a technical presentation for a React workshop with three sections: component lifecycle, hooks deep-dive, and performance optimization. Include live Monaco editor demos showing useState and useEffect patterns, syntax-highlighted TypeScript code with click-based line reveals for the reconciliation algorithm explanation, a Mermaid diagram of the component tree, and a two-column layout comparing class components and functional components. Add presenter notes with timing estimates for each section and configure a 45-minute countdown timer.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

After running pnpm run dev, confirm slides load at http://localhost:3030
After running pnpm run export, verify the output PDF exists in the project root directory
If export fails with a browser error, install playwright-chromium dependency first
Test click-based animations by advancing through slides to ensure v-click elements appear in sequence

In OpenDesign import slidev from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: Slidev
Repository: github.com/slidevjs/slidev Branch main
Skill file: skills/slidev/SKILL.md Content checksum recorded at verification; commit a8d8ff7
License: MIT From LICENSE.
Repository stars: 48,658 GitHub snapshot taken 2026-09-14 for the whole slidevjs/slidev repository. Not a rating or usage count for slidev.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

When to UseLists use cases: technical presentations, code snippets, interactive demos, equations, diagrams, recording, export formats
Quick StartCommands to create project, start dev server, build SPA, and export to PDF
Basic SyntaxSlide separator, headmatter configuration, presenter notes in HTML comments
Core ReferencesTable of core topics: syntax, animations, frontmatter, CLI, components, layouts, exporting, hosting, global context
Feature ReferenceComprehensive tables covering code highlighting, Monaco editor, diagrams, math, layouts, styling, animations, syntax extensions, presenter tools, export options
Common LayoutsBuilt-in layouts: cover, center, two-cols, image variants, iframe variants, quote, section, fact, intro, end
ResourcesLinks to documentation, theme gallery, and showcases

The Skill's Own Description

“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.”

Front-matter description from SKILL.md. The full file is about 8,896 characters. Read the full file on GitHub.

Slidev

Run slidev on a Real PPT and Slide Decks Task.

Download OpenDesign, import slidev from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills