Official agent skill

Slidev

Create and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features.

OfficialMITAuto-check passedDocuments & Office

Install Slidev

skills CLI

$ npx skills add JetBrains/skills --skill slidev -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install JetBrains/skills slidev --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/JetBrains/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/slidev .claude/skills/slidev && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "slidev" agent skill from https://github.com/JetBrains/skills/tree/main/slidev into .claude/skills/slidev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "slidev", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/JetBrains/skills/tree/main/slidev

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add JetBrains/skills --skill slidev -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install JetBrains/skills slidev --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/JetBrains/skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/slidev .agents/skills/slidev && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "slidev" agent skill from https://github.com/JetBrains/skills/tree/main/slidev into .agents/skills/slidev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "slidev", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add JetBrains/skills --skill slidev -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install JetBrains/skills slidev --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/JetBrains/skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/slidev .cursor/skills/slidev && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "slidev" agent skill from https://github.com/JetBrains/skills/tree/main/slidev into .cursor/skills/slidev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "slidev", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/JetBrains/skills.git --path slidev

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add JetBrains/skills --skill slidev -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install JetBrains/skills slidev --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/JetBrains/skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/slidev .gemini/skills/slidev && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "slidev" agent skill from https://github.com/JetBrains/skills/tree/main/slidev into .gemini/skills/slidev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "slidev", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install JetBrains/skills slidev

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add JetBrains/skills --skill slidev -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/JetBrains/skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/slidev .github/skills/slidev && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "slidev" agent skill from https://github.com/JetBrains/skills/tree/main/slidev into .github/skills/slidev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "slidev", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add JetBrains/skills --skill slidev -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install JetBrains/skills slidev --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/JetBrains/skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/slidev .opencode/skills/slidev && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "slidev" agent skill from https://github.com/JetBrains/skills/tree/main/slidev into .opencode/skills/slidev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "slidev", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: slidev
GitHub stars: 364
Used in: 3 other repos
Token cost: ~2.2k tokens
SKILL.md length: 539 words
Files: 56 (incl. references)
Skills in repo: 77
Repo updated: Jun 29, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Create and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features.

Building technical presentations
SKILL.md covers When to Use, Quick Start, Basic Syntax and Core References, plus 3 more sections
Calls pnpm
Conference talks

What it does

Slidev is an agent skill from JetBrains/skills, published by the product's own GitHub organization. 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.

Its SKILL.md is about 2.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 56 other files, including reference files (for example `LICENSE.md`, `README.md` and `SYNC.md`).

It sits in Documents & Office, covering Slides and decks. It works with Vue.js. The repository describes itself as: Curated agent skills collection verified by JetBrains. The licence is MIT.

When your agent uses it

Building technical presentations
Conference talks
Code walkthroughs
Teaching materials

Example prompts

“/slidev”

What it can do on your machine

Read from SKILL.md and the folder at commit e0f258b. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
- pnpm
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
- sli.dev
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Slidev loads about 2.2k tokens when it runs, and up to ~16k if it reads all its reference files. Until then it costs about 71 tokens; SKILL.md has 539 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~71
When it runs · the whole SKILL.md, loaded when a task matches: ~2.2k
With references · SKILL.md plus every file in references/, read only if the agent opens them: ~16k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from JetBrains/skills at commit e0f258b, republished under its MIT licence (© JetBrains). 539 words, ~2,236 tokens.

