slidev作者 Slidev

Slidev スキル。

Claude Code と Codex 向けの PPT・スライドデッキ用スキル：Markdown、Vue コンポーネント、コードハイライト、アニメーション付きの開発者向けスライドデッキです。

Presentations
HTML slides

slidevjs/slidev · skills/slidev/SKILL.mdSKILL.md

--- name: slidev description: Create and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, code walkthroughs, teaching materials, or developer decks. --- ## When to Use ## Quick Start ## Basic Syntax ## Common Layouts

アップストリームファイルから2026年9月14日に読み取られたフロントマターとセクション見出し · 全8,896文字

01 できること

Claude CodeとCodexにおいてslidev Skillが行うこと

概要、ワークフロー、出力。いずれもスキルの SKILL.md から読み取った内容です。

SKILL.md より2026年9月14日読取 · 実行記録ではありません

スキル自身の言葉で

Slidevは、Vite、Vue、Markdownを基盤とした開発者向けのWebベーススライド作成ツールです。シンタックスハイライト付きのコードスニペット、Monacoエディタを使ったライブコード例、インタラクティブなデモ、LaTeX数式、MermaidやPlantUMLの図表を使った技術系プレゼンテーションを作成できます。スライドはMarkdownで記述し、---で区切り、最初のフロントマターをdeck設定用のheadmatterとして使用し、HTMLコメントでプレゼンターノートを記述します。

クリックベースのアニメーション（v-click、magic-move）、行のハイライト、コードタブ、カメラを使った録画、リモートコントロール、タイマーに対応しています。PDFまたはPPTXへのエクスポートにはplaywright-chromiumが必要です。ビルドコマンドには、localhost:3030でのローカルプレビュー用のpnpm run dev、PDF用のpnpm run export、静的SPAデプロイ用のpnpm run buildがあります。

生成されるもの

プレゼンテーションのPDFエクスポート

プロンプト例を見る ↗

仕組み

01
プロジェクトの初期化
pnpm create slidevを実行して、新しいSlidevプレゼンテーションプロジェクトをスキャフォールドします。
02
Markdownでスライドを書く
スライドは---で区切り、最初のフロントマターブロックでdeck設定を行い、HTMLコメントでプレゼンターノートを追加します。
03
開発サーバーの起動
pnpm run devを実行してローカルサーバーを起動し、http://localhost:3030でプレゼンテーションを開きます。
04
エクスポートまたはビルド
PDF出力にはpnpm run exportを使用し、ホスティング用の静的SPAを作成するにはpnpm run buildを使用します。

02 適合性を確認

slidev スキルを使用するタイミング

Claude Code または Codex で PPT やスライドデッキの作業を行う際に slidev スキルを使用します。以下の適合性と制限はスキルファイル自体から取得されています。

適している場合

ライブコード例を含む技術プレゼンテーションやスライドデッキ
アニメーション付きのシンタックスハイライトされたコードスニペット
Monacoエディタを使ったインタラクティブなデモ、または実行可能なコード
LaTeXによる数式、またはMermaidとPlantUMLによる図表
開発者向けトークやワークショップ用のコードウォークスルー

境界を知る

Slidev が必要SKILL.md にこの依存関係が記載されています。プロジェクトにこれがないとスキルは動作しません。

提供すべきもの

コードスニペット<<< @/snippets/file.js構文でインポートされた外部コードファイルをスライドに表示します。

03 スキルの内部

slidevスキルがClaude CodeとCodexに与えるルール

SKILL.md がエージェントに設定する 5 つの具体的な指示、デフォルト、制限 — ファイルの中でも結果を左右する部分です。

Headmatterは最初のフロントマター
ファイル内の最初のフロントマターブロックは、個々のスライド設定ではなく、deck全体の設定を構成します。
HTMLコメント内のプレゼンターノート
プレゼンターノートは各スライド内のHTMLコメントブロック内に記述します。これらはスライド自体には表示されません。
エクスポートにはplaywright-chromiumが必要
エクスポートコマンドを実行する前にpnpm add -D playwright-chromiumをインストールしてください。ブラウザエラーでエクスポートが失敗する場合、この依存関係が不足しています。
マージ時はメインエントリが優先されます
srcでスライドをインポートする場合、メインエントリファイルのフロントマターがインポートされたファイルのフロントマターより優先されます。
Comarkで高度な構文を有効化
headmatterで comark: true を設定すると、コードグループやインラインスタイル属性（{style="color:red"} など）が使用できます。

04 実際に使う

