dvcrn Developer Slides Skill
Overview
This skill 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
- 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"
Domain Knowledge
Slidev Basics
---
theme: default
title: My Presentation
---
# Welcome
This is the first slide
---
# Second Slide
Content here
Slide Separators
--- # New horizontal slide
--- # Another slide
layout: center
---
# Centered Content
Layouts
---
layout: cover
---
# Title Slide
---
layout: intro
---
# Introduction
---
layout: center
---
# Centered
---
layout: two-cols
---
# Left
::right::
# Right
---
layout: image-right
image: ./image.png
---
# Content with Image
Code Blocks
# Code Example
\`\`\`ts {all|1|2-3|4}
const name = 'Slidev'
const greeting = \`Hello, \${name}!\`
console.log(greeting)
// Outputs: Hello, Slidev!
\`\`\`
<!-- Lines highlighted step by step -->
Monaco Editor (Live Code)
\`\`\`ts {monaco}
// Editable code block
function add(a: number, b: number) {
return a + b
}
\`\`\`
\`\`\`ts {monaco-run}
// Runnable code
console.log('Hello from Slidev!')
\`\`\`
Diagrams (Mermaid)
\`\`\`mermaid
graph LR
A[Start] --> B{Decision}
B -->|Yes| C[Action 1]
B -->|No| D[Action 2]
\`\`\`
\`\`\`mermaid
sequenceDiagram
Client->>Server: Request
Server-->>Client: Response
\`\`\`
Vue Components
<Counter :count="10" />
<Tweet id="1390115482657726468" />
<!-- Custom component -->
<MyComponent v-click />
Animations
<v-click>
This appears on click
</v-click>
<v-clicks>
- Item 1
- Item 2
- Item 3
</v-clicks>
<!-- Or with v-click directive -->
<div v-click>Animated content</div>
Frontmatter
---
theme: seriph
background: https://source.unsplash.com/collection/94734566/1920x1080
class: text-center
highlighter: shiki
lineNumbers: true
drawings:
persist: false
css: unocss
---
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