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! ```

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 " />

< MyComponent v-click /> Animations < v-click

This appears on click </ v-click

< v-clicks

- Item 1 - Item 2 - Item 3 </ v-clicks

< 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 · Documentation Installation npm init slidev@latest Resources Slidev Documentation GitHub Themes