dev-slides

Generate Slidev markdown presentations with code examples, diagrams, and Vue components.

1|Updated May 18, 2026
One-click install
npx skills add https://github.com/hmzainjamil/claude-office-skills --skill dev-slides-hmzainjamil
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: dev-slides
Source: https://github.com/hmzainjamil/claude-office-skills/tree/main/dev-slides
Command: npx skills add https://github.com/hmzainjamil/claude-office-skills --skill dev-slides-hmzainjamil

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you create developer-focused presentations without wrestling with slide formatting, inconsistent layouts, or manual presentation tooling.

Core Features & Use Cases

  • Slidev-Based Authoring: Generate presentations in Markdown with support for themes, layouts, separators, and frontmatter.
  • Technical Content Support: Include code blocks, live code demos, Mermaid diagrams, and Vue components for workshops and engineering talks.
  • Presentation Scenarios: Build product demos, onboarding decks, architecture overviews, API workshops, and conference talks with interactive elements.

Quick Start

Create a Slidev presentation markdown file for a technical talk about our new API, including an intro slide, a two-column feature slide, and a final Q&A slide.

Frequently Asked Questions about dev-slides

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create developer presentations in markdown without manual formatting?

You can create developer presentations by authoring Slidev markdown that includes frontmatter, slide separators, layouts, and presentation syntax to generate technical talk decks automatically without manual formatting.

Can I include code examples and live demos in a Slidev presentation?

Slidev presentations support technical content including code blocks, live code demos, and Vue components, allowing you to build interactive engineering talks and workshop decks directly in markdown.

How do I add Mermaid diagrams to a markdown presentation for architecture overviews?

Markdown presentations support Mermaid diagrams natively, enabling you to embed architecture overviews and technical diagrams directly into your Slidev deck alongside code examples and text content.

What's the best way to build an API workshop deck with interactive elements?

Building an API workshop deck with Slidev lets you combine two-column layouts, live code demos, and Vue components in markdown, producing interactive presentation content tailored for engineering communication.

Does Slidev support custom themes and layouts for conference talks?

Slidev markdown supports custom themes, multiple layouts, frontmatter configuration, and animations, providing the structural variety needed for professional conference talks and product demos.

Why use markdown-based slides instead of traditional presentation tools for technical talks?

Markdown-based slides let developers version control presentation content, embed runnable code, and integrate Vue components and Mermaid diagrams, solving the formatting and tooling inconsistencies common in engineering presentations.