jpskill.com
🛠️ 開発・MCP コミュニティ

🛠️ Slidev

slidev

MarkdownやVueコンポーネントを用いて、開発者向けの技術プレゼンテーションやカンファレンストーク、教材などをウェブベースで作成・発表するためのSkill。

📜 元の英語説明(参考)

Create and present web-based slides for developers using Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, or teaching materials.

🇯🇵 日本人クリエイター向け解説

一言でいうと

MarkdownやVueコンポーネントを用いて、開発者向けの技術プレゼンテーションやカンファレンストーク、教材などをウェブベースで作成・発表するためのSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o slidev.zip https://jpskill.com/download/5401.zip && unzip -o slidev.zip && rm slidev.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/5401.zip -OutFile "$d\slidev.zip"; Expand-Archive "$d\slidev.zip" -DestinationPath $d -Force; ri "$d\slidev.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して slidev.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → slidev フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-17
取得日時
2026-05-17
同梱ファイル
55

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Slidev - 開発者向けプレゼンテーションスライド

Vite、Vue、Markdown をベースにした Web ベースのスライド作成ツールです。

使用する場面

  • ライブコード例を含む技術プレゼンテーション
  • アニメーション付きのシンタックスハイライトされたコードスニペット
  • インタラクティブなデモ (Monaco editor、実行可能なコード)
  • 数式 (LaTeX) または図 (Mermaid、PlantUML)
  • 発表者ノート付きのプレゼンテーションの記録
  • PDF、PPTX へのエクスポート、または SPA としてホスト

クイックスタート

pnpm create slidev    # プロジェクトを作成
pnpm run dev          # 開発サーバーを起動
pnpm run export       # PDF にエクスポート

基本構文

---
theme: default
title: My Presentation
---

# First Slide

Content here

---

# Second Slide

More content

<!--
Presenter notes go here
-->
  • --- はスライドを区切ります
  • 最初のフロントマターはヘッドマター (デッキ設定) です
  • HTML コメントは発表者ノートです

コア参照

トピック 説明 参照
Markdown 構文 スライド区切り、フロントマター、ノート、コードブロック core-syntax
アニメーション v-click、v-clicks、motion、transitions core-animations
ヘッドマター デッキ全体の構成オプション core-headmatter
フロントマター スライドごとの構成オプション core-frontmatter
CLI コマンド 開発、ビルド、エクスポート、テーマコマンド core-cli
コンポーネント 組み込みの Vue コンポーネント core-components
レイアウト 組み込みのスライドレイアウト core-layouts
エクスポート PDF、PPTX、PNG エクスポートオプション core-exporting
ホスティング さまざまなプラットフォームへのビルドとデプロイ core-hosting
グローバルコンテキスト $nav、$slidev、composables API core-global-context

機能参照

コードとエディター

機能 使用法 参照
行ハイライト ```ts {2,3} code-line-highlighting
クリックベースのハイライト ```ts {1\|2-3\|all} code-line-highlighting
行番号 lineNumbers: true または {lines:true} code-line-numbers
スクロール可能なコード {maxHeight:'100px'} code-max-height
コードタブ ::code-group (mdc: true が必要) code-groups
Monaco editor ```ts {monaco} editor-monaco
コードの実行 ```ts {monaco-run} editor-monaco-run
ファイルの編集 <<< ./file.ts {monaco-write} editor-monaco-write
コードアニメーション ````md magic-move code-magic-move
TypeScript 型 ```ts twoslash code-twoslash
コードのインポート <<< @/snippets/file.js code-import-snippet

図と数式

機能 使用法 参照
Mermaid 図 ```mermaid diagram-mermaid
PlantUML 図 ```plantuml diagram-plantuml
LaTeX 数式 $inline$ または $$block$$ diagram-latex

レイアウトとスタイル設定

機能 使用法 参照
キャンバスサイズ canvasWidth、aspectRatio layout-canvas-size
スライドのズーム zoom: 0.8 layout-zoom
要素の拡大縮小 <Transform :scale="0.5"> layout-transform
レイアウトスロット ::right::、::default:: layout-slots
スコープ付き CSS スライド内の <style> style-scoped
グローバルレイヤー global-top.vue、global-bottom.vue layout-global-layers
ドラッグ可能な要素 v-drag、<v-drag> layout-draggable
アイコン <mdi-icon-name /> style-icons

アニメーションとインタラクション

機能 使用法 参照
クリックアニメーション v-click、<v-clicks> core-animations
ラフマーカー v-mark.underline、v-mark.circle animation-rough-marker
描画モード C を押すか drawings: を設定 animation-drawing
方向スタイル forward:delay-300 style-direction
ノートのハイライト ノート内の [click] animation-click-marker

構文拡張

機能 使用法 参照
MDC 構文 mdc: true + {style="color:red"} syntax-mdc
ブロックフロントマター --- の代わりに ```yaml syntax-block-frontmatter
スライドのインポート src: ./other.md syntax-importing-slides
フロントマターのマージ メインエントリが優先 syntax-frontmatter-merging

発表者と録画

