Slidev Agent Skill
Create and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, code walkthroughs, teaching materials, or developer decks.
Install
one command, takes just this skill from the repositorynpx skills add https://github.com/antfu/skills --skill slidevThe instruction itself
17 sections, as written by the authorSlidev - Presentation Slides for Developers
Web-based slides maker built on Vite, Vue, and Markdown.
When to Use
- Technical presentations or slidedecks with live code examples
- Syntax-highlighted code snippets with animations
- Interactive demos (Monaco editor, runnable code)
- Mathematical equations (LaTeX) or diagrams (Mermaid, PlantUML)
- Record presentations with presenter notes
- Export to PDF, PPTX, or host as SPA
- Code walkthroughs for developer talks or workshops
Quick Start
pnpm create slidev # Create project
pnpm run dev # Start dev server (opens http://localhost:3030)
pnpm run build # Build static SPA
pnpm run export # Export to PDF (requires playwright-chromium)
Verify: After pnpm run dev, confirm slides load at http://localhost:3030. After pnpm run export, check the output PDF exists in the project root.
Basic Syntax
---
theme: default
title: My Presentation
---
# First Slide
Content here
---
# Second Slide
More content
<!--
Presenter notes go here
-->
---separates slides- First frontmatter = headmatter (deck config)
- HTML comments = presenter notes
Core References
| Topic | Description | Reference |
|-------|-------------|-----------|
| Markdown Syntax | Slide separators, frontmatter, notes, code blocks | core-syntax |
| Animations | v-click, v-clicks, motion, transitions | core-animations |
| Headmatter | Deck-wide configuration options | core-headmatter |
| Frontmatter | Per-slide configuration options | core-frontmatter |
| CLI Commands | Dev, build, export, theme commands | core-cli |
| Components | Built-in Vue components | core-components |
| Layouts | Built-in slide layouts | core-layouts |
| Exporting | PDF, PPTX, PNG export options | core-exporting |
| Hosting | Build and deploy to various platforms | core-hosting |
| Global Context | $nav, $slidev, composables API | core-global-context |
Feature Reference
Code & Editor
| Feature | Usage | Reference |
|---------|-------|-----------|
| Line highlighting | ts {2,3} ` | code-line-highlighting |
| Click-based highlighting | ts {1\|2-3\|all} ` | code-line-highlighting |
| Line numbers | lineNumbers: true or {lines:true} | code-line-numbers |
| Scrollable code | {maxHeight:'100px'} | code-max-height |
| Code tabs | ::code-group (requires comark: true) | code-groups |
| Monaco editor | ts {monaco} ` | editor-monaco |
| Run code | ts {monaco-run} ` | editor-monaco-run |
| Edit files | <<< ./file.ts {monaco-write} | editor-monaco-write |
| Code animations | md magic-move | code-magic-move |
| TypeScript types | ts twoslash ` | code-twoslash |
| Import code | <<< @/snippets/file.js | code-import-snippet |
Diagrams & Math
| Feature | Usage | Reference |
|---------|-------|-----------|
| Mermaid diagrams | mermaid ` | diagram-mermaid |
| PlantUML diagrams | plantuml ` | diagram-plantuml |
| LaTeX math | $inline$ or $$block$$ | diagram-latex |
Layout & Styling
| Feature | Usage | Reference |
|---------|-------|-----------|
| Canvas size | canvasWidth, aspectRatio | layout-canvas-size |
| Zoom slide | zoom: 0.8 | layout-zoom |
| Scale elements | <Transform :scale="0.5"> | layout-transform |
| Layout slots | ::right::, ::default:: | layout-slots |
| Scoped CSS | <style> in slide | style-scoped |
| Global layers | global-top.vue, global-bottom.vue | layout-global-layers |
| Draggable elements | v-drag, <v-drag> | layout-draggable |
| Icons | <mdi-icon-name /> | style-icons |
Animation & Interaction
| Feature | Usage | Reference |
|---------|-------|-----------|
| Click animations | v-click, <v-clicks> | core-animations |
| Rough markers | v-mark.underline, v-mark.circle | animation-rough-marker |
| Drawing mode | Press C or config drawings: | animation-drawing |
| Direction styles | forward:delay-300 | style-direction |
| Note highlighting | click] in notes | [animation-click-marker |
Syntax Extensions
| Feature | Usage | Reference |
|---------|-------|-----------|
| Comark syntax | comark: true + {style="color:red"} | syntax-comark |
| Block frontmatter | yaml instead of ---` | syntax-block-frontmatter |
| Import slides | src: ./other.md | syntax-importing-slides |
| Merge frontmatter | Main entry wins | syntax-frontmatter-merging |
Presenter & Recording
| Feature | Usage | Reference |
|---------|-------|-----------|
| Recording | Press G for camera | presenter-recording |
| Timer | duration: 30min, timer: countdown | presenter-timer |
| Remote control | slidev --remote | presenter-remote |
| Ruby text | notesAutoRuby: | presenter-notes-ruby |
Export & Build
| Feature | Usage | Reference |
|---------|-------|-----------|
| Export options | slidev export | core-exporting |
| Build & deploy | slidev build | core-hosting |
| Build with PDF | download: true | build-pdf |
| Cache images | Automatic for remote URLs | build-remote-assets |
| OG image | seoMeta.ogImage or og-image.png | build-og-image |
| SEO tags | seoMeta: | build-seo-meta |
Export prerequisite: pnpm add -D playwright-chromium is required for PDF/PPTX/PNG export. If export fails with a browser error, install this dependency first.
Editor & Tools
| Feature | Usage | Reference |
|---------|-------|-----------|
| Side editor | Click edit icon | editor-side |
| VS Code extension | Install antfu.slidev | editor-vscode |
| Prettier | prettier-plugin-slidev | editor-prettier |
| Eject theme | slidev theme eject | tool-eject-theme |
Lifecycle & API
| Feature | Usage | Reference |
|---------|-------|-----------|
| Slide hooks | onSlideEnter(), onSlideLeave() | api-slide-hooks |
| Navigation API | $nav, useNav() | core-global-context |
Common Layouts
| Layout | Purpose |
|--------|---------|
| cover | Title/cover slide |
| center | Centered content |
| default | Standard slide |
| two-cols | Two columns (use ::right::) |
| two-cols-header | Header + two columns |
| image / image-left / image-right | Image layouts |
| iframe / iframe-left / iframe-right | Embed URLs |
| quote | Quotation |
| section | Section divider |
| fact / statement | Data/statement display |
| intro / end | Intro/end slides |
Resources
- Documentation: https://sli.dev
- Theme Gallery: https://sli.dev/resources/theme-gallery
- Showcases: https://sli.dev/resources/showcases
Other skills for the same job
different authors, same section of the catalogue
Generate breadboard circuit mockups and visual diagrams using HTML5 Canvas drawing techniques. Use when asked to create circuit layouts, visualize electronic component placements, draw breadboard diagrams, mockup 6502 builds, generate retro computer schematics, or design vintage electronics projects. Supports 555 timers, W65C02S microprocessors, 28C256 EEPROMs, W65C22 VIA chips, 7400-series logic gates, LEDs, resistors, capacitors, switches, buttons, crystals, and wires.
> Use when a HyperFrames composition needs seek-safe 2D/3D keyframes, GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics. Don't use for broad scene strategy, brand design, media sourcing, captions, or general video planning.
Analyze images, websites, and Figma files to extract their design and generate a `design.md` with token system, component inventory, and reconstruction notes. Use this skill whenever the user wants to understand, document, replicate, or audit the design of something visual: a screenshot, a URL, a Figma link, a Pinterest reference, a mockup, a competitor's site, a component, a dashboard, a landing page. Also when they ask 'extract the design system from X', 'document the style of Y', 'analyze this visually', 'convert this image into tokens', 'help me replicate this design', 'what palette does this site use', 'how is this built'. Also for single elements: 'copy this navbar', 'recreate this illustration', 'give me a prompt to regenerate this graphic' — element mode outputs a focused element.md, with token-grounded image-model prompts when the element is visual art. If the user brings any visual source and wants to understand it at a design level — this skill should activate.
Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional logo concepting, refined composition, sparse typography, strong symbolic meaning, premium mockups, art-directed imagery, and flexible grid layouts.
Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, strong multi-screen consistency, controlled color palettes, non-generic creative direction, textured surfaces, image-led composition, tasteful custom iconography, and clean phone mockup framing. By default, screens should be shown inside a subtle premium iPhone or similar phone mockup with a visible frame, while the main focus stays on the app content itself. This skill generates images only. It does not write code.
Optimize web performance: bundle size, images, caching, lazy loading, and overall page speed. Use when site is slow, reducing bundle size, fixing layout shifts, improving Time to Interactive, or optimizing for Lighthouse scores. Triggers on: web performance, bundle size, page speed, slow site, lazy loading. Do NOT use for Core Web Vitals-specific fixes (use core-web-vitals), running Lighthouse audits (use perf-lighthouse), or Astro-specific optimization (use perf-astro).
| Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional logo concepting, refined composition, sparse typography, strong symbolic meaning, premium mockups, art-directed imagery, and flexible grid layouts.
| Official GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps.
How to use it
Take antfu/slidev from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.
The instructions reference pnpm.
Without those the skill loads but fails at the first command.