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.

View SKILL.md on GitHub Repository
Stars 1,878
Forks 294

Install this agent skill to your Project

npx add-skill https://github.com/LeoYeAI/openclaw-master-skills/tree/main/skills/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

bash
pnpm create slidev    # Create project
pnpm run dev          # Start dev server
pnpm run export       # Export to PDF

Basic Syntax

md
---
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

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

LeoYeAI/openclaw-master-skills

audit-website

Audit websites for SEO, performance, security, technical, content, and 15 other issue cateories with 230+ rules using the squirrelscan CLI. Returns LLM-optimized reports with health scores, broken links, meta tag analysis, and actionable recommendations. Use to discover and asses website or webapp issues and health.

1,878 294
Explore
LeoYeAI/openclaw-master-skills

firecrawl

Web search and scraping via Firecrawl API. Use when you need to search the web, scrape websites (including JS-heavy pages), crawl entire sites, or extract structured data from web pages. Requires FIRECRAWL_API_KEY environment variable.

1,878 294
Explore
LeoYeAI/openclaw-master-skills

computer-use

Full desktop computer use for headless Linux servers. Xvfb + XFCE virtual desktop with xdotool automation. 17 actions (click, type, scroll, screenshot, drag, etc). Unlike OpenClaw's browser tool, operates at the X11 level so websites cannot detect automation. Includes VNC for live viewing.

1,878 294
Explore
LeoYeAI/openclaw-master-skills

social-media-analyzer

Social media campaign analysis and performance tracking. Calculates engagement rates, ROI, and benchmarks across platforms. Use for analyzing social media performance, calculating engagement rate, measuring campaign ROI, comparing platform metrics, or benchmarking against industry standards.

1,878 294
Explore
LeoYeAI/openclaw-master-skills

business-growth-skills

4 production-ready business and growth skills: customer success manager with health scoring and churn prediction, sales engineer with RFP analysis, revenue operations with pipeline and GTM metrics, and contract & proposal writer. Python tools included (all stdlib-only). Works with Claude Code, Codex CLI, and OpenClaw.

1,878 294
Explore
LeoYeAI/openclaw-master-skills

contract-and-proposal-writer

Contract & Proposal Writer

1,878 294
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results