nicepkg/slidev
Comprehensive guide for Slidev - a web-based presentation framework for developers. Covers Markdown syntax, layouts, components, animations, theming, and exporting. Use this skill when creating or working with developer presentations using Slidev.
npx skills add https://github.com/nicepkg/ai-workflow --skill slidevSlidev is a presentation platform for developers that enables creating slides using Markdown while leveraging Vue and web technologies for interactive, pixel-perfect designs. This skill provides complete guidance for creating, customizing, and exporting Slidev presentations.
Use this skill when:
For complete API reference, advanced features, or edge cases not covered here, fetch the official LLM-optimized documentation:
https://sli.dev/llms-full.txt
Create a new Slidev presentation:
# Using pnpm (recommended)
pnpm create slidev
# Using npm
npm init slidev
# Using yarn
yarn create slidev
# Using bun
bun create slidev
Or try online at https://sli.dev/new (StackBlitz)
Start development server:
slidev
# or specify entry file
slidev slides.md
Build for production:
slidev build
Export to PDF:
slidev export
Export to other formats:
slidev export --format pptx
slidev export --format png
slidev export --format md
Format slides:
slidev format
Separate slides with --- padded by blank lines:
# Slide 1
Content here
---
# Slide 2
More content
Configure entire deck with headmatter (first YAML block):
---
theme: default
background: https://cover.sli.dev
title: My Presentation
info: |
## Slidev Starter
Presentation slides for developers
class: text-center
highlighter: shiki
---
Configure individual slides with frontmatter:
---
layout: center
background: ./images/bg.jpg
class: text-white
---
# Centered Slide
Content here
Code with syntax highlighting:
console.log('Hello, World!')
With line numbers:
function greet(name: string) {
console.log(Hello, ${name}!)
}
With line highlighting:
function calculate() {
const x = 10 // highlighted
const y = 20
const sum = x + y // highlighted
const product = x * y // highlighted
const difference = x - y // highlighted
return sum
}
Add notes at the end of slides using comment blocks:
# Slide Title
Content visible to audience
<!--
Notes for presenter only
Can include **markdown** and HTML
-->
Specify layout in frontmatter:
---
layout: cover
---
# Presentation Title
Basic Layouts:
default - Standard layout for any contentcenter - Centers content on screencover - Opening slide for presentationsend - Closing slidenone - Unstyled layoutContent Layouts:
intro - Introduction with title and author detailssection - Marks new presentation sectionsquote - Displays quotations with emphasisfact - Highlights data or facts prominentlystatement - Features affirmations as main contentfull - Utilizes entire screen spaceImage Layouts:
image - Full-screen image displayimage-left - Image on left, content on rightimage-right - Image on right, content on leftIframe Layouts:
iframe - Full-screen web page embeddingiframe-left - Web page on left sideiframe-right - Web page on right sideMulti-Column Layouts:
two-cols - Two-column content separationtwo-cols-header - Header spanning both columns with left/right split---
layout: two-cols
---
# Left Column
Content for left side
::right::
# Right Column
Content for right side
---
layout: two-cols-header
---
# Header Across Both Columns
::left::
Left column content
::right::
Right column content
Navigation:
<Link> - Navigate between slides<Arrow> - Directional lines with customization<VDragArrow> - Draggable arrowsText:
<AutoFitText> - Auto-sizing text to fit container<TitleRenderer> - Display parsed slide titles<Toc> - Table of contents generationMedia:
<Youtube> - Embed YouTube videos<Tweet> - Embed Twitter posts<SlidevVideo> - HTML5 video with autoplayUtilities:
<SlideCurrentNo> - Current slide number<SlidesTotal> - Total slide count<Transform> - Scaling and transformation<LightOrDark> - Theme-based content rendering<RenderWhen> - Conditional rendering by context<VSwitch> - Cycle between content on click<VDrag> - Draggable functionality<Youtube id="dQw4w9WgXcQ" />
<Tweet id="1234567890" />
<Arrow x1="100" y1="100" x2="200" y2="200" />
<AutoFitText :max="300" :min="20">
This text will auto-size
</AutoFitText>
<Toc minDepth="1" maxDepth="2" />
Create custom Vue components in ./components/ directory. They are auto-imported without manual registration.
Example structure:
./components/
MyComponent.vue
Counter.vue
slides.md
Use in slides:
<MyComponent />
<Counter :initial="10" />
v-click Directive:
<div v-click>Appears on click</div>
<div v-click>Appears on next click</div>
v-after Directive:
<div v-click>First</div>
<div v-after>Appears with previous</div>
v-clicks for Lists:
<v-clicks>
- First item
- Second item
- Third item
</v-clicks>
Absolute positioning:
<div v-click="1">Shows at step 1</div>
<div v-click="2">Shows at step 2</div>
<div v-click="3">Shows at step 3</div>
Relative positioning:
<div v-click>First</div>
<div v-click="+2">Skip one step</div>
<div v-click="-1">Same time as previous</div>
Use @vueuse/motion for directional animations:
<div
v-motion
:initial="{ x: -80 }"
:enter="{ x: 0 }">
Slides in from left
</div>
Configure in frontmatter:
---
transition: slide-left
---
Available transitions:
fadeslide-leftslide-rightslide-upslide-downview-transitionSlidev uses UnoCSS with Tailwind-compatible utilities:
<div class="grid grid-cols-2 gap-4">
<div class="bg-blue-500 p-4">Column 1</div>
<div class="bg-red-500 p-4">Column 2</div>
</div>
Create ./styles/index.css:
.my-custom-class {
@apply text-2xl font-bold text-blue-500;
}
Add styles to specific slides:
# Slide Title
Content here
<style>
h1 {
color: #3b82f6;
}
</style>
UnoCSS dark mode utilities:
<div class="bg-white dark:bg-black text-black dark:text-white">
Adapts to theme
</div>
slidevhttp://localhost:3030/exportInstall Playwright first:
pnpm add -D playwright-chromium
Export to PDF:
slidev export
# or specify output
slidev export --output my-presentation.pdf
Export to PPTX:
slidev export --format pptx
Export to PNG:
slidev export --format png
Export with animations:
slidev export --with-clicks
Export specific slides:
slidev export --range 1,6-8,10
Export in dark mode:
slidev export --dark
--output - Custom filename--format - Export format (pdf, pptx, png, md)--with-clicks - Include animation steps--range - Specific slides (e.g., 1,6-8,10)--dark - Use dark theme--timeout - Increase timeout for large presentations--wait - Add delay before export--with-toc - Generate PDF outline./
├─ components/ # Custom Vue components
├─ layouts/ # Custom layouts
├─ public/ # Static assets
├─ setup/ # Custom setup code
├─ snippets/ # Code snippets
├─ styles/ # Custom styles
├─ slides.md # Main presentation file
├─ vite.config.ts # Vite configuration
└─ uno.config.ts # UnoCSS configuration
Create uno.config.ts:
import { defineConfig } from 'unocss'
export default defineConfig({
shortcuts: {
'bg-main': 'bg-white text-[#181818] dark:(bg-[#121212] text-[#ddd])'
}
})
Extend Vite config in vite.config.ts:
import { defineConfig } from 'vite'
export default defineConfig({
// Your custom Vite config
})
Line Numbers:
function example() {
return true
}
Line Highlighting:
function calculate() {
const x = 10 // highlighted
const y = 20 // highlighted
const sum = x + y // highlighted
return sum
}
Monaco Editor:
// Editable code block
console.log('Edit me!')
Monaco with Auto-Run:
console.log('Runs automatically')
Mermaid:
graph TD
A[Start] --> B[Process]
B --> C[End]
PlantUML:
@startuml
Alice -> Bob: Hello
Bob -> Alice: Hi
@enduml
Inline math:
Pythagorean theorem: $a^2 + b^2 = c^2$
Block math:
$$
\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
$$
Use Iconify icons directly:
<carbon-logo-github /> GitHub
<mdi-heart class="text-red-500" /> Love
Enable drawing on slides with presenter mode. Drawings are synchronized across devices.
Record presentations with audio using the built-in recording feature.
Import slides from other files:
---
src: ./slides/intro.md
---
---
src: ./slides/content.md
---
Create global-top.vue or global-bottom.vue for persistent UI elements:
<!-- global-top.vue -->
<template>
<div class="fixed top-0 left-0 right-0 p-4">
Header content on all slides
</div>
</template>
Configure in frontmatter:
---
shortcuts:
next: space
prev: shift+space
toggleOverview: o
---
Enable remote control for presentations:
slidev --remote
Access from another device using the displayed URL.
Install theme package:
pnpm add slidev-theme-seriph
Configure in headmatter:
---
theme: seriph
---
default - Built-in default themeseriph - Elegant serif themeapple-basic - Apple-style themebricks - Brick-pattern themeshibainu - Cute Shiba Inu themeBrowse more at https://sli.dev/themes/gallery
Generate theme package:
pnpm create slidev-theme
For detailed theme development, see references/theming.md.
slides.md and assetsIf build fails, try:
# Clear cache
rm -rf node_modules/.vite
# Rebuild
slidev build
Missing content: Add wait time
slidev export --wait 2000
Broken emojis: Install system fonts or use icon libraries
Large file size: Export specific slides or reduce image quality
Specify custom port:
slidev --port 3333
Ensure theme is installed:
pnpm add slidev-theme-NAME
And configured correctly in headmatter:
---
theme: NAME
---
For comprehensive documentation on specific topics, see:
references/syntax-guide.md - Complete Markdown syntax referencereferences/components-api.md - Detailed component API documentationreferences/theming.md - Theme creation and customizationreferences/features.md - Advanced features and integrations# Initialize
pnpm create slidev
# Edit slides.md
# Add content with Markdown
# Start dev server
slidev
# Export when done
slidev export
# Create component
mkdir components
cat > components/Counter.vue << 'EOF'
<script setup lang="ts">
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<button @click="count++">
Count: {{ count }}
</button>
</template>
EOF
# Use in slides.md
# <Counter />
# Install theme
pnpm add slidev-theme-seriph
# Configure in slides.md headmatter
# ---
# theme: seriph
# ---
# Preview
slidev
Create slide files:
mkdir slides
echo "# Introduction" > slides/intro.md
echo "# Content" > slides/content.md
Import in slides.md:
---
src: ./slides/intro.md
---
---
src: ./slides/content.md
---
Slidev is built on:
This enables fast development, rich interactivity, and extensive customization options.
Take nicepkg/slidev from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.
The instructions reference pnpm.
Without those the skill loads but fails at the first command.