dev-slides

What This Skill Does

The dev-slides skill empowers developers to generate highly professional, technical, and interactive presentation materials using the Slidev framework. Unlike traditional slide software, this skill leverages Markdown to produce Vue-powered presentations. It handles complex technical requirements natively, including live code execution, real-time Monaco editor integration, Mermaid diagrams, and interactive Vue components. By simply describing the technical content or instructional goals, the AI agent generates the appropriate slide structure, frontmatter configurations, and layout syntax, allowing you to focus on content rather than tooling.

Installation

To integrate this skill into your environment, use the OpenClaw package manager: clawhub install openclaw/skills/skills/lijie420461340/dev-slides This installs the necessary dependencies and exposes the generation capability to your agent's command interface.

Use Cases

This skill is ideal for technical writers, software engineers, and developer advocates who need to create:

• Workshop materials with live-coding environments.
• Architecture documentation that includes sequence or flow diagrams.
• Onboarding guides for new engineering team members.
• Conference talks featuring interactive demos and component-based UI displays.
• Technical deep-dives that require syntax highlighting and step-by-step code unveiling.

Example Prompts

1. "Create a technical workshop presentation for React State Management that includes live Monaco editors for users to test patterns."
2. "Build a 10-slide architectural overview of our microservices system. Include Mermaid diagrams for the auth flow and sequence diagrams for database writes."
3. "Generate a developer onboarding presentation. Use a two-column layout for the left side showing setup steps and the right side showing code snippets for shell commands."

Tips & Limitations

• Tip: Use the {monaco-run} tag for live code demos to allow your audience to execute logic directly from the browser window.
• Tip: Utilize v-clicks for complex lists to keep the audience focused on the current talking point.
• Limitation: As this generates Markdown and Vue templates, final output requires a Slidev environment to render. Ensure your hosting infrastructure supports Node.js if you plan to host the slides online.