home / skills / smallnest / langgraphgo / slidev
This skill helps you create and edit Slidev presentations quickly by generating slides, applying frontmatter, layouts, and components.
npx playbooks add skill smallnest/langgraphgo --skill slidevReview the files below or copy the command above to add this skill to your agents.
---
name: slidev
description: Create and edit presentation slides using Slidev framework when user requests slides, presentations, or deck modifications
---
# 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
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:
```yaml
---
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 `---`:
```markdown
---
# Slide 1
Content here
---
# Slide 2
More content
```
### Slide Configuration
Individual slides can have frontmatter:
```markdown
---
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
```markdown
---
layout: two-cols
---
# Left Column
Content here
::right::
# Right Column
Content here
```
## Interactive Features
### Click Animations
Use `v-click` for progressive reveals:
```html
<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
```html
<Counter :count="10" />
```
### Code Blocks
Syntax highlighting with line highlighting:
````markdown
```ts {1|3|1-3}
const message = "Hello"
console.log(message)
```
````
### Presenter Notes
Add notes in HTML comments at the end of slides:
```markdown
---
# 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
```bash
# 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
This skill creates and edits presentation slides using the Slidev framework, turning markdown and simple directives into polished developer-focused decks. It helps generate new slide decks, modify existing slides, and apply Slidev features like layouts, themes, and interactive components. The goal is fast, reproducible slide authoring with Slidev conventions and best practices.
The skill inspects or generates Slidev markdown files with YAML frontmatter and slide separators (---), applies layout and theme settings, and inserts content blocks, code examples, presenter notes, and Vue components where needed. It can modify individual slide frontmatter, convert plain content into Slidev slides, and prepare commands for running, building, or exporting the deck. When requested, it uses Slidev idioms like v-click reveals, two-col layouts, and syntax-highlighted code fences.
How do I run the Slidev dev server?
Use pnpm run slides [filename]; the dev server runs on http://localhost:3030 by default.
Where do I put custom Vue components?
Store custom components in the components directory for the slides package and reference them directly in slide markdown.