From cf-devtools
Creates Slidev markdown presentations for developers. Activates for: slides with code highlighting, technical talks, conference presentations, workshop materials, live coding decks, or markdown-based slides. Not for PowerPoint/Google Slides or non-presentation documents.
How this skill is triggered — by the user, by Claude, or both
Slash command
/cf-devtools:slidev-presentationsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Generate professional, browser-based presentations using [Slidev](https://sli.dev/) - the presentation framework for developers.
Generate professional, browser-based presentations using Slidev - the presentation framework for developers.
Activate when the user requests:
These prompts should activate this skill:
Do NOT activate for:
Follow the plan-first approach for quality presentations:
1. Gather Context → 2. Create Plan → 3. Review Plan → 4. Generate Slides
| 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 |
A presentation plan includes:
When creating a plan, gather:
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)See the references/ directory for detailed documentation:
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
Slidev's multi-frontmatter syntax conflicts with standard markdown linters. Always ensure a .markdownlint.json exists in the presentation directory before generating slides.
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.
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 |
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
Generate a complete slides.md file that can be run directly with Slidev.
For full syntax details, see references/slidev-quick-reference.md.
---
theme: default
title: My Presentation
transition: slide-left
mdc: true
---
# First Slide
Content here
---
# Second Slide
More content
| 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 |
---
layout: two-cols-header
---
# Header
::left::
Left content
::right::
Right content
```typescript {2,3}
function add(a: number, b: number) {
const sum = a + b // highlighted
return sum // highlighted
}
```
```typescript {1|2|3|all}
const a = 1 // click 1
const b = 2 // click 2
const c = 3 // click 3
```
<!-- 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>
# Slide Title
Content
<!--
Speaker notes here (presenter mode only)
-->
```mermaid
graph TD
A[Start] --> B{Decision}
B -->|Yes| C[Action]
B -->|No| D[End]
```
For advanced functionality, see references/advanced-features.md:
{monaco}, {monaco-run})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.
Guides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.
npx claudepluginhub clearfunction/cf-devtools --plugin cf-devtools