An open-source, developer-focused presentation builder powered by Vite, Vue, and Markdown.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install antfu-slidev
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install antfu-slidev using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Slidev?
Slidev is a revolutionary presentation tool designed specifically for developers and technical presenters. By leveraging Vite and Vue 3, it allows you to write slides in plain Markdown while enjoying full support for embedded HTML, Vue components, and CSS styles. This integration represents a major component within Openclaw Skills, giving users the power to construct beautiful presentations seamlessly. With its developer-first mindset, you get rich code formatting out of the box, interactive playgrounds, live syntax highlighting, and responsive preview modes.
Instead of struggling with heavy graphical UI editors, Slidev lets you version control your slide decks via Git, collaborate naturally, and compile everything down to a high-performance single-page application (SPA). When integrating this into your automated toolchains using Openclaw Skills, developers can rapidly prototype decks, generate code walkthroughs, and orchestrate technical presentation content directly from code repositories.
Slidev Use Cases
- Creating developer-centric slides with syntax-highlighted code blocks and live animations.
- Building interactive technical presentations featuring real-time code execution with Monaco editor.
- Writing complex developer guides and workshop materials embedded with LaTeX mathematical symbols and Mermaid/PlantUML diagrams.
- Exporting high-fidelity presentations to PDF or PPTX formats for offline sharing or conference distribution.
- Hosting slidedecks as static websites/SPAs directly via continuous integration (CI) workflows, perfect when automating web deployments through Openclaw Skills.
How Slidev Works
- Markdown Compilation: The tool parses a single slide markdown file where slides are cleanly demarcated using triple dashes (
---). - Frontmatter Configuration: Slidev reads global headmatter configurations and slide-specific frontmatter attributes to dynamically set layouts, themes, transitions, and SEO tags.
- Vue & Vite Rendering: Slide elements, standard markdown structures, custom Vue components, and scoped styles are compiled instantly through Vite to run on a local development server.
- Interactive Overlays: The engine mounts runtime utilities like click animations (
v-click), drawings, draggable elements, and Monaco-run editors directly on top of the DOM slides. - Asset Distribution: On demand, the build system compiles the deck into an optimized single-page application or renders it to static assets (PDF, PNG, PPTX) using headless Chromium drivers.
Slidev Setup
Setting up Slidev within your developer workspace is straightforward. Integrate this powerful presentation builder with other Openclaw Skills. Use the following commands to initialize and configure your first presentation:
# Create a new presentation project
pnpm create slidev
# Start the local development server (typically opens at http://localhost:3030)
pnpm run dev
# Build a static SPA ready for hosting
pnpm run build
# Install the necessary headless browser engine for export operations
pnpm add -D playwright-chromium
# Export the markdown-based deck into a PDF
pnpm run export
Verify that the dev server correctly initializes, and ensure playwright-chromium is installed to support PDF and PPTX compilation workflows.
Slidev Data Schema & Taxonomy
Slidev stores its deck structure and parameters logically inside markdown formatting. The syntax balances global settings, per-slide attributes, and native components:
| Data Component | Syntax Example | Purpose |
|---|---|---|
| Headmatter | theme: default\ntitle: Overview |
Declares global presentation configurations on the very first slide block. |
| Frontmatter | layout: two-cols\ntransition: slide-left |
Specific configurations defined at the start of individual slides. |
| Slide Separator | --- |
Syntactic marker defining slide boundaries. |
| Presenter Notes | <!-- Presenter notes go here --> |
Embedded HTML comments compiled into the presenter mode screen. |
| Interactive Blocks | \``ts {monaco-run}\n...\n```` |
Instantiates embedded executable code playgrounds inside the slide schema. |
Using this structural model, Openclaw Skills processes your presentation source files to generate clean slide pipelines automatically.
Slidev Advanced Features
- Magic Move Code Transitions: Animate complex code refactoring steps smoothly across slide transitions with zero-config code morphing.
- Direct Workspace File Writing: Leverage Monaco Write configurations to directly update workspace files (
<<< ./file.ts {monaco-write}) from the active slide interface. - Slide Navigation API & Hooks: Programmatically steer presentation state using navigation primitives like
$navor custom lifecycle hooks (onSlideEnter,onSlideLeave). - Bi-directional Remote Controls: Broadcast and control presentations remotely using standard networking configurations (
slidev --remote) synchronized across active screens. - Global Structural Layouts: Declare continuous persistent visual elements above and below slides using customizable
global-top.vueandglobal-bottom.vuetemplates.
SKILL.md
Loading
Related Openclaw Skills
Skill Merger
A specialized utility to analyze, consolidate, and optimize multiple agent skills into a single, unified super-skill without functional loss.
Career Path Advisor
An AI-powered career agent that analyzes your current skills, benchmarks them against live market job demands, and designs personalized learning roadmaps.
Web Design Guidelines
An automated UI and accessibility review tool that audits your web interface code against live, fetched design guidelines.
VueUse Functions Skill
A specialized AI skill designed to automatically map requirements and apply optimal VueUse composables in Vue.js and Nuxt projects.
mac-gui-control
A robust macOS GUI control skill that enables AI agents to interact with desktops through screenshots, AppleScript, keyboard/mouse emulation, and template matching.
AI Tool Tutorial Generator
Automatically search, aggregate, and generate beautiful, interactive HTML software tutorials and learning roadmaps from top web resources.
Featured*
