slidev

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

Via Marketplace (recommended):

# Add the marketplace (once)
/plugin marketplace add rhuss/cc-rhuss-marketplace

# Install the plugin
/plugin install slidev@cc-rhuss-marketplace

From source:

git clone https://github.com/rhuss/cc-slidev.git
cd cc-slidev

# Install plugin via Makefile
make install

# After making changes, reinstall
make reinstall

See CONTRIBUTING.md for the full development workflow.

Complete Workflow Example

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