ReddRadar
Agent skill
slidev
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. Also trigger when the user mentions Slidev, sli.dev, slide decks with code, or wants to create developer-facing presentations.
Install this agent skill to your Project
npx add-skill https://github.com/geggo98/dotfiles/tree/main/modules/ai/_files/skills/slidev
SKILL.md
Slidev - 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
bun create slidev # Create project
bun run build # Build static SPA
bun run export # Export to PDF (requires playwright-chromium)
Dev Server (always use tmux skill)
Start the Slidev dev server using the tmux skill (Skill(tmux)) and its claude-tmux.sh wrapper — never use raw tmux commands with variable expansion.
IMPORTANT: Always specify --port explicitly (e.g. --port 3030). Without it, Slidev auto-picks a free port in 3030–4000, making it hard to find the server later. See port-detection for details.
If the port was forgotten, run ./scripts/find-slidev-port.sh to scan for running Slidev instances.
# Start dev server in a tmux session (always pass --port!)
./scripts/claude-tmux.sh new -s claude-slidev -c 'bun run dev -- --port 3030'
# Show the user how to monitor it
./scripts/claude-tmux.sh attach
# Wait for the server to be ready
./scripts/claude-tmux.sh wait -p 'localhost:3030' -T 30
Verify: After the dev server is ready, confirm slides load at http://localhost:3030 with the browser-use skill. After bun run export, check the output PDF exists in the project root.
Debugging: Use Playwright for debugging issues with individual slides. It's much faster and more reliable than browser-use. Always place test scripts and screenshots in ./playwright-tests/ within the project directory (never in /tmp).
IMPORTANT: Use the Write tool to create scripts and the .gitignore — never use cat <<HEREDOC, shell redirects, or echo to write files (these trigger sandbox security warnings). Run scripts with bun run playwright-tests/script.ts or bunx playwright test.
On first use, create playwright-tests/.gitignore via the Write tool with content: *\n!.gitignore
Then write scripts like playwright-tests/debug-slide-5.ts via the Write tool and run them with bun run. Screenshots land in playwright-tests/ as well. Users can git add -f individual files they want to keep.
Cleanup: When done, kill the session: ./scripts/claude-tmux.sh kill -s claude-slidev.
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 |
| Testing | E2E testing with Playwright | testing-playwright |
| Port Detection | How Slidev picks ports, finding running instances | port-detection |
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 |
| Dark/Light mode | dark:, useDarkMode(), colorSchema |
style-dark-light-mode |
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: bun 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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
geggo98/dotfiles
eval-notebook
Execute .ipynb notebooks (Python, Kotlin, or any Jupyter kernel) without overwriting; return LLM-friendly JSON with outputs and errors. Use when you need to run or validate a Jupyter notebook.
geggo98/dotfiles
nix-shell
Search Nix packages and run commands with packages from nixpkgs that are not installed locally. Use when you need a package not available locally or want to search nixpkgs.
geggo98/dotfiles
tmux
Remote control tmux sessions for interactive CLIs (python, gdb, etc.) by sending keystrokes and scraping pane output.
geggo98/dotfiles
diagram-render
Render PlantUML (@startuml…@enduml) and Mermaid fenced blocks to a self-contained HTML preview; if rendering fails, the error text must be embedded in the output image. Use when the user asks to render, preview, or export diagrams.
geggo98/dotfiles
adr-writing
Use when documenting significant architectural decisions. Creates focused ADRs explaining context, decision, and alternatives. Prevents vague documentation and implementation detail bloat. Triggers: 'create ADR', 'document decision', making technology/framework/persistence/auth choices, cross-cutting concerns.
geggo98/dotfiles
writing-clearly-and-concisely
Use when writing documentation, commit messages, error text, explanations, reports, or summaries. Applies Strunk's principles for clear, vigorous prose. Triggers: writing human-readable content, verbose text, unclear explanations.
Didn't find tool you were looking for?