機能 使用法 参照
録画 カメラ用に G を押す presenter-recording
タイマー duration: 30min、timer: countdown presenter-timer
リモートコントロール slidev --remote presenter-remote
ルビテキスト notesAutoRuby: presenter-notes-ruby

エクスポートとビルド

| 機能 | 使用法

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Slidev - Presentation Slides for Developers

Web-based slides maker built on Vite, Vue, and Markdown.

When to Use

  • Technical presentations with live code examples
  • Syntax-highlighted code snippets with animations
  • Interactive demos (Monaco editor, runnable code)
  • Mathematical equations (LaTeX) or diagrams (Mermaid, PlantUML)
  • Record presentations with presenter notes
  • Export to PDF, PPTX, or host as SPA

Quick Start

pnpm create slidev    # Create project
pnpm run dev          # Start dev server
pnpm run export       # Export to PDF

Basic Syntax

---
theme: default
title: My Presentation
---

# First Slide

Content here

---

# Second Slide

More content

<!--
Presenter notes go here
-->
  • --- separates slides
  • First frontmatter = headmatter (deck config)
  • HTML comments = presenter notes

Core References

Topic Description Reference
Markdown Syntax Slide separators, frontmatter, notes, code blocks core-syntax
Animations v-click, v-clicks, motion, transitions core-animations
Headmatter Deck-wide configuration options core-headmatter
Frontmatter Per-slide configuration options core-frontmatter
CLI Commands Dev, build, export, theme commands core-cli
Components Built-in Vue components core-components
Layouts Built-in slide layouts core-layouts
Exporting PDF, PPTX, PNG export options core-exporting
Hosting Build and deploy to various platforms core-hosting
Global Context $nav, $slidev, composables API core-global-context

Feature Reference

Code & Editor

Feature Usage Reference
Line highlighting ```ts {2,3} code-line-highlighting
Click-based highlighting ```ts {1\|2-3\|all} code-line-highlighting
Line numbers lineNumbers: true or {lines:true} code-line-numbers
Scrollable code {maxHeight:'100px'} code-max-height
Code tabs ::code-group (requires mdc: true) code-groups
Monaco editor ```ts {monaco} editor-monaco
Run code ```ts {monaco-run} editor-monaco-run
Edit files <<< ./file.ts {monaco-write} editor-monaco-write
Code animations ````md magic-move code-magic-move
TypeScript types ```ts twoslash code-twoslash
Import code <<< @/snippets/file.js code-import-snippet

Diagrams & Math

Feature Usage Reference
Mermaid diagrams ```mermaid diagram-mermaid
PlantUML diagrams ```plantuml diagram-plantuml
LaTeX math $inline$ or $$block$$ diagram-latex

Layout & Styling

Feature Usage Reference
Canvas size canvasWidth, aspectRatio layout-canvas-size
Zoom slide zoom: 0.8 layout-zoom
Scale elements <Transform :scale="0.5"> layout-transform
Layout slots ::right::, ::default:: layout-slots
Scoped CSS <style> in slide style-scoped
Global layers global-top.vue, global-bottom.vue layout-global-layers
Draggable elements v-drag, <v-drag> layout-draggable
Icons <mdi-icon-name /> style-icons

Animation & Interaction

Feature Usage Reference
Click animations v-click, <v-clicks> core-animations
Rough markers v-mark.underline, v-mark.circle animation-rough-marker
Drawing mode Press C or config drawings: animation-drawing
Direction styles forward:delay-300 style-direction
Note highlighting [click] in notes animation-click-marker

Syntax Extensions

Feature Usage Reference
MDC syntax mdc: true + {style="color:red"} syntax-mdc
Block frontmatter ```yaml instead of --- syntax-block-frontmatter
Import slides src: ./other.md syntax-importing-slides
Merge frontmatter Main entry wins syntax-frontmatter-merging

Presenter & Recording

Feature Usage Reference
Recording Press G for camera presenter-recording
Timer duration: 30min, timer: countdown presenter-timer
Remote control slidev --remote presenter-remote
Ruby text notesAutoRuby: presenter-notes-ruby

Export & Build

Feature Usage Reference
Export options slidev export core-exporting
Build & deploy slidev build core-hosting
Build with PDF download: true build-pdf
Cache images Automatic for remote URLs build-remote-assets
OG image seoMeta.ogImage or og-image.png build-og-image
SEO tags seoMeta: build-seo-meta

Editor & Tools

Feature Usage Reference
Side editor Click edit icon editor-side
VS Code extension Install antfu.slidev editor-vscode
Prettier prettier-plugin-slidev editor-prettier
Eject theme slidev theme eject tool-eject-theme

Lifecycle & API

Feature Usage Reference
Slide hooks onSlideEnter(), onSlideLeave() api-slide-hooks
Navigation API $nav, useNav() core-global-context

Common Layouts

Layout Purpose
cover Title/cover slide
center Centered content
default Standard slide
two-cols Two columns (use ::right::)
two-cols-header Header + two columns
image / image-left / image-right Image layouts
iframe / iframe-left / iframe-right Embed URLs
quote Quotation
section Section divider
fact / statement Data/statement display
intro / end Intro/end slides

Resources

同梱ファイル

※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。