Slidev Skill
This skill helps create and edit presentation slides using Slidev, a markdown-based presentation framework for developers.
When to Use This Skill
Use this skill when the user asks to:
-
Create a new presentation or slide deck
-
Edit existing slides
-
Add or modify slide content
-
Work with Slidev-specific features
-
Generate presentations from content
Project Structure
Slides are located in packages/slides/ directory with:
-
Slide files: *.slides.md or slides.md
-
Components: components/ directory for Vue components
-
Configuration: package.json for dependencies
Running Slidev
Start the development server:
pnpm run slides [filename]
The dev server runs on http://localhost:3030 by default.
Slidev File Format
Frontmatter Configuration
Every Slidev file starts with YAML frontmatter:
theme: seriph # or 'default' title: Your Presentation Title info: |
Presentation description
Additional info here class: text-center drawings: persist: false transition: slide-left # fade-out, slide-up, etc. mdc: true duration: 10min
Slide Separators
Slides are separated by --- :
Slide 1
Content here
Slide 2
More content
Slide Configuration
Individual slides can have frontmatter:
layout: center class: text-center
Centered Slide
Common Layouts
-
default
-
Standard layout
-
center
-
Centered content
-
two-cols
-
Two column layout
-
image-right
-
Image on right side
-
cover
-
Cover slide
Two Column Layout Example
layout: two-cols
Left Column
Content here
::right::
Right Column
Content here
Interactive Features
Click Animations
Use v-click for progressive reveals:
<v-click> Content appears on click </v-click>
<v-clicks> - Item 1 - Item 2 - Item 3 </v-clicks>
Components
Use Vue components in slides:
Custom one are stored packages/slides/components directory
<Counter :count="10" />
Code Blocks
Syntax highlighting with line highlighting:
const message = 'Hello';
console.log(message);
Presenter Notes
Add notes in HTML comments at the end of slides:
Slide Title
Content
<!-- These are presenter notes Only visible in presenter mode -->
Best Practices
-
Keep slides focused - One concept per slide
-
Use progressive disclosure - Reveal information with v-click
-
Add presenter notes - Document your talking points
-
Leverage layouts - Use built-in layouts for consistency
-
Interactive components - Enhance with Vue components when needed
Common Commands
Development
pnpm run slides [filename]
Build static version
pnpm --filter @chris-towles/slides run build
Export to PDF
pnpm --filter @chris-towles/slides run export
Resources
-
Slidev Documentation: https://sli.dev/
-
Built-in Components: https://sli.dev/builtin/components.html