Claude Code または Codex に slidev をインストールする

npx skills add コマンドを実行し、エージェントで最初のタスクを実行して、結果をチェックリストで確認します。

Claude Code、Codex、または他のエージェントに slidev を追加する

プロジェクトで実行してください。インストーラーが、どのエージェントに追加するかを尋ねます。

Terminal

npx skills add https://github.com/slidevjs/slidev --skill slidev

skills/slidev/SKILL.md 用の汎用 skills CLI形式です。リポジトリによっては独自のパスが指定されている場合があります。

スキルに初めての PPT・スライドデッキタスクを与える

スキル自身の用語で記述されています。角括弧の部分はご自身の内容に置き換えてください。

Starter prompt

Create a technical presentation for a React workshop with three sections: component lifecycle, hooks deep-dive, and performance optimization. Include live Monaco editor demos showing useState and useEffect patterns, syntax-highlighted TypeScript code with click-based line reveals for the reconciliation algorithm explanation, a Mermaid diagram of the component tree, and a two-column layout comparing class components and functional components. Add presenter notes with timing estimates for each section and configure a 45-minute countdown timer.

出典：SKILL.md をスキル自身の用語に沿って記述。

最初の結果を確認

SKILL.md 自体が正しい結果として示しているもの：

pnpm run dev を実行した後、http://localhost:3030 でスライドが表示されることを確認してください
pnpm run export を実行した後、出力されたPDFがプロジェクトのルートディレクトリに存在することを確認してください
ブラウザエラーでエクスポートが失敗する場合は、先に playwright-chromium の依存関係をインストールしてください
クリックベースのアニメーションをテストするには、スライドを進めて v-click 要素が順番に表示されることを確認してください

OpenDesignでは、SKILL.mdのリンクからslidevをインポートします：Plugins → Add → Skill → Import from link。その後、上部バーで選択してください。

OpenDesign をダウンロードクイックスタートを読む

05 オープンソースで追跡可能

ソース、ライセンス、検証

このページの情報の出所と、最終確認日時です。

Author: Slidev
Repository: github.com/slidevjs/slidev ブランチ main
スキルファイル: skills/slidev/SKILL.md 検証時にコンテンツチェックサムを記録、コミット a8d8ff7
License: MIT LICENSE より
リポジトリスター数: 48,658 slidevjs/slidev リポジトリ全体の GitHub スナップショット（2026年9月14日取得）。slidev の評価や使用数ではありません。
OpenDesign により検証済み: 2026-09-14 ソースファイル、パス、ライセンステキスト、スター数を確認済み。OpenDesign 本体にはバンドルされていません（2026-08-28 確認）。このページには実行記録がありません。

SKILL.md の中身

使用場面技術的なプレゼンテーション、コードスニペット、インタラクティブデモ、数式、図表、録画、エクスポート形式などのユースケースを紹介します
クイックスタートプロジェクトの作成、開発サーバーの起動、SPAのビルド、PDFへのエクスポートを行うコマンドです
基本構文スライド区切り、headmatterの設定、HTMLコメントによるプレゼンターノートです
コアリファレンス構文、アニメーション、フロントマター、CLI、コンポーネント、レイアウト、エクスポート、ホスティング、グローバルコンテキストなどの主要トピックの一覧表です
機能リファレンスコードハイライト、Monacoエディター、図表、数式、レイアウト、スタイリング、アニメーション、構文拡張、プレゼンターツール、エクスポートオプションを網羅した詳細な表です
一般的なレイアウトビルトインのレイアウト：カバー、中央、2カラム、画像バリエーション、iframeバリエーション、引用、セクション、事実、イントロ、エンドです
リソースドキュメント、テーマギャラリー、ショーケースへのリンクです

スキル自身による説明

「Markdown、Vue コンポーネント、コードハイライト、アニメーション、インタラクティブ機能を使った Slidev で、開発者向けの Web ベーススライドデッキを作成・発表します。技術プレゼンテーション、カンファレンストーク、コードウォークスルー、教材、開発者向けデッキの作成時に使用します。」

SKILL.md のフロントマター説明文です。完全なファイルは約 8,896 文字です。GitHub で全文を読む

Slidev

実際の PPT とスライドデッキのタスクで slidev を実行する

OpenDesign をダウンロードし、SKILL.md リンクから slidev をインポートし、上記のプロンプトを貼り付けて、結果の前に計画を確認してください。

OpenDesign をダウンロードすべてのスキルを見る

ターミナル

npx skills add https://github.com/slidevjs/slidev --skill slidev