Slidev Presentations Skill for Claude Code

A comprehensive AI skill that enables Claude Code to generate production-quality developer presentations using Slidev (v52+).

Given a topic, audience, and duration, this skill produces complete slides.md files with layouts, animations, code highlighting, diagrams, themes, and speaker notes -- ready to run with bun run dev.

What It Does

Generates complete Slidev slide decks from natural language descriptions
Converts content (blog posts, READMEs, docs) into polished presentations
Supports conference talks, lightning talks, and hands-on workshops
Applies best practices: progressive disclosure, visual variety, one idea per slide

Features Covered

Core (in `main.md` -- always loaded)

Category	Features
Layouts	All 19 built-in layouts (cover, intro, section, two-cols, image, quote, fact, statement, etc.)
Animations	v-click, v-after, v-clicks (with depth), v-switch, v-motion, v-mark (rough markers), click positioning
Code	Syntax highlighting, line highlighting, Magic Move, Monaco editor, Monaco Run, TwoSlash, code import, code groups
Styling	UnoCSS utilities, MDC syntax, scoped CSS, custom fonts, 200+ icon sets via Iconify
Diagrams	Mermaid, LaTeX/KaTeX, PlantUML
Components	14 built-in components (Arrow, AutoFitText, Link, RenderWhen, SlidevVideo, Toc, Transform, Tweet, VDrag, YouTube, etc.)
Configuration	Full headmatter reference, per-slide frontmatter, transitions (7 built-in + custom)
CLI	`slidev dev`, `slidev build`, `slidev export`, `slidev format`, `slidev theme eject`
Interactive	Drawing mode, draggable elements (`v-drag`), slide lifecycle hooks
Templates	3 starter structures: tech talk (20-30 min), lightning talk (5-10 min), workshop (60+ min)

Advanced (in `references/` -- loaded on demand)

File	Content
`custom-layouts.md`	Custom Vue layout creation, slots, inheritance
`custom-transitions.md`	Custom CSS transitions, direction styles, animation classes
`setup-files.md`	Shiki, Monaco, Mermaid, KaTeX, shortcuts, Vite plugin configs
`theming.md`	Theme creation, ejection, CSS variables, publishing
`deployment.md`	GitHub Pages, Netlify, Vercel, Docker deploy configs
`vue-components.md`	Custom components, composables, `$nav` API, global layers
`presenter-tools.md`	Recording, camera, remote control, timer, drawing

Directory Structure

slidev/
├── skill.yaml                          # Skill definition (triggers, targets, metadata)
├── SKILL.md                            # Compiled skill output (auto-generated)
├── SLIDEV-COMPLETE-REFERENCE.md        # Full Slidev v52 reference (source material)
├── impl/
│   └── prompts/
│       └── main.md                     # Core skill prompt (989 lines)
└── references/
    ├── custom-layouts.md               # Custom Vue layout creation
    ├── custom-transitions.md           # Custom CSS transitions
    ├── deployment.md                   # Platform deploy configs
    ├── presenter-tools.md              # Presenter workflow features
    ├── setup-files.md                  # Setup file configurations
    ├── theming.md                      # Theme customization
    └── vue-components.md               # Components & composables

File Roles

File	Purpose	Size
`skill.yaml`	Skill metadata, triggers, and target configuration	68 lines
`impl/prompts/main.md`	Core instructions loaded into every invocation	989 lines
`references/*.md`	Deep-dive docs loaded on demand for advanced features	1,346 lines total
`SKILL.md`	Compiled output (main.md + frontmatter, auto-generated by sync)	1,004 lines
`SLIDEV-COMPLETE-REFERENCE.md`	Exhaustive Slidev v52 reference used as source material	2,385 lines

Usage with Claude Code

With the Agent Sync System

If you use the agents sync framework:

# Clone into your skills directory
cp -r slidev/ ~/agents/skills/slidev-presentations/
 
# Sync to Claude Code
cd ~/agents && agents sync claude-code

Manual Installation

Copy the skill files to Claude Code's skills directory:

# Create the skill directory
mkdir -p ~/.claude/skills/slidev-presentations/references
 
# Copy the compiled skill
cp SKILL.md ~/.claude/skills/slidev-presentations/
 
# Copy reference files
cp references/*.md ~/.claude/skills/slidev-presentations/references/

Invocation

Once installed, the skill activates automatically when you mention presentations, slides, or Slidev. You can also invoke it directly:

/slidev

Then describe what you need:

Create a 15-minute tech talk about React Server Components
for a frontend meetup audience. Include code examples and diagrams.

Example Output

The skill generates a complete slides.md file like:

---
theme: seriph
title: React Server Components
info: A deep dive into RSC architecture
author: Your Name
transition: slide-left
mdc: true
---

With slides using appropriate layouts, v-click animations, code highlighting, Mermaid diagrams, and speaker notes.

Slidev Compatibility

Target version: Slidev v52.11.5+
Runtime: Bun (recommended) or Node.js
Themes: Any npm Slidev theme (seriph, apple-basic, dracula, etc.)

Architecture

This skill follows a modular references pattern:

main.md (~1,000 lines) covers everything needed to generate standard presentations. It's compiled into SKILL.md and loaded into the AI's context on every invocation.
references/ (7 files, ~1,350 lines) provide deep-dive documentation for advanced features. They're available on demand when the AI needs custom layouts, deployment configs, theme creation, etc.

This balances context efficiency (not loading 2,300+ lines for every request) with comprehensive coverage (advanced features accessible when needed).

Contributing

Edit files in impl/prompts/ or references/
Keep main.md under 1,000 lines (context budget)
Reference files should be standalone and self-contained
Run sync to regenerate SKILL.md: cd ~/agents && agents sync claude-code

License

MIT