Slidev Skills
20 AI Agent Skills to create stunning presentations with Slidev.
Syntax, layouts, animations, code highlighting, diagrams — everything you need.
Install •
Skills •
Usage •
Contribute
Quick Install
npx skills add yoanbernabeu/slidev-skills
That's it. Works with Claude Code, Cursor, Codex, OpenCode, Windsurf, and 30+ AI agents.
One-Liners
# Install everything (20 skills)
npx skills add yoanbernabeu/slidev-skills
# Install only code-related skills
npx skills add yoanbernabeu/slidev-skills --skill slidev-code-blocks
# Install globally (available in all projects)
npx skills add yoanbernabeu/slidev-skills -g
# List all available skills
npx skills add yoanbernabeu/slidev-skills --list
# Install to specific agents
npx skills add yoanbernabeu/slidev-skills -a claude-code -a cursor
# Non-interactive (CI/CD friendly)
npx skills add yoanbernabeu/slidev-skills --all -y
Other Installation Methods
Claude Code Plugin
/install-skill yoanbernabeu/slidev-skills
Manual Installation
Copy the skills/ directory to:
- Global:
~/.claude/skills/ (or ~/.cursor/skills/, etc.)
- Project:
.claude/skills/ (or .cursor/skills/, etc.)
Why These Skills?
Creating presentations as a developer can be tedious. PowerPoint feels dated, Google Slides lacks code support, and starting from scratch takes forever. Slidev is the answer — but it has a learning curve. These skills give your AI agent expert-level knowledge of Slidev so you can focus on your content.
| Challenge | Skill That Helps |
|---|
| "How do I start a presentation?" | slidev-quick-start |
| "My code looks ugly" | slidev-code-blocks |
| "I want animated code transitions" | slidev-magic-move |
| "How do I add diagrams?" | slidev-mermaid |
| "I need click animations" | slidev-click-animations |
| "How do I export to PDF?" | slidev-export |
All 20 Skills
Getting Started
| Skill | What It Does |
|---|
slidev-quick-start | Create your first presentation in minutes |
slidev-project-structure | Understand configuration and file organization |
Content Creation
| Skill | What It Does |
|---|
slidev-syntax-guide | Master Slidev's extended Markdown syntax |
slidev-layouts | Use cover, two-cols, image layouts and more |
slidev-components | Add Vue components for interactivity |
Code Presentation
| Skill | What It Does |
|---|
slidev-code-blocks | Beautiful syntax highlighting with Shiki |
slidev-magic-move | Animate code transformations smoothly |
slidev-monaco-editor | Live coding with Monaco Editor |
Visual Content
| Skill | What It Does |
|---|
slidev-mermaid | Create flowcharts, sequence diagrams, etc. |
slidev-plantuml | Professional UML and C4 diagrams |
slidev-latex | Mathematical formulas with KaTeX |
Animations
| Skill | What It Does |
|---|
slidev-click-animations | v-click, v-after, and motion directives |
slidev-transitions | Smooth slide transitions |
Presentation
| Skill | What It Does |
|---|
slidev-presenter-mode | Speaker notes, timer, remote control |
slidev-drawings | Draw and annotate during presentations |
slidev-navigation | Keyboard shortcuts and navigation |
Customization
| Skill | What It Does |
|---|
slidev-themes | Use and customize themes |
slidev-styling | Style with UnoCSS and custom CSS |
Export & Deploy
| Skill | What It Does |
|---|
slidev-export | Export to PDF, PPTX, PNG |
slidev-deployment | Deploy to GitHub Pages, Netlify, Vercel |
Example Usage
Create a Technical Presentation
You: Create a presentation about React hooks using Slidev
AI: [Uses slidev-quick-start to scaffold project]
[Uses slidev-layouts for proper structure]
[Uses slidev-code-blocks for syntax highlighting]
[Uses slidev-magic-move for code evolution]
[Uses slidev-click-animations for progressive reveals]
Add a System Architecture Diagram
You: Add a diagram showing our microservices architecture
'%20stop-opacity%3D'0.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(200%2C90%2C60)'%20stop-opacity%3D'0.03'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'320'%20height%3D'200'%20fill%3D'url(%23g)'%2F%3E%3Ccircle%20cx%3D'250'%20cy%3D'56'%20r%3D'92'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.06'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'172'%20r%3D'58'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.05'%2F%3E%3C%2Fsvg%3E)
