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:

bash
1pnpm 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:

yaml
1---
2theme: seriph  # or 'default'
3title: Your Presentation Title
4info: |
5  ## Presentation description
6  Additional info here
7class: text-center
8drawings:
9  persist: false
10transition: slide-left  # fade-out, slide-up, etc.
11mdc: true
12duration: 10min
13---

Slide Separators

Slides are separated by ---:

markdown
1---
2# Slide 1
3
4Content here
5
6---
7# Slide 2
8
9More content

Slide Configuration

Individual slides can have frontmatter:

markdown
1---
2layout: center
3class: text-center
4---
5
6# 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

markdown
1---
2layout: two-cols
3---
4
5# Left Column
6
7Content here
8
9::right::
10
11# Right Column
12
13Content here

Interactive Features

Click Animations

Use v-click for progressive reveals:

html
1<v-click>
2Content appears on click
3</v-click>
4
5<v-clicks>
6- Item 1
7- Item 2
8- Item 3
9</v-clicks>

Components

Use Vue components in slides:

Custom one are stored packages/slides/components directory

html
1<Counter :count="10" />

Code Blocks

Syntax highlighting with line highlighting:

markdown
1```ts {1|3|1-3}
2const message = "Hello"
3console.log(message)
4```

Presenter Notes

Add notes in HTML comments at the end of slides:

markdown
1---
2# Slide Title
3
4Content
5
6<!--
7These are presenter notes
8Only visible in presenter mode
9-->

Best Practices

1. Keep slides focused - One concept per slide
2. Use progressive disclosure - Reveal information with v-click
3. Add presenter notes - Document your talking points
4. Leverage layouts - Use built-in layouts for consistency
5. Interactive components - Enhance with Vue components when needed

Common Commands

bash
1# Development
2pnpm run slides [filename]
3
4# Build static version
5pnpm --filter @chris-towles/slides run build
6
7# Export to PDF
8pnpm --filter @chris-towles/slides run export

Resources

• Slidev Documentation: https://sli.dev/
• Themes: https://sli.dev/resources/theme-gallery
• Built-in Components: https://sli.dev/builtin/components.html