Frontend Slides

ブラウザ内で完全に動作する、依存関係ゼロのアニメーション豊富な HTML プレゼンテーションを作成します。

このスキルを使う場面

• ユーザーがプレゼンテーション、スライドデック、またはピッチをゼロから作成するよう依頼した場合。
• ユーザーが既存の PPT または PPTX ファイルをウェブベースのプレゼンテーションに変換したい場合。
• ビューポート内にぴったり収まる必要がある、視覚的に豊かでアニメーション化された HTML コンテンツを設計する場合。

コア原則

1. 依存関係ゼロ — CSS/JS がインラインされた単一の HTML ファイル。npm も ビルドツールも不要。
2. 見せる、説明しない — 抽象的な選択肢ではなく、ビジュアルプレビューを生成。ユーザーは実際に見ることで自分たちが何を望んでいるかを発見する。
3. 独特なデザイン — 「AI っぽい」つまらないデザインは避ける。すべてのプレゼンテーションはカスタムデザインされたように見えるべき。
4. ビューポート適合（絶対必須） — すべてのスライドは 100vh 内にぴったり収まる MUST。スライド内でのスクロールは絶対禁止。コンテンツがはみ出す？複数のスライドに分割。

デザイン美学

あなたは汎用的で「分布内」の出力に傾く傾向があります。フロントエンドデザインではこれが「AI っぽい」美学を生み出します。これを避けてください：クリエイティブで個性的なフロントエンドを作り、ユーザーを驚かせ喜ばせてください。

焦点を当てるべき点：

• タイポグラフィ： 美しく、ユニークで興味深いフォントを選択してください。Arial と Inter のような汎用フォントは避け、代わりにフロントエンドの美学を高める個性的な選択肢を選びましょう。
• 色とテーマ： 統一された美学にコミットしてください。CSS 変数で一貫性を保ちましょう。支配的な色と鋭いアクセントは控えめで均等に分布したパレットより優れています。IDE テーマと文化的な美学からインスピレーションを引き出してください。
• モーション： アニメーションを効果とマイクロインタラクションに使用してください。HTML では CSS のみのソリューションを優先してください。React が利用可能な場合は Motion ライブラリを使用してください。高影響度の瞬間に焦点を当ててください：1 つの綿密に編成されたページロードと段階的な表示（animation-delay）は、散在するマイクロインタラクションより大きな喜びを生み出します。
• 背景： 単色に デフォルトするのではなく、雰囲気と深度を作成してください。CSS グラデーションをレイヤーし、幾何学的なパターンを使用するか、全体的な美学と一致する文脈的な効果を追加してください。

汎用 AI 生成美学を避けてください：

• 過度に使用されたフォントファミリー（Inter、Roboto、Arial、システムフォント）
• 陳腐な配色（特に白い背景上の紫色グラデーション）
• 予測可能なレイアウトとコンポーネントパターン
• 文脈固有の個性に欠ける既製品的なデザイン

文脈に合わせて創意的に解釈し、本当にデザインされたように感じる予期しない選択をしてください。ライトテーマとダークテーマ、異なるフォント、異なる美学を交互に使い分けてください。あなたはまだ世代全体にわたって一般的な選択肢（例：Space Grotesk）に傾く傾向があります。これを避けてください：枠にとらわれずに考えることが重要です！

ビューポート適合ルール

これらの不変量は、すべてのプレゼンテーションの各スライドに適用されます：

• すべての .slide は height: 100vh; height: 100dvh; overflow: hidden; を持つ必要があります
• すべてのフォントサイズと間隔は clamp(min, preferred, max) を使用する必要があります — 固定 px/rem は使用しません
• コンテンツコンテナには max-height の制約が必要です
• 画像：max-height: min(50vh, 400px)
• ブレークポイントが必要な高さ：700px、600px、500px
• prefers-reduced-motion サポートを含めてください
• CSS 関数を直接否定しないでください（-clamp()、-min()、-max() はサイレントに無視されます）— 代わりに calc(-1 * clamp(...)) を使用してください

生成するときは、viewport-base.css を読み込んで、すべてのプレゼンテーションにその完全な内容を含めてください。

スライドごとのコンテンツ密度制限

スライドタイプ	最大コンテンツ
タイトルスライド	見出し 1 つ + サブタイトル 1 つ + オプションのタグライン
コンテンツスライド	見出し 1 つ + 箇条書き 4-6 個 OR 見出し 1 つ + 段落 2 個
機能グリッド	見出し 1 つ + 最大 6 カード（2x3 または 3x2）
コードスライド	見出し 1 つ + コード 8-10 行
引用スライド	引用 1 つ（最大 3 行）+ 著者記載
画像スライド	見出し 1 つ + 画像 1 つ（最大高さ 60vh）

コンテンツが制限を超える？複数のスライドに分割してください。詰め込まない、スクロールさせない。

