Slidev
Install when you want your agent to author Slidev decks with correct markdown frontmatter, code slides, animations, and export settings instead of guessing sli.dev syntax.
Overview
Slidev is an agent skill for the Build phase that teaches your coding agent Slidev presentation syntax, layouts, animations, and export options.
Install
npx skills add https://github.com/slidevjs/slidev --skill slidevWhat is this skill?
- Covers core Slidev markdown: slide separators, per-slide frontmatter, and theme hooks
- Code slides: Monaco editor, line highlighting, code groups, and magic-move transitions
- Animations: click steps, transitions, and motion patterns for progressive disclosure
- Diagrams and math: Mermaid, PlantUML, and LaTeX blocks inside slides
- Layouts, slots, global layers, presenter mode, and export to PDF, PPTX, PNG, or SPA
- Covers seven Slidev knowledge areas: core syntax, animations, code, diagrams, layouts, presenter mode, and exporting
Adoption & trust: 6.7k installs on skills.sh; 47k GitHub stars; 2/3 security scanners passed (skills.sh audits); trending (+100% hot-view momentum).
What problem does it solve?
You want developer-quality slides in Git, but your agent invents wrong frontmatter, breaks code highlighting, or omits export and presenter settings.
Who is it for?
Indie devs shipping talks, workshop materials, or internal product decks as version-controlled Slidev projects.
Skip if: Teams standardizing on PowerPoint or Google Slides only, or builders who need automated slide design without Markdown.
When should I use this skill?
Creating Slidev presentations, adding slides with code, animations, themes, layouts, or export configuration.
What do I get? / Deliverables
You get valid Slidev markdown decks with the layouts, animations, and export configuration you asked for, ready to run in the Slidev CLI.
- Slidev markdown slides with frontmatter
- Animation and layout configuration
- Export-oriented deck settings
Recommended Skills
Journey fit
Technical talks, onboarding decks, and conference slides are product documentation artifacts produced while building and explaining the product. Docs subphase covers presentation-as-code workflows that ship alongside READMEs and internal guides.
How it compares
Skill package for Slidev-as-code—not a generic slideshow MCP or Figma deck generator.
Common Questions / FAQ
Who is slidev for?
Solo builders and small teams who present from the repo using Slidev and want their agent to follow sli.dev patterns for code, diagrams, and export.
When should I use slidev?
Use it in Build (docs) when creating a new deck, adding animated code slides, or configuring PDF export; also when polishing launch or grow content that ships as a recorded talk deck.
Is slidev safe to install?
Treat it like any third-party skill: review the Security Audits panel on this Prism page and inspect the skill bundle before granting agent file access to your presentation repo.
SKILL.md
READMESKILL.md - Slidev
# Slidev Skills for Claude Code Agent skills that help Claude Code understand and work with [Slidev](https://sli.dev) presentations. ## Installation ```bash npx skills add slidevjs/slidev ``` This will add the Slidev skill to your Claude Code configuration. ## What's Included The Slidev skill provides Claude Code with knowledge about: - **Core Syntax** - Markdown syntax, slide separators, frontmatter - **Animations** - Click animations, transitions, motion effects - **Code Features** - Line highlighting, Monaco editor, code groups, magic-move - **Diagrams** - Mermaid, PlantUML, LaTeX math - **Layouts** - Built-in layouts, slots, global layers - **Presenter Mode** - Recording, timer, remote access - **Exporting** - PDF, PPTX, PNG, SPA hosting ## Usage Once installed, Claude Code will automatically use Slidev knowledge when: - Creating new presentations - Adding slides with code examples - Setting up animations and transitions - Configuring themes and layouts - Exporting presentations ### Example Prompts ``` Create a Slidev presentation about TypeScript generics with code examples ``` ``` Add a two-column slide with code on the left and explanation on the right ``` ``` Set up click animations to reveal bullet points one by one ``` ``` Configure the presentation for PDF export with speaker notes ``` ## Documentation - [Slidev Documentation](https://sli.dev) - [Theme Gallery](https://sli.dev/resources/theme-gallery) - [Showcases](https://sli.dev/resources/showcases) ## License MIT --- name: click-marker description: Highlight and auto-scroll presenter notes based on click progress --- # Click Markers Highlight and auto-scroll presenter notes based on click progress. ## Syntax Add `[click]` markers in presenter notes: ```md <!-- Content before the first click [click] This will be highlighted after the first click Also highlighted after the first click - [click] This list element highlights after the second click [click:3] Last click (skip two clicks) --> ``` ## Behavior - Notes between markers highlight in sync with slide progress - Auto-scrolls presenter view to active section - Use `[click:{n}]` to skip to specific click number ## Requirements - Only works in presenter mode - Notes must be HTML comments at end of slide --- name: drawing description: Draw and annotate slides during presentation --- # Drawing & Annotations Draw and annotate slides during presentation. Powered by drauu. ## Enable Drawing Click the pen icon in the navigation bar or press `C`. ## Stylus Support Stylus pens (iPad + Apple Pencil) work automatically - draw with pen, navigate with fingers. ## Persist Drawings Save drawings as SVGs and include in exports: ```md --- drawings: persist: true --- ``` Drawings saved to `.slidev/drawings/`. ## Disable Drawing Entirely: ```md --- drawings: enabled: false --- ``` Only in development: ```md --- drawings: enabled: dev --- ``` Only in presenter mode: ```md --- drawings: presenterOnly: true --- ``` ## Sync Settings Disable sync across instances: ```md --- drawings: syncAll: false --- ``` Only presenter's drawings sync to others. --- name: rough-marker description: Hand-drawn style highlighting using Rough Notation --- # Rough Markers Hand-drawn style highlighting using Rough Notation. ## v-mark Directive ```html <span v-mark>Important text</span> ``` ## Marker Types ```html <span v-mark.underline>Underlined</span> <span v-mark.circle>Circled</span> <span v-mark.highlight>Highlighted</span> <span v-mark.strike-through>Struck through</span> <span v-mark.box>Boxed</span> ``` ## Colors ```html <span v-mark.red>Red marker</span> <span v-mark.blue>Blue marker</span> ``` Custom color: ```html <span v-mark="{ color: '#234' }">Custom color</span> ``` ## Click Timing Works like v-click: ```html <span v-mark="5">Appears on click 5</span> <span v-mark="'+1'">Next click</span> ``` ## Full Options ```html <span v-mark="{ at: 5, color: '#234', type: 'cir