An AI skill for generating interactive, developer-focused presentations using the Slidev framework and Markdown.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install dev-slides
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 dev-slides 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 Developer Slides (dev-slides)?
The dev-slides skill is designed for engineers and educators who need to build high-quality, technical presentations without the friction of traditional slide software. By leveraging Openclaw Skills, users can convert technical descriptions or documentation into Vue-powered Slidev decks that support live code execution, syntax highlighting, and interactive components. This skill simplifies the creation of developer-centric content by automating the structure and syntax of Markdown-based slides, ensuring that your presentations are as functional as they are visually appealing.
Developer Slides (dev-slides) Use Cases
- Creating technical workshops with live code execution via Monaco Editor.
- Building developer onboarding decks that include interactive components.
- Generating architectural talks featuring Mermaid diagrams for system design.
- Rapidly prototyping slide decks for internal engineering demos using Openclaw Skills.
How Developer Slides (dev-slides) Works
- User describes the presentation goals, topic, and required code examples to the agent.
- The skill analyzes the request and generates a Slidev-compatible Markdown file with appropriate frontmatter.
- Openclaw Skills logic organizes the content into layouts like cover, intro, and two-column views.
- Code blocks, Mermaid diagrams, and Vue directives are injected into the slides for rich interactivity.
- The final output is ready to be served or exported via the Slidev CLI.
Developer Slides (dev-slides) Setup
To utilize this skill within your local environment, you first need to initialize a Slidev project. Use the following command in your terminal:
npm init slidev@latest
Once initialized, you can use Openclaw Skills to populate the resulting markdown files with structured technical content.
Developer Slides (dev-slides) Data Schema & Taxonomy
The skill generates and manages data within a primary Markdown structure, typically following this schema:
| Component | Format | Description |
|---|---|---|
| Frontmatter | YAML | Defines themes, highlighters (Shiki), and global CSS settings. |
| Slide Separators | --- |
Delimits horizontal slides within the document. |
| Code Blocks | Markdown/Shiki | Supports line highlighting and live execution with Monaco. |
| Layouts | String | Specifies layouts like image-right, two-cols, or center. |
| Components | Vue/HTML | Custom tags for interactive elements like counters or tweets. |
Developer Slides (dev-slides) Advanced Features
- Support for Monaco-run and Monaco-editor blocks to allow live code editing during talks.
- Built-in Mermaid.js integration for rendering complex sequence and flow diagrams.
- Advanced animation control using v-click and v-clicks directives for step-by-step reveals.
- Seamless theme and plugin management through Openclaw Skills automation.
- Integration with UnoCSS for rapid, utility-first styling within slide content.
SKILL.md
Loading
Related Openclaw Skills
Data Extractor
Extract and structure data from PDFs, Word docs, and emails using unified document processing.
CV Builder
A professional resume generation skill that converts structured YAML data into polished PDF CVs using multiple industry-standard themes.
Chat with PDF
An advanced AI skill for intelligent conversations, data extraction, and automated summarization of PDF documents.
Batch Processor
Process hundreds of documents simultaneously using parallel execution, progress tracking, and resilient checkpointing logic.
Document Parser (Docling)
An advanced document understanding skill powered by IBM's docling for parsing complex layouts, tables, and figures.
DOCX Manipulation
A powerful skill for programmatically creating, editing, and formatting Microsoft Word documents using the python-docx library.
Featured*