---

フェーズ 0：モード検出

ユーザーが何を望んでいるかを判断します：

• モード A：新規プレゼンテーション — ゼロから作成。フェーズ 1 に進む。
• モード B：PPT 変換 — .pptx ファイルを変換。フェーズ 4 に進む。
• モード C：強化 — 既存の HTML プレゼンテーションを改善。読み取り、理解し、強化。以下のモード C 修正ルールに従ってください。

モード C：修正ルール

既存のプレゼンテーションを強化する場合、ビューポート適合が最大のリスクです：

1. コンテンツを追加する前に： 既存の要素をカウントし、密度制限に対してチェック
2. 画像を追加する場合： max-height: min(50vh, 400px) を持つ必要があります。スライドが既に最大コンテンツを持っている場合は、2 つのスライドに分割
3. テキストを追加する場合： スライドあたり最大 4-6 個の箇条書き。制限を超える？継続スライドに分割
4. 修正後、以下を確認： .slide に overflow: hidden がある、新しい要素が clamp() を使用、画像がビューポート相対的な max-height を持つ、コンテンツが 1280x720 にフィット
5. 積極的に再編成： 修正がオーバーフローを引き起こす場合、自動的にコンテンツを分割し、ユーザーに知らせてください。聞かれるのを待たないでください

既存のスライドに画像を追加する場合： 画像を新しいスライドに移動するか、他のコンテンツを最初に削除してください。既存のコンテンツがビューポートを既に満たしているかどうかを確認せずに画像を追加しないでください。

---

フェーズ 1：コンテンツ発見（新規プレゼンテーション）

すべての質問を 1 つの AskUserQuestion 呼び出しで尋ねます ので、ユーザーは一度にすべてを記入します：

質問 1 — 目的（ヘッダー："Purpose"）: このプレゼンテーションは何のためですか？オプション：Pitch deck / Teaching-Tutorial / Conference talk / Internal presentation

質問 2 — 長さ（ヘッダー："Length"）: およそ何スライド？オプション：Short 5-10 / Medium 10-20 / Long 20+

質問 3 — コンテンツ（ヘッダー："Content"）: コンテンツは準備できていますか？オプション：All content ready / Rough notes / Topic only

質問 4 — インライン編集（ヘッダー："Editing"）: 生成後にブラウザで直接テキストを編集する必要がありますか？オプション：

• "Yes (Recommended)" — ブラウザでテキストを編集でき、自動保存を localStorage に、ファイルをエクスポート
• "No" — プレゼンテーションのみ、ファイルをより小さく保つ

ユーザーの編集の選択を覚えておいてください — これがフェーズ 3 で編集関連コードを含めるかどうかを決定します。

ユーザーがコンテンツを持っている場合は、それを共有するよう依頼してください。

ステップ 1.2：画像評価（画像が提供された場合）

ユーザーが「画像なし」を選択した場合 → フェーズ 2 にスキップ。

ユーザーが画像フォルダを提供する場合：

1. スキャン — すべての画像ファイルをリスト（.png、.jpg、.svg、.webp など）
2. 各画像を表示 — Read ツールを使用（Claude はマルチモーダル）
3. 評価 — 各について：何を示しているか、使用可能か否か（理由付き）、表現する概念、支配的な色
4. アウトラインを共同設計 — キュレーションされた画像はテキストと一緒にスライド構造を知らせます。これは「スライドを計画してから画像を追加」ではなく、最初から両方を周囲に設計してください（例：3 つのスクリーンショット → 3 つの機能スライド、1 つのロゴ → タイトル/終了スライド）
5. AskUserQuestion で確認（ヘッダー："Outline"）："このスライドアウトラインと画像選択は正しく見えますか？" オプション：Looks good / Adjust images / Adjust outline

プレビューのロゴ： 使用可能なロゴが識別された場合、フェーズ 2 の各スタイルプレビューに埋め込んでください（base64）— ユーザーは 3 つの異なる方法でスタイル設定されたブランドを見ます。

---

フェーズ 2：スタイル発見

これは「見せる、説明しない」フェーズです。 ほとんどの人は言葉でデザイン嗜好を言葉で説明できません。

ステップ 2.0：スタイルパス

彼らが選択したい方法を尋ねます（ヘッダー："Style"）：

• "Show me options"（推奨） — ムードに基づいて 3 つのプレビューを生成
• "I know what I want" — プリセットリストから直接選択

直接選択の場合： プリセットピッカーを表示して、フェーズ 3 にスキップ。利用可能なプリセットは STYLE_PRESETS.md で定義されています。

ステップ 2.1：ムード選択（ガイド付き発見）

尋ねます（ヘッダー："Vibe"、multiSelect: true、max 2）: 視聴者はどのような感情を持つべきですか？オプション：

