vibe-deck

VibeDeck

ステップ 0：環境の確認

まず、Node.js と npm が利用可能であることを確認してください。次のコマンドを試してください（現在のプラットフォームで動作するものを使用してください）。

node --version    # or: where.exe node (Windows)
npm --version     # or: where.exe npm (Windows)

• 両方が存在し、Node.js が 20 以上 → そのまま続行します（確認したことをユーザーに伝える必要はありません）。
• いずれかが見つからない、またはバージョンが低すぎる → 続行してはいけません。代わりに：
  1. uname -s と uname -m（Windows の場合は systeminfo）を実行して、ユーザーの OS とアーキテクチャを確認します。
  2. ウェブ検索が可能な場合は、ユーザーのプラットフォームに Node.js をインストールする最新の推奨方法を検索し、具体的なコマンドを提示します。
  3. 検索できない場合は、ユーザーの言語で次のメッセージを表示します：

     日本語：VibeDeck には Node.js 20 以上が必要です。https://nodejs.org にアクセスして、お使いの OS に適したバージョンをダウンロードしてインストールし、完了後にもう一度実行してください。

     English: VibeDeck requires Node.js 20 or later. Please visit https://nodejs.org to download and install the version for your OS, then try again.

  4. ここで停止し、ユーザーがインストールするまで待ちます。

ステップ 1：プロジェクトの確認

現在のディレクトリに slide-kit.config.js が存在するか確認します。

• 存在する → 既存の slide-kit プロジェクトです。スライドの作成に進みます。
• 存在しない → プロジェクトはまだありません。新しいデッキの作成に進み、ユーザーがコンテンツについても説明している場合は、その後スライドの作成に進みます。

---

新しいデッキの作成

1. タイトルを尋ねる

プロジェクトのタイトル（必須）のみを尋ねます。それ以外はすべてデフォルト値を提示します：

変更のご希望がなければ、次のデフォルト設定でプロジェクトを作成します：

• ディレクトリ：./<title-slug>/
• テーマ：corporate-blue（minimal も利用可能）
• ロゴ：組み込みの SlideKit ロゴ
• 発表者：なし（後で config で設定できます）
• パスワード：なし

変更したい項目があればお知らせください。なければ、このまま進めます。

テーマの詳細については、theme-presets.mdを参照してください。

2. プロジェクトのひな形を作成する

cp -r <this-skill-dir>/template/ <target-dir>
cd <target-dir>
git init

ネットワークは不要です。テンプレートはこのスキルに含まれています。

3. 設定する

• slide-kit.config.js：必要に応じて title、theme、logo、presenter を設定します
  • プライマリカラーのカスタマイズ：overrides.colors.primary を使用します。バリエーションは自動的に生成されます
  • ロゴのカスタマイズ：public/ にコピーし、/filename.svg として指定します
• index.html：<title> を設定します
• src/App.jsx：パスワードが不要な場合は PasswordGate を削除します

4. エージェント向けの指示を生成する

instruction-template.mdを読み、プレースホルダーを置き換えて、CLAUDE.md と AGENTS.md の両方に書き込みます。

5. インストールして起動する

npm install
npm run dev

報告する内容：プロジェクトの場所、テーマ、開発サーバーの URL。

---

スライドの作成

1. コンテキストを読む（計画の前に必ず実施）

まず、次の 3 つのファイルを読んでください。この手順を省略すると、コンテンツの重複、テーマカラーの誤り、規約の見落としにつながります。

• CLAUDE.md（または AGENTS.md）— テーマ、規約、データソース
• src/App.jsx — 現在のスライド一覧と順序（すでに存在するもの）
• slide-kit.config.js — 有効なテーマと発表者情報

2. 依頼内容を理解する

• このスライドにはどのようなコンテンツを表示すべきですか？
• データは含まれますか？含まれる場合、そのデータはどこから取得しますか？
• ストーリーの連続性：新しいスライドは、前のスライドから論理的につながるようにします
• 重複の回避：データポイントがすでに別の場所で示されている場合は、別の切り口で提示します
• 単位の統一：既存のスライドと同じ単位であることを確認します（$K と $M など）
• コンテンツの密度：最小コンテンツ密度の基準については、content-rules.mdを確認してください。コンテンツが少ないスライド（視覚要素が 10 個未満、またはカードの説明が 1 行のみ）は認められません。

3. レイアウト決定エンジン

レイアウトを推測せず、体系的に導き出してください。 layout-engine.mdを読み、次の手順に従います。

