mcpField
D
dev-slides

dev-slides

github.com/claude-office-skills文档处理5454.6k 次安装39 周前更新
代码仓库

关于 dev-slides

dev-slides 是用于制作开发者演示文稿的技能，基于 Slidev 生成 Markdown 幻灯片，并支持代码演示、图表和 Vue 组件。

主要功能

  1. 01生成 Slidev Markdown 幻灯片
  2. 02代码块与实时演示
  3. 03Mermaid 图表
  4. 04支持 Vue 组件
  5. 05幻灯片布局与主题

适用场景

  1. 01准备 Vue.js 工作坊
  2. 02演示可执行代码
  3. 03用图表讲解系统
  4. 04制作开发者入职幻灯片

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/claude-office-skills/skills --skill dev-slides

安装后在 Claude Code 中输入/dev-slides确认已加载。

详细介绍

开发者幻灯片技能

概述

此技能可使用 Slidev（基于 Vue 的演示文稿框架）创建面向开发者的演示文稿。使用 Markdown 编写幻灯片，并加入实时代码演示、图表和组件。

使用方法

  1. 描述你的技术演示需求
  2. 我将生成语法规范的 Slidev Markdown
  3. 内容包括代码块、图表和 Vue 组件

示例提示词：

  • “创建一份 Vue.js 工作坊演示文稿”
  • “制作支持实时执行代码的幻灯片”
  • “制作一场包含图表的技术演讲”
  • “创建开发者入职培训幻灯片”

领域知识

Slidev 基础知识
---
theme: default
title: My Presentation
---

# Welcome

This is the first slide

---

# Second Slide

Content here
幻灯片分隔符
---   # New horizontal slide

---   # Another slide
layout: center
---

# Centered Content
布局
---
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 Example

\`\`\`ts {all|1|2-3|4}
const name = 'Slidev'
const greeting = \`Hello, \${name}!\`
console.log(greeting)
// Outputs: Hello, Slidev!
\`\`\`
Monaco 编辑器（实时代码）
\`\`\`ts {monaco}
// Editable code block
function add(a: number, b: number) {
  return a + b
}
\`\`\`

\`\`\`ts {monaco-run}
// Runnable code
console.log('Hello from Slidev!')
\`\`\`
图表（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 组件
<Counter :count="10" />

<Tweet id="1390115482657726468" />


<MyComponent v-click />
动画
<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
---

示例

示例：API 工作坊
---
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)

安装

npm init slidev@latest

资源

评论

支持 Markdown