• Impressed/Confident — プロフェッショナル、信頼できる
• Excited/Energized — 革新的、大胆
• Calm/Focused — クリア、思慮深い
• Inspired/Moved — 感情的、忘れられない

ステップ 2.2：3 つのスタイルプレビューを生成

ムードに基づいて、タイポグラフィ、色、アニメーション、全体的な美学を示す 3 つの異なる単一スライド HTML プレビューを生成します。利用可能なプリセットとその仕様については、STYLE_PRESETS.md を読んでください。

ムード	推奨プリセット
Impressed/Confident	Bold Signal, Electric Studio, Dark Botanical
Excited/Energized	Creative Voltage, Neon Cyber, Split Pastel
Calm/Focused	Notebook Tabs, Paper & Ink, Swiss Modern
Inspired/Moved	Dark Botanical, Vintage Editorial, Pastel Geometry

プレビューを .claude-design/slide-previews/ に保存（style-a.html、style-b.html、style-c.html）。各々は自己完結し、約 50-100 行、1 つのアニメーション付きタイトルスライドを表示すべき。

各プレビューをユーザー向けに自動的に開きます。

ステップ 2.3：ユーザーが選択

尋ねます（ヘッダー："Style"）: どのスタイルプレビューが好みですか？オプション：Style A: [Name] / Style B: [Name] / Style C: [Name] / Mix elements

「要素を混ぜる」の場合、具体内容を尋ねてください。

---

フェーズ 3：プレゼンテーションを生成

フェーズ 1（テキスト、またはテキスト＋キュレーション済み画像）とフェーズ 2 のスタイルからのコンテンツを使用して、完全なプレゼンテーションを生成します。

画像が提供された場合、スライドアウトラインは既にステップ 1.2 から画像を組み込んでいます。ない場合、CSS 生成ビジュアル（グラデーション、シェイプ、パターン）が視覚的な興味を提供します — これは完全にサポートされている一流のパスです。

生成する前に、これらのサポートファイルを読んでください：

• html-template.md — HTML アーキテクチャと JS 機能
• viewport-base.css — 必須 CSS（完全に含める）
• animation-patterns.md — 選択されたムードのアニメーション参照

主要な要件：

• 単一の自己完結型 HTML ファイル、すべての CSS/JS インライン
• <style> ブロックに viewport-base.css の完全な内容を含める
• Fontshare または Google Fonts のフォントを使用 — システムフォントは使用しない
• 各セクションを説明する詳細なコメントを追加
• 各セクションに明確な /* === SECTION NAME === */ コメントブロックが必要

---

フェーズ 4：PPT 変換

PowerPoint ファイルを変換する場合：

1. コンテンツを抽出 — python scripts/extract-pptx.py <input.pptx> <output_dir> を実行（必要に応じて python-pptx をインストール：pip install python-pptx）
2. ユーザーに確認 — 抽出されたスライドタイトル、コンテンツサマリー、画像数を提示
3. スタイル選択 — フェーズ 2 に進み、スタイル発見
4. HTML を生成 — 選択されたスタイルに変換し、すべてのテキスト、画像（assets/ から）、スライド順序、スピーカーノート（HTML コメント）を保持

---

フェーズ 5：配信

1. クリーンアップ — .claude-design/slide-previews/ がある場合は削除
2. 開く — open [filename].html を使用してブラウザで起動
3. 要約 — ユーザーに以下を伝えます：
   • ファイルの場所、スタイル名、スライド数
   • ナビゲーション：矢印キー、スペース、スクロール/スワイプ、ナビゲーションドットをクリック
   • カスタマイズ方法：:root CSS 変数で色、フォントリンクでタイポグラフィ、.reveal クラスでアニメーション
   • インライン編集が有効な場合：左上隅にホバーするか E を押して編集モードに入り、任意のテキストをクリックして編集、Ctrl+S で保存

---

サポートファイル

ファイル	目的	読むタイミング
STYLE_PRESETS.md	12 個のキュレーション済みビジュアルプリセット（色、フォント、署名要素付き）	フェーズ 2（スタイル選択）
viewport-base.css	必須のレスポンシブ CSS — すべてのプレゼンテーションにコピー	フェーズ 3（生成）
html-template.md	HTML 構造、JS 機能、コード品質標準	フェーズ 3（生成）
animation-patterns.md	CSS/JS アニメーションスニペットと効果からムードへのガイド	フェーズ 3（生成）
scripts/extract-pptx.py	PPT コンテンツ抽出用 Python スクリプト	フェーズ 4（変換）

制限事項

• このスキルは、上記で説明されたスコープに明確に一致するタスクの場合にのみ使用してください。
• 出力を環境固有の検証、テスト、または専門家のレビューの代替と見なさないでください。
• 必須入力、権限、安全境界、またはサクセス基準が不足している場合は停止し、明確化を求めてください。