Developer Presentation Builder
Create developer-focused presentations with live code demos and diagrams using Slidev.
PowerPoint can't syntax-highlight code, Google Slides screenshots look terrible at any zoom level, and your live demo will absolutely crash during the talk. You need slides that treat code as a first-class citizen.
Who it's for: developers presenting at meetups or conferences, tech leads running architecture reviews, engineering managers giving team demos, developer advocates creating technical content, educators teaching programming
Example
"Build a presentation about our new microservices architecture" → Slidev deck with syntax-highlighted code examples, live-editable demos, Mermaid architecture diagrams, and speaker notes — all version-controlled in markdown
CLAUDE.md Template
New here? 3-minute setup guide → | Already set up? Copy the template below.
npx ccplaybooks add dev-slides# Developer Slides
## Overview
This workflow enables creation of developer-focused presentations using **Slidev** - a Vue-powered presentation framework. Write slides in Markdown with live code demos, diagrams, and components.
## How to Use
1. Describe your technical presentation needs
2. I'll generate Slidev markdown with proper syntax
3. Includes code blocks, diagrams, and Vue components
Get new playbooks like this one
One email a week with new Claude Code workflows. Free, like everything here.
No spam. Unsubscribe anytime.
What This Does
This workflow enables creation of developer-focused presentations using Slidev - a Vue-powered presentation framework. Write slides in Markdown with live code demos, diagrams, and components.
Quick Start
Step 1: Create a Project Folder
mkdir -p ~/Documents/DevSlides
Step 2: Download the Template
Click Download above, then:
mv ~/Downloads/CLAUDE.md ~/Documents/DevSlides/
Step 3: Start Working
cd ~/Documents/DevSlides
claude
How to Use
- Describe your technical presentation needs
- I'll generate Slidev markdown with proper syntax
- Includes code blocks, diagrams, and Vue components
Example prompts:
- "Create a Vue.js workshop presentation"
- "Build slides with live code execution"
- "Make a technical talk with diagrams"
- "Create developer onboarding slides"
Examples
Example: API Workshop
---
theme: seriph
background: https://source.unsplash.com/collection/94734566/1920x1080
class: text-center
---
# REST API Workshop
Building Modern APIs with Node.js
<div class="pt-12">
<span @click="$slidev.nav.next" class="px-2 py-1 rounded cursor-pointer">
Press Space for next page <carbon:arrow-right />
</span>
</div>
---
layout: two-cols
---
# What We'll Cover
<v-clicks>
- RESTful principles
- Express.js basics
- Authentication
- Error handling
- Testing
</v-clicks>
::right::
\`\`\`ts
// Preview
const app = express()
app.get('/api/users', getUsers)
app.listen(3000)
\`\`\`
---
# Live Demo
\`\`\`ts {monaco-run}
const users = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' }
]
console.log(JSON.stringify(users, null, 2))
\`\`\`
---
layout: center
---
# Questions?
[GitHub](https://github.com) · [Documentation](https://docs.example.com)
Installation
npm init slidev@latest