Create and edit presentation slides using Slidev framework when user requests slides, presentations, or deck modifications
This skill helps create and edit presentation slides using Slidev, a markdown-based presentation framework for developers.
Use this skill when the user asks to:
Slides are located in packages/slides/ directory with:
*.slides.md or slides.mdcomponents/ directory for Vue componentspackage.json for dependenciesStart the development server:
pnpm run slides [filename]
The dev server runs on http://localhost:3030 by default.
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
---
Slides are separated by ---:
---
# Slide 1
Content here
---
# Slide 2
More content
Individual slides can have frontmatter:
---
layout: center
class: text-center
---
# Centered Slide
default - Standard layoutcenter - Centered contenttwo-cols - Two column layoutimage-right - Image on right sidecover - Cover slide---
layout: two-cols
---
# Left Column
Content here
::right::
# Right Column
Content here
Use v-click for progressive reveals:
<v-click>
Content appears on click
</v-click>
<v-clicks>
- Item 1
- Item 2
- Item 3
</v-clicks>
Use Vue components in slides:
Custom one are stored packages/slides/components directory
<Counter :count="10" />
Syntax highlighting with line highlighting:
```ts {1|3|1-3}
const message = "Hello"
console.log(message)
```
Add notes in HTML comments at the end of slides:
---
# Slide Title
Content
<!--
These are presenter notes
Only visible in presenter mode
-->
# 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
