Slidev Presentations Skill Skill

Slidev Presentations Skill

Generate professional, browser-based presentations using Slidev - the presentation framework for developers.

Official LLM Documentation

For complete API reference or advanced features, fetch the official LLM-optimized documentation:

https://sli.dev/llms-full.txt

When to Use This Skill

Activate when the user requests:

Creating presentation slides
Technical talks or conference presentations
Developer-focused slide decks
Markdown-based presentations with code examples
Interactive presentations with animations

Example Trigger Phrases

These prompts should activate this skill:

"Create a presentation about Kubernetes architecture"
"Make slides for my talk on TypeScript best practices"
"Generate a Slidev deck explaining our API design"
"Build a technical presentation for the team meeting"
"I need slides for a conference talk on microservices"
"Create a workshop presentation with code examples"
"Make a deck covering React hooks for beginners"
"Generate presentation slides about CI/CD pipelines"

NOT This Skill

Do NOT activate for:

PowerPoint or Google Slides requests (different format)
Simple document or README generation
Non-presentation Markdown files
Requests for presentation tips without actual slide creation

Recommended Workflow

Follow the plan-first approach for quality presentations:

1. Gather Context  →  2. Create Plan  →  3. Review Plan  →  4. Generate Slides

Why Plan First?

Plans capture audience, duration, and core message
Review checkpoint before investing in slide generation
Plans become presenter notes and Q&A preparation
Easier to iterate on structure than on finished slides

Workflow Options

| Scenario | Command | Output | | ----------------------------- | ----------------------------------------------- | ------------- | | New presentation on a topic | /slidev:plan [topic] then /slidev:from-plan | Plan + Slides | | Presentation about a codebase | /slidev:from-codebase [path] | Plan + Slides | | Quick slides (skip planning) | /slidev:new [topic] | Slides only | | Generate from existing plan | /slidev:from-plan [plan-file] | Slides only |

Plan Document Structure

A presentation plan includes:

Metadata: Duration, audience, format, venue
Core Message: The ONE thing to remember
Time Allocation: Section breakdown with minutes
Section Details: Key points, visuals needed, talking points
Diagrams to Create: Architecture, flow, comparisons
Code Examples: Files, lines, what to highlight
Demo Plan: What to show, commands, backup plan
Q&A Preparation: Anticipated questions and answers
Presenter Checklist: Before/during presentation tasks

Questions to Gather

When creating a plan, gather:

Duration: Lightning (5-10 min) to deep dive (45-60 min)
Audience: Peers, leadership, external, onboarding
Format: Lecture, demo-heavy, workshop, Q&A-heavy
Venue: Team meeting, conference, client presentation
Focus Areas: Architecture, features, API, testing, DevOps
Technical Depth: High-level, moderate, deep dive
Core Message: What's the ONE thing to remember?
Call to Action: What should audience DO after?

Example Outputs

See the assets/ directory for complete example presentations:

example-technical-talk.md - Conference-style deep dive (Kubernetes)
example-tutorial.md - Workshop format with exercises (TypeScript)
example-team-update.md - Internal team presentation (Q4 update)

Reference Documentation

See the references/ directory for detailed documentation:

slidev-quick-reference.md - Complete syntax cheatsheet
layouts-guide.md - All layouts with usage guidance
themes.md - Theme options and customization
advanced-features.md - Monaco editor, animations, addons, icons
multi-file-organization.md - Splitting presentations across files

Quick Setup

If the user doesn't have Slidev installed, provide these commands:

# Create new presentation (recommended)
npm init slidev@latest

# Or with pnpm
pnpm create slidev

# Or add to existing project
npm install @slidev/cli @slidev/theme-default

Linting Configuration (Required)

Slidev's multi-frontmatter syntax conflicts with standard markdown linters. Always ensure a .markdownlint.json exists in the presentation directory before generating slides.

Why This Matters

Slidev uses --- separators with per-slide frontmatter:

---
layout: section
---

Standard markdownlint interprets layout: section + --- as a setext-style heading and "fixes" it to ## layout: section, corrupting the presentation.

Required Configuration

Create .markdownlint.json in the presentation directory:

{
  "MD003": false,
  "MD024": false,
  "MD025": false,
  "MD026": false,
  "MD033": false,
  "MD041": false
}

| Rule | Why Disabled | | ----- | -------------------------------------------------------- | | MD003 | Prevents setext→ATX conversion that corrupts frontmatter | | MD024 | Slides often have repeated headings across slides | | MD025 | Each slide can have its own H1 | | MD026 | Slide titles may end with punctuation | | MD033 | Slidev uses inline HTML for layouts and animations | | MD041 | First line is YAML frontmatter, not a heading |

Automatic Setup

All /slidev:* commands should check for and create this config file before writing slides.md. If modifying an existing presentation, verify the config exists first.

Run the presentation:

# Development mode with hot reload
npx slidev

# Build for production
npx slidev build

# Export to PDF (requires playwright-chromium)
npx slidev export

# Export to PPTX
npx slidev export --format pptx

Output Format

Generate a complete slides.md file that can be run directly with Slidev.

Core Syntax (Quick Reference)

For full syntax details, see references/slidev-quick-reference.md.

Basic Structure

---
theme: default
title: My Presentation
transition: slide-left
mdc: true
---

# First Slide

Content here

---

# Second Slide

More content

Key Layouts

| Layout | Use Case | | ----------------- | ------------------------- | | cover | Title slide | | center | Centered content | | section | Section divider | | two-cols | Side-by-side content | | two-cols-header | Header + two columns | | image-right | Image right, content left | | fact | Highlight a statistic |

Two-Column Layout

---
layout: two-cols-header
---

# Header

::left::

Left content

::right::

Right content

Code with Line Highlighting

```typescript {2,3}
function add(a: number, b: number) {
  const sum = a + b  // highlighted
  return sum         // highlighted
}
```

Click-to-Reveal Code

```typescript {1|2|3|all}
const a = 1  // click 1
const b = 2  // click 2
const c = 3  // click 3
```

Animations

<!-- Reveal items one-by-one -->
<v-clicks>

- First item (click 1)
- Second item (click 2)

</v-clicks>

<!-- Single element reveal -->
<div v-click>Appears on click</div>

Presenter Notes

# Slide Title

Content

<!--
Speaker notes here (presenter mode only)
-->

Diagrams (Mermaid)

```mermaid
graph TD
  A[Start] --> B{Decision}
  B -->|Yes| C[Action]
  B -->|No| D[End]
```

Advanced Features

For advanced functionality, see references/advanced-features.md:

Shiki Magic Move - Animated code transitions
Monaco Editor - Interactive, editable code blocks ({monaco}, {monaco-run})
v-motion - Movement animations
v-mark - Hand-drawn style annotations
Addons - Python execution, QR codes, diagrams
Icons - 100k+ icons via UnoCSS
Live Drawing - Annotation during presentations

Multi-File Organization

For large presentations (30+ slides), split across multiple files. See references/multi-file-organization.md.

Quick example:

---
src: ./slides/01-intro.md
---

---
src: ./slides/02-content.md
---

Benefits: No linting conflicts, easier reorganization, better version control.

Agent Skills: Slidev Presentations Skill

Install this agent skill to your local

Skill Files