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/com...