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:

Frame presentation scope - Set duration, audience, and calculate target slide count
Interactive brainstorming - Web research and local file analysis
Structured outline with validation
Modular slide generation with enforced quality limits
Visual enhancement with diagrams and images
Presenter notes generation
LaTeX handout with prose explanations and research links
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 lo

...

rhuss/cc-slidev

README