AutoGineer
Generated banner for Slidev
Generated logo for Slidev

Slidev

JetBrainsOfficialCreated by Anthony FuDistributed by JetBrains

  • Skill
  • Tool integration
  • Software development
  • MIT
  • Low risk
Download ZIP

From the author

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.
— the description by Anthony Fu

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

Slidev is a developer-focused presentation tool that allows users to create slide decks using Markdown, Vue components, and built-in code highlighting. It is designed for technical talks, workshops, and documentation, offering features like live code editing, interactive diagrams, presenter notes, and various export formats including PDF and static web applications.

What it does

  • Generates web-based slide decks from Markdown files
  • Supports live code execution and editing via Monaco editor
  • Provides built-in support for Mermaid, PlantUML, and LaTeX
  • Includes presenter mode with notes, timers, and drawing tools
  • Allows exporting presentations to PDF, PPTX, or static SPA
  • Enables complex animations and transitions using Vue components

When to use it

  • Creating technical conference talks or workshops
  • Building interactive code walkthroughs
  • Developing documentation that requires live demonstrations
  • Presenting data-heavy content with diagrams and math equations

Advantages

  • Uses familiar Markdown syntax for content creation
  • Integrates seamlessly with developer workflows and tools
  • Supports advanced code highlighting and interactive snippets
  • Highly customizable through Vue components and CSS
  • Portable output formats for offline or online distribution

Usage examples

“Create a new Slidev project”
The agent initializes a new Slidev project structure in the current directory, ready for development.
“Export my presentation to PDF”
The agent runs the export command to generate a PDF file of the slide deck, provided the necessary browser dependencies are installed.

Install

  1. Download the skill as a ZIP:

    https://autogineer.com/agent-skills/jetbrains/slidev/download

  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip slidev.zip -d .agents/skills

Documentation by Anthony Fu

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

TopicDescriptionReference
Markdown SyntaxSlide separators, frontmatter, notes, code blockscore-syntax
Animationsv-click, v-clicks, motion, transitionscore-animations
HeadmatterDeck-wide configuration optionscore-headmatter
FrontmatterPer-slide configuration optionscore-frontmatter
CLI CommandsDev, build, export, theme commandscore-cli
ComponentsBuilt-in Vue componentscore-components
LayoutsBuilt-in slide layoutscore-layouts
ExportingPDF, PPTX, PNG export optionscore-exporting
HostingBuild and deploy to various platformscore-hosting
Global Context$nav, $slidev, composables APIcore-global-context

Feature Reference

Code & Editor
FeatureUsageReference
Line highlighting```ts {2,3}code-line-highlighting
Click-based highlighting```ts {1|2-3|all}code-line-highlighting
Line numberslineNumbers: 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-movecode-magic-move
TypeScript types```ts twoslashcode-twoslash
Import code<<< @/snippets/file.jscode-import-snippet
Diagrams & Math
FeatureUsageReference
Mermaid diagrams```mermaiddiagram-mermaid
PlantUML diagrams```plantumldiagram-plantuml
LaTeX math$inline$ or $$block$$diagram-latex
Layout & Styling
FeatureUsageReference
Canvas sizecanvasWidth, aspectRatiolayout-canvas-size
Zoom slidezoom: 0.8layout-zoom
Scale elements<Transform :scale="0.5">layout-transform
Layout slots::right::, ::default::layout-slots
Scoped CSS<style> in slidestyle-scoped
Global layersglobal-top.vue, global-bottom.vuelayout-global-layers
Draggable elementsv-drag, <v-drag>layout-draggable
Icons<mdi-icon-name />style-icons
Animation & Interaction
FeatureUsageReference
Click animationsv-click, <v-clicks>core-animations
Rough markersv-mark.underline, v-mark.circleanimation-rough-marker
Drawing modePress C or config drawings:animation-drawing
Direction stylesforward:delay-300style-direction
Note highlighting[click] in notesanimation-click-marker
Syntax Extensions
FeatureUsageReference
Comark syntaxcomark: true + {style="color:red"}syntax-comark
Block frontmatter```yaml instead of ---syntax-block-frontmatter
Import slidessrc: ./other.mdsyntax-importing-slides
Merge frontmatterMain entry winssyntax-frontmatter-merging
Presenter & Recording
FeatureUsageReference
RecordingPress G for camerapresenter-recording
Timerduration: 30min, timer: countdownpresenter-timer
Remote controlslidev --remotepresenter-remote
Ruby textnotesAutoRuby:presenter-notes-ruby
Export & Build
FeatureUsageReference
Export optionsslidev exportcore-exporting
Build & deployslidev buildcore-hosting
Build with PDFdownload: truebuild-pdf
Cache imagesAutomatic for remote URLsbuild-remote-assets
OG imageseoMeta.ogImage or og-image.pngbuild-og-image
SEO tagsseoMeta: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
FeatureUsageReference
Side editorClick edit iconeditor-side
VS Code extensionInstall antfu.slideveditor-vscode
Prettierprettier-plugin-slideveditor-prettier
Eject themeslidev theme ejecttool-eject-theme
Lifecycle & API
FeatureUsageReference
Slide hooksonSlideEnter(), onSlideLeave()api-slide-hooks
Navigation API$nav, useNav()core-global-context

