コンテキストを最初に読み込む

このスキルを実行する前に、プロジェクトフォルダから以下のファイルを読み込みます（存在する場合）:

1. USER.md — ユーザーが誰であるか、どう考えるか、どう仕事をするか
2. BUSINESS.md — ビジネス、製品、ポジショニング、ブランドボイス、コンテンツ戦略
3. ICP.md — 理想的な顧客、その言語、懸念事項、購買動機
4. Voice or brand voice skill — ボイス、トーン、ブランドボイスに関連するインストール済みスキルを探して自動適用する
5. このセッション中にユーザーが提供した追加コンテキスト

すべてのコンテキストは無言で使用します。質問されない限り、ファイルを参照または要約しません。

---

プレゼンテーションビルダー

目的: ビデオスクリプト、アウトライン、またはトピック概要から完成度の高い HTML スライドプレゼンテーションを生成します。出力は単一の .html ファイルで、CSS と JS が埋め込まれており、Google Fonts 以外に依存関係はありません。

実行タイミング

このスキルは以下の場合に使用します:

• ユーザーがプレゼンテーションまたはスライドデッキの作成をリクエストしたとき
• ユーザーがスクリプト、アウトライン、またはトピックをスライドに変換したいとき
• ユーザーが「プレゼンテーション」「スライド」「デッキ」と言及したとき
• ユーザーがトークやミーティング用のビジュアルコンテンツを望んでいるとき

プロセス

1. 入力を分析する

スクリプト/アウトライン/トピックを読み、以下を特定します:

• コア叙述弧（物語は何か？）
• 主要なセクションと遷移
• データポイント、比較、リスト、引用
• 必要なスライド数（目安は 10-20）

2. コンテンツをスライドタイプにマッピングする

コンテンツ	スライドタイプ
オープニング / フック	タイトル
大胆な主張、テーゼ、引用	引用/ステートメント
説明付きの複数項目	コンテンツグリッド（カード）
ビフォー/アフター、メリット/デメリット	比較（2 列）
ファイル構造、階層	ツリー/構造
接続されたシステム	ダイアグラム（複数要素）
機能、ツール、プラグイン	フィーチャーカード
数値、メトリクス、結果	統計/結果（大きな数字）
順序立った指示	ステップ/番号付きリスト
最終ピッチ、リンク、購読	CTA/クロージング

3. デザイン判断

HTML を書く前に、以下を決定します:

• カラーパレット: トピックに合った 1 つのアクセントカラー + 1-2 つの補助色
• タイポグラフィ: Google Fonts ペア — ディスプレイフォント（見出し）+ モノフォント（ラベル）。Inter、Roboto、Arial は避けます。良い選択肢: Sora、Space Grotesk、Outfit、Plus Jakarta Sans と JetBrains Mono、Fira Code のペアリング
• ムード: デフォルトはダークテーム。トピックのエネルギーに合わせて調整します

4. プレゼンテーションを作成する

各スライドで:

1. 適切なスライドタイプを選択する
2. コンテンツを入力する
3. 段階的な表示アニメーションを追加する
4. スライドカウンターを設定する
5. 検証: 1 ビューポート内に収まる — そうでない場合は分割します

5. 技術要件

必須:

• html { scroll-snap-type: y mandatory; }
• .slide { scroll-snap-align: start; height: 100vh; }
• キーボードナビゲーション（矢印キー）
• 右側固定のドットナビゲーション
• IntersectionObserver を使用したフェードアップアニメーション
• 右上のスライド番号表示（NN / TOTAL）
• 単一ファイル HTML で CSS/JS が埋め込まれている
• CDN リンク経由の Google Fonts

ルール

1. 1 ビューポートあたり 1 スライド — スライド内のスクロールなし。オーバーフロー時は分割します
2. スクリーンショットは独自スライド — コンテンツ豊富なスライドには配置しません
3. 単一ファイル HTML — すべての CSS と JS を埋め込みます
4. ジェネリックな美学を避ける — プレゼンテーションごとにカスタムカラー、独特なフォント、テーマに沿ったアクセントを使用します
5. コンテンツ制限 — スライドタイプごとの最大項目数を守ってオーバーフローを防止します

出力

ブラウザでそのまま開ける完全な .html ファイル。コードブロックとして表示するか、ファイルに直接保存します。

品質チェックリスト

• すべてのスライドが 100vh に収まる（内部スクロールなし）
• ナビゲーションが機能する（矢印 + ドット）
• アニメーションがスクロールで開始する
• スライド番号が順序正しく正確である
• Google Fonts が読み込まれている
• カラーパレットが意図的である（デフォルトではない）
• タイポグラフィペアリングが独特である
• コンテンツがプレゼンテーション距離で読みやすい
• 10-20 スライド（少なすぎず、多すぎず）