# Slidev Presentations Skill for Claude Code

A comprehensive AI skill that enables [Claude Code](https://claude.ai/code) to generate production-quality developer presentations using [Slidev](https://sli.dev) (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`](references/custom-layouts.md)         | Custom Vue layout creation, slots, inheritance                |
| [`custom-transitions.md`](references/custom-transitions.md) | Custom CSS transitions, direction styles, animation classes   |
| [`setup-files.md`](references/setup-files.md)               | Shiki, Monaco, Mermaid, KaTeX, shortcuts, Vite plugin configs |
| [`theming.md`](references/theming.md)                       | Theme creation, ejection, CSS variables, publishing           |
| [`deployment.md`](references/deployment.md)                 | GitHub Pages, Netlify, Vercel, Docker deploy configs          |
| [`vue-components.md`](references/vue-components.md)         | Custom components, composables, `$nav` API, global layers     |
| [`presenter-tools.md`](references/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](https://github.com/duhman) framework:

```bash
# 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:

```bash
# 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:

```yaml
---
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

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

## License

MIT