Common Layouts

LayoutPurpose
coverTitle/cover slide
centerCentered content
defaultStandard slide
two-colsTwo columns (use ::right::)
two-cols-headerHeader + two columns
image / image-left / image-rightImage layouts
iframe / iframe-left / iframe-rightEmbed URLs
quoteQuotation
sectionSection divider
fact / statementData/statement display
intro / endIntro/end slides

Resources

Files

references/core-frontmatter.md

name: frontmatter description: Configuration options for individual slides

Per-Slide Frontmatter

Configuration options for individual slides.

Layout

---
layout: center
---

Available layouts: default, cover, center, two-cols, two-cols-header, image, image-left, image-right, iframe, iframe-left, iframe-right, quote, section, statement, fact, full, intro, end, none

Background

---
background: /image.jpg
backgroundSize: cover
class: text-white
---

Click Count

---
clicks: 5                   # Total clicks for this slide
clicksStart: 0              # Starting click number
---

Transitions

---
transition: fade            # Slide transition
---

Or different for forward/backward:

---
transition: slide-left | slide-right
---

Zoom

---
zoom: 0.8                   # Scale content (0.8 = 80%)
---

Hide Slide

---
disabled: true              # Hide this slide
# or
hide: true
---

Table of Contents

---
hideInToc: true             # Hide from Toc component
level: 2                    # Override heading level
title: Custom Title         # Override slide title
---

Import External File

---
src: ./slides/intro.md      # Import markdown file
---

With specific slides:

---
src: ./other.md#2,5-7       # Import slides 2, 5, 6, 7
---

Route Alias

---
routeAlias: intro           # URL: /intro instead of /1
---

Preload

---
preload: false              # Don't mount until entering
---

Draggable Positions

---
dragPos:
  logo: 100,50,200,100,0    # Left,Top,Width,Height,Rotate
  arrow: 300,200,50,50,45
---

Image Layouts

---
layout: image-left
image: /photo.jpg
backgroundSize: contain
class: my-custom-class
---

Iframe Layouts

---
layout: iframe
url: https://example.com
---

Two Columns

---
layout: two-cols
---

# Left Side

Content

::right::

# Right Side

Content

Two Columns with Header

---
layout: two-cols-header
---

# Header

::left::

Left content

::right::

Right content

Full Example

---
layout: center
background: /bg.jpg
class: text-white text-center
transition: fade
clicks: 3
zoom: 0.9
hideInToc: false
---

# Slide Content

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Needs Node.js

Security

What our scanner noticed· Low risk

  • Instructions that use the network

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
Anthony Fu
Publisher
JetBrains (Official)
Distributed by
JetBrains
Source
JetBrains/skills · slidev · commit 3f53782
Licence
MIT License (redistribution allowed)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Anthony Fu or JetBrains.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download slidev.zip