Slidev Plugin for Claude Code

Create developer-focused technical presentations using Slidev with evidence-based design guardrails

What is this?

A Claude Code plugin for creating technical presentations powered by Slidev - the presentation framework for developers. Specifically designed for tech talks, conference presentations, internal demos, and developer-focused content.

Key differentiator: Evidence-based design principles are enforced as guardrails, not suggestions. The plugin automatically prevents common presentation mistakes through hard limits based on cognitive science research.

Example Presentations

See real-world technical presentations created with this plugin, including source code and PDF exports:

• GPUs on Kubernetes Unlocked - Technical deep-dive on GPU scheduling (PDF)
• Lifting LLMs on K8s - Running large language models on Kubernetes (PDF)

Built on Slidev

Slidev is a web-based presentation tool built for developers. Write your slides in markdown, use Vue components, live code with Monaco editor, and export to PDF/PPTX. This plugin adds intelligent automation, evidence-based guardrails, and complete workflow management on top of Slidev's powerful foundation.

Key Features

🎯 Evidence-Based Design Guardrails (Enforced)

These are not suggestions - they're automatic hard limits based on cognitive science research:

• ≤6 elements per slide - Prevents information overload (Miller's Law: working memory holds 7±2 items)
• <50 words body text - Ensures slides support speech, not replace it
• One idea per slide - Automatically splits dense content into focused slides
• Meaningful assertion titles - "System handles 10K req/sec" not "Results"
• 18pt+ fonts, 4.5:1+ contrast - Accessibility by default, not afterthought
• Colorblind-safe palettes - Blue + Orange default (tested for all types of colorblindness)

When content exceeds limits: The plugin creates additional slides instead of cramming. Quality over convenience.

🛠️ Developer-Focused Features

• Code syntax highlighting - Shiki/Prism integration with 100+ languages
• Live coding - Monaco editor embedded in slides for demos
• Mermaid diagrams - Architecture, flowcharts, sequence diagrams
• Multi-platform diagrams - Auto-generate PlantUML + Excalidraw alternatives
• Modular slide files - 01-title.md, 02-hook.md etc. in slides/ directory
• Git-friendly - Meaningful diffs, easy collaboration

🔄 Complete Workflow

End-to-end presentation creation:

1. Frame presentation scope - Set duration, audience, and calculate target slide count
2. Interactive brainstorming - Web research and local file analysis
3. Structured outline with validation
4. Modular slide generation with enforced quality limits
5. Visual enhancement with diagrams and images
6. Presenter notes generation
7. LaTeX handout with prose explanations and research links
8. Export to PDF/PPTX/PNG

Prerequisites

Required

• Slidev - The presentation framework this plugin is built on

  npm install -g @slidev/cli

• Node.js (v18 or later)
• npm (comes with Node.js)

Optional

• LaTeX (pdflatex) - For handout generation

  • macOS: brew install --cask mactex-no-gui
  • Ubuntu: sudo apt-get install texlive-latex-base texlive-latex-extra

• mermaid-cli - For high-quality offline diagram rendering

  npm install -g @mermaid-js/mermaid-cli

• excalidraw-brute-export-cli - For Excalidraw diagram rendering (auto-installed on first use)

  npm install -g excalidraw-brute-export-cli
  npx playwright install-deps
  npx playwright install chromium

Installation

# From local directory (development)
cc --plugin-dir /path/to/slidev

# Or copy to plugin directory
cp -r slidev ~/.claude-plugins/

Complete Workflow Example

Here's a full end-to-end workflow for creating a technical presentation:

1. Frame your presentation

/slidev:frame

Set presentation parameters: duration, audience level, and style. The plugin calculates target slide count using research-based timing (90s per slide default).

2. Brainstorm content

/slidev:brainstorm

Interactive Q&A session about your presentation topic. The plugin researches the web, analyzes local files, and extracts key themes within your framing constraints.

3. Create structured outline

/slidev:outline

Generates a structured outline with slide breakdown, validates timing against your framing, and ensures logical flow.

4. Generate modular slides

/slidev:generate

Creates individual slide files in slides/ directory:

presentation/
├── slides.md                    # Master file (slide 1 = title from frontmatter)
├── slides/
│   ├── 02-hook.md              # Slide 2
│   ├── 03-problem-statement.md # Slide 3
│   ├── 04-architecture.md       # Slide 4
│   └── ...

Note: Slide 1 (title) comes from frontmatter in slides.md, so slide files start at 02-.

Each slide is enforced to meet quality standards automatically.

5. Preview with Slidev

/slidev:preview

Opens Slidev dev server at localhost:3030. Press p for presenter mode with notes. Hot reload on file changes.

6. Edit specific slides

/slidev:edit 5

Shows table of contents, current slide content, and quality analysis. Edit individual slide files directly.

7. Enhance with visuals

/slidev:visuals

Analyzes all slides and suggests:

• Mermaid diagrams (flowcharts, sequence, architecture)
• Stock photos (Unsplash integration)
• AI image prompts (DALL-E, Midjourney, Stable Diffusion)

Generates multiple options per slide.

8. Generate comprehensive handout

/slidev:handout

Creates professional LaTeX handout with:

• Embedded slide images (PNG export)
• Prose explanations
• Research links and citations
• Presenter notes

9. Export final presentation

/slidev:export pdf

Exports to PDF, PPTX, or PNG using Slidev's built-in exporters.

Result: Professional technical presentation ready for your conference talk or demo!

File Structure

When you create a presentation, the plugin generates this structure:

introduction-to-kubernetes/
├── slides.md                # Master Slidev file (slide 1 = title from frontmatter)
├── slides/
│   ├── 02-hook.md          # Slide 2 (first slide file)
│   ├── 03-problem.md       # Slide 3
│   ├── 04-kubernetes-architecture.md  # Slide 4
│   ├── 05-benefits.md      # Slide 5
│   └── ...
├── diagrams/                # ALL diagram sources (version controlled)
│   ├── kubernetes-architecture.mmd
│   ├── kubernetes-architecture.puml
│   ├── kubernetes-architecture.excalidraw
│   └── ...
├── presentation-config.md  # Framing parameters (duration, audience, etc.)
├── brainstorm.md           # Research and ideation notes
├── outline.md              # Validated presentation outline
├── handout.tex             # LaTeX handout source
├── handout.pdf             # Compiled handout
├── package.json            # Slidev dependencies
├── public/
│   └── images/             # Rendered diagrams and photos
│       ├── kubernetes-architecture/
│       │   ├── diagram.svg
│       │   ├── diagram-plantuml.svg
│       │   └── diagram-excalidraw.svg
│       └── ...
└── exports/
    ├── slides.pdf
    └── slides.pptx

Modular slides benefits:

• Files ordered in presentation sequence (01-, 02-, etc.)
• Meaningful names for easy navigation
• Individual edits without touching other slides
• Git-friendly collaboration

Diagram organization:

• Sources (diagrams/): Version-controlled, editable (.mmd, .puml, .excalidraw)
• Renders (public/images/): Generated artifacts (.svg, .png), can be regenerated
• NO EXCEPTIONS: All sources MUST be in top-level ./diagrams/ directory

All Commands

| Command | Description | |---------|-------------| | /slidev:init <topic> | Initialize new presentation project (full workflow orchestrator) | | /slidev:frame | Define scope, duration, and slide count targets | | /slidev:brainstorm | Interactive brainstorming with research | | /slidev:outline | Create/revise presentation outline | | /slidev:generate | Generate modular slides from outline | | /slidev:edit <N> | Edit specific slide with context | | /slidev:add <N> | Insert new slide at position N (shifts others back) | | /slidev:delete <N> | Delete slide at position N with renumbering | | /slidev:continue | Resume work on existing presentation | | /slidev:visuals | Add diagrams and images to all slides | | /slidev:diagram <N> | Create diagram for specific slide | | /slidev:notes | Generate/enhance presenter notes | | /slidev:handout | Generate LaTeX handout with slides and prose | | /slidev:preview | Start Slidev dev server | | /slidev:export <format> | Export to PDF, PPTX, PNG | | /slidev:redraw-diagrams | Regenerate diagrams in multiple formats |

Evidence-Based Design Principles

This plugin enforces (not suggests) design principles based on research from:

• MIT Communication Lab
• TED presentation guidelines
• PLOS Computational Biology
• Cognitive load research (Miller's Law)
• Accessibility standards (WCAG 2.1)

See [references/presentation-best-practices.md](references/presentation-be