Slidev Skill

When to Use This Skill

• 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

packages/slides/

• Slide files:

  *.slides.md

  or

  slides.md

• Components:

  components/

  directory for Vue components
• Configuration:

  package.json

  for dependencies

Running Slidev

pnpm run slides [filename]

http://localhost:3030

Slidev File Format

Frontmatter Configuration

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

---

---
# Slide 1

Content here

---
# Slide 2

More content

Slide Configuration

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

v-click

<v-click>
Content appears on click
</v-click>

<v-clicks>
- Item 1
- Item 2
- Item 3
</v-clicks>

Components

packages/slides/components

<Counter :count="10" />

Code Blocks

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

Presenter Notes

---
# Slide Title

Content

<!--
These are presenter notes
Only visible in presenter mode
-->

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

# 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/
• Themes: https://sli.dev/resources/theme-gallery
• Built-in Components: https://sli.dev/builtin/components.html