ReddRadar
Agent skill
slidev
Create and present web-based slides for developers using Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, or teaching materials.
Install this agent skill to your Project
npx add-skill https://github.com/aiskillstore/marketplace/tree/main/skills/antfu/slidev
SKILL.md
Slidev - Presentation Slides for Developers
Web-based slides maker built on Vite, Vue, and Markdown.
When to Use
- Technical presentations 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
Quick Start
pnpm create slidev # Create project
pnpm run dev # Start dev server
pnpm run export # Export to PDF
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 mdc: 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 |
|---|---|---|
| MDC syntax | mdc: true + {style="color:red"} |
syntax-mdc |
| 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 |
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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
aiskillstore/marketplace
perigon-backend
Perigon ASP.NET Core + EF Core + Aspire conventions
aiskillstore/marketplace
perigon-agent
Pointers for Copilot/agents to apply Perigon conventions
aiskillstore/marketplace
perigon-angular
Angular 21+ standalone/Material/signal conventions for Perigon WebApp
aiskillstore/marketplace
fastapi-mastery
Comprehensive FastAPI development skill covering REST API creation, routing, request/response handling, validation, authentication, database integration, middleware, and deployment. Use when working with FastAPI projects, building APIs, implementing CRUD operations, setting up authentication/authorization, integrating databases (SQL/NoSQL), adding middleware, handling WebSockets, or deploying FastAPI applications. Triggered by requests involving .py files with FastAPI code, API endpoint creation, Pydantic models, or FastAPI-specific features.
aiskillstore/marketplace
context7-efficient
Token-efficient library documentation fetcher using Context7 MCP with 86.8% token savings through intelligent shell pipeline filtering. Fetches code examples, API references, and best practices for JavaScript, Python, Go, Rust, and other libraries. Use when users ask about library documentation, need code examples, want API usage patterns, are learning a new framework, need syntax reference, or troubleshooting with library-specific information. Triggers include questions like "Show me React hooks", "How do I use Prisma", "What's the Next.js routing syntax", or any request for library/framework documentation.
aiskillstore/marketplace
browser-use
Browser automation using Playwright MCP. Navigate websites, fill forms, click elements, take screenshots, and extract data. Use when tasks require web browsing, form submission, web scraping, UI testing, or any browser interaction.
Didn't find tool you were looking for?