dev-slides

開発者向けスライドスキル

概要

このスキルでは、Vue を活用したプレゼンテーションフレームワークである Slidev を使って、開発者向けのプレゼンテーションを作成できます。ライブコードデモ、図、コンポーネントを含むスライドを 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 Editor（ライブコード）

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

リソース

• Slidev のドキュメント
• GitHub
• テーマ