0. 意図の分類 — これはどのタイプのスライドですか？（データ／概念／ショーケース／リファレンス／ツール／ナラティブ）。タイプによって許容される情報密度は異なります。ショーケーススライドは意図的に情報量を多くできますが、データスライドではできません。
1. コンテンツの棚卸し — 指標、グラフ、テキストブロック、表の行、リスト項目を数えます
2. 単一の要点の確認 — スライドの要点を1つだけ述べます。概念スライドでは、「Xを理解する」という要点に、定義＋構成要素＋比較を自然にまとめられる場合があります。これは3つではなく、1つの要点です。
3. 意味に基づく照合 — コンテンツとレイアウトの対応表を使ってレイアウトを選びます
4. 容量の確認 — コンテンツがレイアウトの上限内に収まることを確認します（上限は意図のタイプによって異なります）。収まらない場合は、調整するか分割します。ただし、ショーケース／リファレンススライドは情報量が多いというだけで分割しないでください。
5. 複合レイアウト — コンテンツが混在する場合（例：グラフ＋指標）は、layout-engine.mdのフェーズ4にある複合パターンを使います

利用できるレイアウトのコードはlayout-templates.mdを参照してください。

レイアウト	最適な用途
FullChart	単一の大きなグラフ＋KeyMessage
SplitView	左右に並べた比較
MetricGrid	N個の指標カードを配置したダッシュボード
ComparisonView	比較の深さが同程度のビフォー／アフター
DataTable	ツールの比較、機能マトリックス、価格
TimelineFlow	ロードマップ、マイルストーン、段階的な計画
CardGrid	アイコン＋テキストで4～6個の機能項目を表示
CardRow	1行に2～4個の項目を表示
ConceptSlide	説明／テキスト中心で、データがない場合
Composite	コンテンツが混在する場合 — layout-engine.mdのフェーズ4を参照

組み込みスライドテンプレート（src/slides/からインポート）：

テンプレート	用途
SlideCover	表紙（config.titleを自動的に読み込みます）
SlideDivider	章の区切り／移行
SlideAgenda	目次
SlideThankYou	クロージング／Q&Aページ

4. スライドを作成する

• レイアウト： すべてのコンテンツスライドで必ずSlideLayoutを使用してください。タイトル → KeyMessage → コンテンツの順序を適用します。layout-templates.mdを参照してください
• グラフ：chart-components.md
• スタイル：style-guide.md
• コンテンツ：content-rules.md
• 色：import { colors } from '../theme'

5. 登録（チェックリスト）

import SlideXxx from './slides/SlideXxx'

// In <Deck>:
<Slide title="Page Title"><SlideXxx /></Slide>

次に進む前に、以下を確認してください。

• importをApp.jsxの先頭に追加した
• <Slide title="..."> — titleが設定されている（ナビゲーターに使用されるため、省略しないでください）
• <Deck>内の正しい位置に配置されている（ナラティブの順序）
• スライドで外部データを使用する場合、footnoteプロパティを設定した

6. ストーリーラインのレビュー（スライド追加後）

新しいスライドを追加するたびに、App.jsxの<Deck>全体を読み直し、全体のナラティブを確認します。

• 論理的な流れ：各スライドは前のスライドから自然につながっていますか？切り替わりで聴衆が混乱しませんか？
• 段階的な情報提示：参照される前に概念が紹介されていますか？（例：「Skillとは？」を「おすすめのSkill」より前に配置する）
• 対象に適した順序：技術に詳しくない対象には、簡単なものから複雑なものへ、馴染みのあるものから新しいものへと並べます（例：CLIツールより先にVS Code/Copilotを紹介する）
• 孤立したスライドがない：すべてのスライドが明確なセクションに属しています。どのセクションにも合わないスライドは、このデッキに含めるべきではない可能性があります
• セクションのバランス：各セクションは2～5枚のスライドで構成します。1枚だけでは不完全に感じられ、8枚以上ある場合は分割が必要です
• タイトルだけで確認：スライドのタイトルだけを順番に読んで、ストーリーが伝わりますか？伝わらない場合は、より内容が分かるタイトルに変更します

7. レイアウトの検証（ビルド後）

各スライドをビルドした後、レイアウトを目視で確認するか、レイアウトのチェックリストを使用してください。

• 下部に余白がない：コンテンツがスライドの高さの 80% 以上を占めている
• コンテンツが詰まっていない：justify-start ではなく、justify-center または justify-between を使用する
• カードの高さが統一されている：グリッドカードには h-full を指定してセルいっぱいに広げる
• カード内部の配置：タイトルは上部（shrink-0）、本文は flex-1 justify-center に配置します。パターンとよくある間違いについては、content-rules.md > Card Layout Alignment を参照してください
• 1 つのグリッドセルにつきカードは 1 つ：ラベルとカードを囲むラッパーは使わず、モックアップはセルに直接配置する
• 列のバランスを取る：コンテンツ量に差がある場合は、3 列に分割する、縦に積み重ねる、または中央に配置する
• テキストの階層：タイトル 28px → セクションラベル 10px → カードタイトル 14px → 本文 12px → 補助テキスト 10px
• セクション間の余白：セクション間には mt-auto ではなく mt-2 または mt-3 を使用する
• カード間の余白比率：カード間の余白は、カード内のパディングの約 1.6 倍にします（例：py-2.5 → gap-4）。content-rules.md > Card Spacing を参照してください
• 絵文字を使わない：絵文字ではなく lucide-react アイコンを使用します。データ配列にはコンポーネント参照として保存し（icon: Mail）、<item.icon size={14} /> としてレンダリングします

