Use this skill when creating Slidev presentations. Provides comprehensive syntax reference, layouts, animations, code highlighting, diagrams, and best practices for developer education videos. Trigger phrases include "slidev", "slides", "presentation", "video slides", "create slides".
Inherits all available tools
Additional assets for this skill
This skill inherits all available tools. When active, it can use any tool Claude has access to.
Complete reference for creating developer education presentations with Slidev.
Every presentation starts with frontmatter in the first slide:
---
theme: default
title: "Video Title Here"
info: |
## Module Description
Brief description for metadata
author: Course Name
transition: slide-left
highlighter: shiki
drawings:
persist: false
mdc: true
download: true
exportFilename: video-filename
aspectRatio: 16/9
canvasWidth: 980
fonts:
sans: Inter
mono: Fira Code
---
| Option | Purpose | Recommended |
|---|---|---|
theme | Visual theme | default, seriph |
transition | Slide animation | slide-left, fade |
highlighter | Code syntax | shiki |
aspectRatio | Slide ratio | 16/9 for video |
mdc | MDC syntax | true |
--- # New slide
--- # Another slide
Per-slide frontmatter:
---
layout: center
class: text-center
transition: fade
---
Standard content layout.
---
layout: default
---
# Title
Content here
Centered content for impact statements.
---
layout: center
class: text-center
---
# Big Statement
Major topic dividers.
---
layout: section
---
# Part 1: Topic Name
Side-by-side content (code + explanation).
---
layout: two-cols
layoutClass: gap-16
---
# Left Content
Explanation here
::right::
## Right Content
```code
example
### two-cols-header
Header spanning both columns.
```markdown
---
layout: two-cols-header
---
# Header Spans Both
::left::
Left content
::right::
Right content
Image with content.
---
layout: image-right
image: /path/to/image.jpg
backgroundSize: cover
---
# Content Side
Explanation here
Emphasize statistics.
---
layout: fact
---
# 100%
Of modern C++ should use smart pointers
Attribution quotes.
---
layout: quote
---
# "Quote text here"
Author Name
Speaker/topic introduction.
---
layout: intro
---
# Topic Name
Introduction content
Closing slide.
---
layout: end
---
# Thank You
Call to action
```python
def greet(name):
return f"Hello, {name}!"
```
```python {2,4}
def calculate(x, y):
result = x + y # Highlighted
print(result)
return result # Highlighted
```
```python {1|2-3|4-5|all}
def process(items):
valid = [x for x in items if x > 0]
sorted_items = sorted(valid)
total = sum(sorted_items)
return total
```
Pattern: {step1|step2|step3|all} - each | is a click.
```python {lines:true}
def factorial(n):
if n <= 1:
return 1
return n * factorial(n - 1)
```
```python {lines:true,startLine:42}
# Code starting at line 42
```
```python {maxHeight:'200px'}
# Long code that scrolls
```
```typescript {monaco}
// Editable code
const x = 5;
```
```typescript {monaco-run}
console.log("Runs live!");
```
```typescript {monaco-diff}
// Before
function add(a, b) { return a + b; }
~~~
// After
function add(a: number, b: number): number { return a + b; }
```
<v-click>
This appears on click
</v-click>
<v-clicks>
- First item
- Second item
- Third item
</v-clicks>
<v-clicks depth="2">
- Parent
- Child 1
- Child 2
- Parent 2
</v-clicks>
<div v-click="3">Appears at click 3</div>
<div v-click="1">Appears at click 1</div>
<div v-click="2">Appears at click 2</div>
<div v-click.hide="3">Disappears at click 3</div>
<div v-click="[1, 3]">Visible only clicks 1-2</div>
<v-click>Main content</v-click>
<v-after>Appears with main content</v-after>
---
transition: slide-left # Global default
---
---
transition: fade # Per-slide override
---
Available: slide-left, slide-right, slide-up, slide-down, fade, fade-out
```mermaid
graph TD
A[Start] --> B{Decision}
B -->|Yes| C[Action 1]
B -->|No| D[Action 2]
C --> E[End]
D --> E
```
```mermaid {scale: 0.8}
sequenceDiagram
participant C as Client
participant S as Server
C->>S: Request
S-->>C: Response
```
```mermaid {scale: 0.7}
classDiagram
class Animal {
+String name
+makeSound()
}
class Dog {
+bark()
}
Animal <|-- Dog
```
```mermaid {theme: 'neutral', scale: 0.8}
graph LR
A --> B --> C
```
Themes: default, neutral, dark, forest, base
The formula is $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$
$$
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
$$
| Algorithm | Complexity |
|-----------|------------|
| Binary Search | $O(\log n)$ |
| Quick Sort | $O(n \log n)$ |
Layout:
grid, flex, grid-cols-2, grid-cols-3gap-4, gap-8Spacing:
p-4, m-4, mt-8, px-2, py-1Typography:
text-sm, text-xl, text-2xlfont-bold, font-monotext-center, text-leftColors:
text-blue-500, text-red-500bg-blue-500, bg-green-100bg-opacity-20, opacity-50Borders:
rounded, rounded-lgborder, border-blue-500<div class="abs-tr m-4">Top Right</div>
<div class="abs-tl m-4">Top Left</div>
<div class="abs-br m-4">Bottom Right</div>
<div class="abs-bl m-4">Bottom Left</div>
<div class="p-4 rounded-lg bg-blue-500 bg-opacity-20 border border-blue-500">
Card content
</div>
<style>
h1 {
background: linear-gradient(90deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
Notes go in HTML comments at slide end:
# Slide Title
Content here
<!--
Main talking points:
- First point to cover
- Second important concept
[click] Animation appears - explain this
[click] Next animation - elaborate
[PAUSE] Give viewers time to absorb
[TRANSITION] Lead into next topic...
-->
<!--
Introduction to the concept...
[click] First item appears - discuss the basics
[click] Second item - dive deeper
[click:2] Skip ahead two clicks
Final summary...
-->
Show same concept in multiple languages:
::code-group
```python [Python]
def greet(name):
return f"Hello, {name}!"
```
```javascript [JavaScript]
function greet(name) {
return `Hello, ${name}!`;
}
```
```rust [Rust]
fn greet(name: &str) -> String {
format!("Hello, {}!", name)
}
```
::
Enable with mdc: true in frontmatter.
This is [red text]{style="color:red"} inline
::div{.p-4 .bg-blue-500 .bg-opacity-20 .rounded}
Block with classes
::
Access slide metadata:
{{ $slidev.nav.currentPage }} <!-- Current slide -->
{{ $slidev.nav.total }} <!-- Total slides -->
{{ $slidev.configs.title }} <!-- Presentation title -->
| Key | Action |
|---|---|
→ / Space | Next |
← | Previous |
g | Go to slide |
| Key | Action |
|---|---|
o | Overview |
p | Presenter mode |
f | Fullscreen |
| Key | Action |
|---|---|
d | Drawings |
r | Recording |
---
layout: center
class: text-center
---
# Why Does Your Code Keep Crashing?
<v-click>
The answer might surprise you...
</v-click>
<!--
[HOOK] Start with a relatable problem
Pause briefly for dramatic effect.
[click] Reveal the teaser - builds curiosity
-->
---
layout: two-cols
layoutClass: gap-16
---
# Smart Pointers
<v-clicks>
- **What:** Automatic memory management
- **Why:** Prevents memory leaks
- **How:** RAII pattern
</v-clicks>
::right::
<v-click>
```cpp
auto ptr = std::make_unique<int>(42);
// Automatically freed!
</v-click>
<!--
[click] Define the concept clearly
[click] Explain the motivation
[click] Hint at the mechanism
[click] Show concrete example
[VISUAL CUE] Point to the code on the right
-->
### Code Walkthrough
```markdown
# Processing Data
```python {1|3-4|6-7|all}
# Step 1: Setup
data = [1, 2, 3, 4, 5]
# Step 2: Transform
result = [x * 2 for x in data]
# Step 3: Output
print(result)
<!--
[click] Show the setup - explain data structure
[click] Transform step - explain list comprehension
[click] Output - show the result
[click] Full code visible - summarize the pattern
-->
### Comparison Slide
```markdown
---
layout: two-cols
---
<div class="p-4 rounded bg-red-500 bg-opacity-10">
### ❌ Don't
```cpp
int* ptr = new int(42);
// Memory leak!
</div>
::right::
<div class="p-4 rounded bg-green-500 bg-opacity-10">auto ptr = make_unique<int>(42);
// Auto cleanup!
</div>
<!--
[SHOW CODE] Left side - the problematic pattern
Explain why this is dangerous...
[SHOW CODE] Right side - the solution
This is the modern C++ way...
-->
### Summary Pattern
```markdown
---
layout: center
---
# Key Takeaways
<v-clicks>
1. **Smart pointers** manage memory automatically
2. Use **unique_ptr** for single ownership
3. Use **shared_ptr** for shared ownership
4. **Never** use raw `new` in modern C++
</v-clicks>
<!--
[click] First takeaway - the main concept
[click] Second - most common case
[click] Third - when to use shared
[click] Fourth - the golden rule
[PAUSE] Let these sink in before the call to action
-->
---
layout: end
---
# Practice Time!
<div class="text-center mt-8">
Try converting raw pointers to smart pointers in your code
**Next Video:** Move Semantics Deep Dive
</div>
<!--
End with clear action items.
Mention the next video to encourage continued watching.
Thank viewers for watching!
-->