Download SKILL.mdSave it as .claude/skills/slidev/SKILL.md (or your agent's skills folder). This skill also uses 55 other files; get the full folder from GitHub.

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.
metadata.short-description: Build developer slide decks with Slidev
metadata.author: Anthony Fu
metadata.source: https://github.com/antfu/skills/tree/main/skills/slidev

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

bash

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

Show full SKILL.md (208 more words)Show less

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

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

Files

SKILL.md and 55 other files (references) in slidev of JetBrains/skills.

SKILL.md
LICENSE.md
README.md
SYNC.md
references/animation-click-marker.md
references/animation-drawing.md
references/animation-rough-marker.md
references/api-slide-hooks.md
references/build-og-image.md
references/build-pdf.md
references/build-remote-assets.md
references/build-seo-meta.md
references/code-groups.md
references/code-import-snippet.md
references/code-line-highlighting.md
references/code-line-numbers.md
references/code-magic-move.md
references/code-max-height.md
references/code-twoslash.md
references/core-animations.md
… and 36 more

Open the folder on GitHubat commit e0f258b

Used in 3 other repositories

We found 3 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 3 other GitHub owners. This page covers the copy in JetBrains/skills, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Slidev next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Slidev compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Slidev this skillJetBrains/skills	364	3 repos	~2.2k	Automated safety check: Pass	MIT	3 mo ago
Creating Slidev Presentationsmcpc-tech/mcpc	103	—	~4.6k	Automated safety check: Pass	MIT	2 days ago
Slidev CLI Skilldskilld-dev/vue-ecosystem-skills	181	—	~1.1k	Automated safety check: Pass	MIT	16 days ago
SlidevNeverSight/learn-skills.dev	216	1 repos	~2.1k	Automated safety check: Pass	None	yesterday
PPTXrvdbreemen/OTGW-firmware	207	35 repos	~2.3k	Automated safety check: Pass	Proprietary	2 days ago
Open Kimi Pptjinwyp/open-ppt-skill	157	2 repos	~5.1k	Automated safety check: Pass	MIT	2 mo ago

Similar skills

Creating Slidev Presentations
mcpc-tech/mcpc
Creates presentation slides using Slidev with Markdown syntax.
103 GitHub stars~4.6k tokensUpdated 2 days ago
Documents & OfficeAuto-check passed
Slidev CLI Skilld
skilld-dev/vue-ecosystem-skills
Build, present, and ship Slidev decks with @slidev/cli. An agent skill from skilld-dev/vue-ecosystem-skills.
181 GitHub stars~1.1k tokensUpdated 16 days ago
Documents & OfficeAuto-check passed
Slidev
NeverSight/learn-skills.dev
Create and present web-based slides for developers using Markdown, Vue components, code highlighting, animations, and interactive features.
216 GitHub starsUsed in 1 repo~2.1k tokens
Documents & OfficeAuto-check passed
PPTX
rvdbreemen/OTGW-firmware
Use this skill any time a .pptx file is involved in any way — as input, output, or both.
207 GitHub starsUsed in 35 repos~2.3k tokens
Documents & OfficeAuto-check passed
Open Kimi Ppt
jinwyp/open-ppt-skill
Create, edit, replicate, read, and export presentations. An agent skill from jinwyp/open-ppt-skill.
157 GitHub starsUsed in 2 repos~5.1k tokens
Documents & OfficeAuto-check passed
PPTX Generator
poco-ai/poco-claw
Generate, edit, and read PowerPoint presentations. An agent skill from poco-ai/poco-claw.
1.4k GitHub starsUsed in 4 repos~2k tokens
Documents & OfficeAuto-check passed

Questions about Slidev

What does Slidev do?

Create and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features. Slidev is an agent skill from JetBrains/skills, published by the product's own GitHub organization. Create and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features.

When should I use Slidev?

Slidev fits situations like: building technical presentations; conference talks; code walkthroughs; teaching materials.

How do I install Slidev in Claude Code?

Run `npx skills add JetBrains/skills --skill slidev -a claude-code`. Or copy the skill folder (slidev in JetBrains/skills) into .claude/skills/slidev in your project. Claude Code loads it when a task matches its description.

How do I install Slidev in Codex?

Run `npx skills add JetBrains/skills --skill slidev -a codex`. Or copy the skill folder (slidev in JetBrains/skills) into .agents/skills/slidev in your project. Codex loads it when a task matches its description.

Can I use Slidev in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add JetBrains/skills --skill slidev -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/slidev, .gemini/skills/slidev, .github/skills/slidev and .opencode/skills/slidev in your project.

What does Slidev need to run?

Going by SKILL.md and its folder, Slidev needs the command-line tools its instructions call (pnpm).

Does Slidev access the network?

SKILL.md names 1 domain. As links in the text: sli.dev. This is read from the text; nothing was executed.

Is Slidev safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Slidev use?

Slidev is published under the MIT licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Slidev use?

About 2.2k tokens (SKILL.md is roughly 8.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 14k tokens, read only when the agent opens those files.

What are the alternatives to Slidev?

Skills that share tags, products or a category with Slidev: Creating Slidev Presentations (mcpc-tech/mcpc, 103 stars), Slidev CLI Skilld (skilld-dev/vue-ecosystem-skills, 181 stars), Slidev (NeverSight/learn-skills.dev, 216 stars) and PPTX (rvdbreemen/OTGW-firmware, 207 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Slidev?

JetBrains (a GitHub organization, an official publisher) maintains it in JetBrains/skills, which has 364 GitHub stars. The repository holds 77 skills in this directory. The repository was last updated on June 29, 2026.

Source: JetBrains/skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Slidev

Facts

At a glance

What it does

When your agent uses it

Example prompts

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

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

Files

Used in 3 other repositories

Compare with similar skills

Similar skills

More from JetBrains/skills

Related

Questions about Slidev