8. データの抽出（必要な場合）

• scripts/extract-xlsx.js を使用して Excel の構造を確認する
• カスタムの抽出スクリプトを作成し、合計値が一致することを確認する
• src/data/<name>.js に保存する
• データを絶対に捏造しない

---

既存のスライドを変更する

既存のデッキのスライドを変更、並べ替え、または削除するようユーザーから依頼された場合：

1. 最初にコンテキストを読む

スライドの作成時と同様に、作業を始める前に CLAUDE.md、App.jsx、slide-kit.config.js を読んでください。

2. スライドを編集する

• スライドのコンポーネントファイル（例：src/slides/SlideRevenue.jsx）を開く
• 既存のレイアウトパターンを維持しながら、依頼された変更を加える
• 変更にデータが関わる場合は、src/data/ ファイルを更新し、合計値が引き続き一致することを確認する
• 編集後、「レイアウトの検証」チェックリスト（スライドの作成のステップ 7）を実行する

3. スライドを並べ替える

• App.jsx の <Slide> エントリを並べ替えます。順序を制御するのはこのファイルだけです
• 並べ替え後、以下の編集後検証を実行する

4. スライドを削除する

• App.jsx から <Slide> エントリを削除する
• 削除するスライドで導入されたデータや概念を他のスライドが参照していないか確認する。参照している場合は、そのコンテキストを前のスライドに移す
• スライドのコンポーネントファイルがインポートされなくなる場合は、そのファイルを削除する
• 以下の編集後検証を実行する

5. スライドのレイアウトを変更する

ユーザーがスライドを別のレイアウト（例：FullChart → SplitView）に変更したい場合：

• 新しいレイアウトのコードテンプレートについて、layout-templates.md を読む
• データと keyMessage を維持しながら、コンポーネントを書き換える
• グラフ／コンテンツが新しいレイアウトの比率に収まることを確認する

6. 編集後の検証（変更のたびに必ず実施）

編集、並べ替え、削除のたびに、完了を報告する前に以下をすべて実行してください。

インポートの整理 — App.jsx を 1 行ずつ確認する：

• App.jsx の先頭にあるすべての import が、下の JSX で実際に使用されている。使用されていないもの（削除したスライド由来の残存 config、コンポーネント、データのインポートも含む）は削除する
• スライドのコンポーネントファイルが、存在しなくなったモジュールをインポートしていない

ストーリーラインの確認 — App.jsx の <Deck> 全体を読み直し、以下を確認する：

• 論理的な流れ：各スライドは前のスライドから自然につながっているか？
• 段階的な情報提示：概念が参照される前に導入されているか？
• 孤立したスライドがない：すべてのスライドが明確なセクションに属しているか？
• タイトルだけの確認：スライドのタイトルだけを順に読むと、タイトルだけでストーリーが伝わるか？

確認できるように、最終的なスライドの順序とタイトルをユーザーに報告してください。

単一の HTML として共有する

ユーザーがデッキを、持ち運び可能な単一の HTML ファイルとして共有したい場合（メール、IM、オフラインでの閲覧など）：

npm run build:single

これにより、すべての JS、CSS、SVG がインライン化された自己完結型のファイル dist-single/index.html が生成されます。サーバーは不要で、ブラウザーで開くだけです。

仕組み： vite.single.config.js は vite-plugin-singlefile を使ってすべてのアセットをインライン化します。ロゴ SVG はモジュールとしてインポートされるため（/public 参照ではありません）、これもバンドルに含まれます。

提案するタイミング： ユーザーが「共有」「誰かに送る」「デッキをメールで送る」「持ち運び可能にする」「単一ファイル」「オフライン」、または「不需要服务器」と言った場合です。

制限事項：

• ファイルサイズは約 380KB です（ECharts + React バンドル）。メールや IM での共有には適していますが、ウェブホスティングには理想的ではありません。
• public/ 内のカスタムロゴ（例：config.logo = '/my-logo.png'）は、ビルドプラグインによって自動的にデータ URI としてインライン化されます。追加の手順は不要です。

---

重要なルール

• データを捏造しないでください — すべての数値はソースファイルに基づいている必要があります。
• プロジェクトを作成するときは、CLAUDE.md と AGENTS.md の両方を生成してください。
• slide-kit.config.js は実行時設定の唯一の信頼できる情報源です。
• スライドコンポーネント：src/slides/Slide<PascalCaseName>.jsx
• データファイル：src/data/<kebab-case-name>.js