name: text-to-slidev
description: Convert technical notes, documentation, and text into Slidev presentations using @alexop/slidev-theme-brand. Use when asked to create slides, presentations, convert notes to slides, turn documentation into a talk, or generate a slidev deck. Triggers: "create presentation", "make slides", "convert to slidev", "slides from", "turn into a talk", "presentation from".
Text to Slidev Converter
Convert technical text into diagram-first, minimal-text Slidev presentations.
IMPORTANT: Load References First
Before generating slides, read the reference files for available layouts, components, and advanced features:
- references/layouts.md - All available layouts and when to use them
- references/components.md - Component API (Callout, VClicks, FolderTree, etc.)
- references/advanced.md - Mermaid diagrams, Magic Move, line highlighting
- references/examples.md - Transformation examples
Core Philosophy
"You are the content. Your slides are your Table of Contents."
- Diagrams replace text — a good diagram replaces 200+ words
- One concept per slide — if you need "and", split it
- Speaker provides context; slides provide visual anchors
- Max 3-4 bullet points — prefer a diagram instead
Required Frontmatter
---
theme: '@alexop/slidev-theme-brand'
addons:
- '@alexop/slidev-addon-utils'
title: [Generated Title]
layout: cover
---
Workflow
- Read references - Load layout/component/advanced docs
- Analyze - Identify concepts that can be visualized
- Diagram First - Ask: "Can this be a flowchart, sequence, or architecture diagram?"
- Minimize Text - Short phrases, not sentences
- Structure - Intro (
cover) → body → conclusion (section)
Diagram-First Approach
| Content Type |
Use |
| Process/workflow |
flowchart LR or TD |
| API calls, interactions |
sequenceDiagram |
| System architecture |
flowchart with subgraphs |
| Data relationships |
erDiagram |
| State transitions |
stateDiagram-v2 |
See references/advanced.md for Mermaid syntax and examples.
Quick Layout Reference
| Pattern |
Layout |
| Title slide |
cover |
| New section |
section |
| Diagram/content |
default |
| Side-by-side |
two-cols |
| Single metric |
fact |
| Bold statement |
statement |
| Closing |
section or end |
See references/layouts.md for complete documentation.
Key Rules
Do:
- One diagram per slide with short title (3-5 words)
- Use line highlighting for code:
ts {1|3-4|all}
- Progressive reveal with
<VClicks> (max 4 items)
Don't:
- Bullet lists explaining processes → use flowchart
- Paragraphs about architecture → use diagram
- Full sentences on slides → use 2-3 word phrases
- Diagram + long explanation → diagram + title only
Example Transformation
Input: "When a user logs in, the frontend sends credentials to the auth service, which validates them against the database and returns a JWT token."
Output:
# Login Flow
```mermaid
sequenceDiagram
participant F as Frontend
participant A as Auth Service
participant D as Database
F->>A: POST /login
A->>D: Validate
D-->>A: User found
A-->>F: {token}
No bullet points. The diagram IS the explanation.
1---2name: text-to-slidev3description: Convert technical notes, documentation, and text into Slidev presentations using @alexop/slidev-theme-brand. Use when asked to create slides, presentations, convert notes to slides, turn documentation4---5
6---
7name: text-to-slidev
8description: Convert technical notes, documentation, and text into Slidev presentations using @alexop/slidev-theme-brand. Use when asked to create slides, presentations, convert notes to slides, turn documentation into a talk, or generate a slidev deck. Triggers: "create presentation", "make slides", "convert to slidev", "slides from", "turn into a talk", "presentation from".
9---
10
11# Text to Slidev Converter
12
13Convert technical text into **diagram-first, minimal-text** Slidev presentations.
14
15## IMPORTANT: Load References First
16
17Before generating slides, **read the reference files** for available layouts, components, and advanced features:
18
19- [references/layouts.md](references/layouts.md) - All available layouts and when to use them
20- [references/components.md](references/components.md) - Component API (Callout, VClicks, FolderTree, etc.)
21- [references/advanced.md](references/advanced.md) - Mermaid diagrams, Magic Move, line highlighting
22- [references/examples.md](references/examples.md) - Transformation examples
23
24## Core Philosophy
25
26> **"You are the content. Your slides are your Table of Contents."**
27
28- Diagrams replace text — a good diagram replaces 200+ words
29- One concept per slide — if you need "and", split it
30- Speaker provides context; slides provide visual anchors
31- Max 3-4 bullet points — prefer a diagram instead
32
33## Required Frontmatter
34
35```yaml
36---
37theme: '@alexop/slidev-theme-brand'
38addons:
39 - '@alexop/slidev-addon-utils'
40title: [Generated Title]
41layout: cover
42---
43```
44
45## Workflow
46
471. **Read references** - Load layout/component/advanced docs
482. **Analyze** - Identify concepts that can be visualized
493. **Diagram First** - Ask: "Can this be a flowchart, sequence, or architecture diagram?"
504. **Minimize Text** - Short phrases, not sentences
515. **Structure** - Intro (`cover`) → body → conclusion (`section`)
52
53## Diagram-First Approach
54
55| Content Type | Use |
56|--------------|-----|
57| Process/workflow | `flowchart LR` or `TD` |
58| API calls, interactions | `sequenceDiagram` |
59| System architecture | `flowchart` with subgraphs |
60| Data relationships | `erDiagram` |
61| State transitions | `stateDiagram-v2` |
62
63See [references/advanced.md](references/advanced.md) for Mermaid syntax and examples.
64
65## Quick Layout Reference
66
67| Pattern | Layout |
68|---------|--------|
69| Title slide | `cover` |
70| New section | `section` |
71| Diagram/content | `default` |
72| Side-by-side | `two-cols` |
73| Single metric | `fact` |
74| Bold statement | `statement` |
75| Closing | `section` or `end` |
76
77See [references/layouts.md](references/layouts.md) for complete documentation.
78
79## Key Rules
80
81**Do:**
82- One diagram per slide with short title (3-5 words)
83- Use line highlighting for code: `ts {1|3-4|all}`
84- Progressive reveal with `<VClicks>` (max 4 items)
85
86**Don't:**
87- Bullet lists explaining processes → use flowchart
88- Paragraphs about architecture → use diagram
89- Full sentences on slides → use 2-3 word phrases
90- Diagram + long explanation → diagram + title only
91
92## Example Transformation
93
94**Input:** "When a user logs in, the frontend sends credentials to the auth service, which validates them against the database and returns a JWT token."
95
96**Output:**
97```markdown
98# Login Flow
99
100```mermaid
101sequenceDiagram
102 participant F as Frontend
103 participant A as Auth Service
104 participant D as Database
105 F->>A: POST /login
106 A->>D: Validate
107 D-->>A: User found
108 A-->>F: {token}
109```
110```
111
112No bullet points. The diagram IS the explanation.
majiayu000