OpenSkillIndex← back to search
claude-code

Skillshub slidev

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.

install
source · Clone the upstream repo
git clone https://github.com/ComeOnOliver/skillshub
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/ComeOnOliver/skillshub "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/antfu/skills/slidev" ~/.claude/skills/comeonoliver-skillshub-slidev-586cee && rm -rf "$T"
manifest: skills/antfu/skills/slidev/SKILL.md
source content

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

FeatureUsageReference
Mermaid diagrams
```mermaid
diagram-mermaid
PlantUML diagrams
```plantuml
diagram-plantuml
LaTeX math
$inline$
or 
$$block$$
diagram-latex

Layout & Styling

FeatureUsageReference
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

FeatureUsageReference
Click animations
v-click
, 
<v-clicks>
core-animations
Rough markers
v-mark.underline
, 
v-mark.circle
animation-rough-marker
Drawing modePress 
C
or config 
drawings:
animation-drawing
Direction styles
forward:delay-300
style-direction
Note highlighting
[click]
in notes		animation-click-marker

Syntax Extensions

FeatureUsageReference
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 frontmatterMain entry winssyntax-frontmatter-merging

Presenter & Recording

FeatureUsageReference
RecordingPress 
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

FeatureUsageReference
Export options
slidev export
core-exporting
Build & deploy
slidev build
core-hosting
Build with PDF
download: true
build-pdf
Cache imagesAutomatic for remote URLsbuild-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

FeatureUsageReference
Side editorClick edit iconeditor-side
VS Code extensionInstall 
antfu.slidev
editor-vscode
Prettier
prettier-plugin-slidev
editor-prettier
Eject theme
slidev theme eject
tool-eject-theme

Lifecycle & API

FeatureUsageReference
Slide hooks
onSlideEnter()
, 
onSlideLeave()
api-slide-hooks
Navigation API
$nav
, 
useNav()
core-global-context

Common Layouts

LayoutPurpose
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