Frontend Slides Skill

ブラウザ全体で実行される、依存関係がないアニメーションリッチな HTML プレゼンテーションを作成します。このスキルは、ユーザーがビジュアル探索を通じて好みの美的感覚を発見し、本番品質のスライドデックを生成するのに役立ちます。

コア哲学

1. 依存関係ゼロ — インライン CSS/JS を備えた単一の HTML ファイル。npm やビルドツールなし。
2. 見せる、言わない — 人々は見るまで何が欲しいかわかりません。抽象的な選択肢ではなく、ビジュアルプレビューを生成します。
3. 特徴的なデザイン — 一般的な「AI スロップ」美学を避けます。すべてのプレゼンテーションはカスタムメイドのように感じるべきです。
4. 本番品質 — コードはよくコメントされ、アクセス可能で、パフォーマントである必要があります。
5. ビューポート適合（重大） — すべてのスライドはビューポート内にぴったり収まる必要があります。スライド内でのスクロールは絶対に禁止です。これは譲れません。

---

重大: ビューポート適合要件

このセクションはすべてのプレゼンテーションに必須です。すべてのスライドはあらゆる画面サイズでスクロールなしで完全に表示される必要があります。

黄金ルール

各スライド = ビューポート高さの正確に 100 (100vh/100dvh)
コンテンツがオーバーフローする? → 複数のスライドに分割するか、コンテンツを削減
スライド内でスクロールしない

コンテンツ密度制限

ビューポート適合を保証するために、スライドごとにこれらの制限を実施します:

スライドタイプ	最大コンテンツ
タイトルスライド	1 見出し + 1 サブタイトル + オプションのタグライン
コンテンツスライド	1 見出し + 4-6 箇条書き、または 1 見出し + 2 段落
フィーチャーグリッド	1 見出し + 最大 6 カード (2x3 または 3x2 グリッド)
コードスライド	1 見出し + 最大 8-10 行のコード
引用スライド	1 引用 (最大 3 行) + 出典
画像スライド	1 見出し + 1 画像 (最大 60vh 高さ)

これらの制限を超えるコンテンツ → 複数のスライドに分割

必須 CSS アーキテクチャ

すべてのプレゼンテーションには、ビューポート適合のための基本 CSS が含まれている必要があります:

/* ===========================================
   ビューポート適合: 必須ベーススタイル
   これらのスタイルはすべてのプレゼンテーションに含まれている必要があります。
   スライドがビューポートに正確に収まることを保証します。
   =========================================== */

/* 1. html/body をビューポートにロック */
html, body {
    height: 100%;
    overflow-x: hidden;
}

html {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

/* 2. 各スライド = ビューポート高さの正確に */
.slide {
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* モバイルブラウザの動的ビューポート高さ */
    overflow: hidden; /* 重大: 任意のオーバーフローを防止 */
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* 3. センタリング用フレックスのコンテンツコンテナ */
.slide-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-height: 100%;
    overflow: hidden; /* オーバーフローに対する二重防御 */
    padding: var(--slide-padding);
}

/* 4. すべてのタイポグラフィは clamp() をレスポンシブスケーリングに使用 */
:root {
    /* タイトルはモバイルからデスクトップまでスケール */
    --title-size: clamp(1.5rem, 5vw, 4rem);
    --h2-size: clamp(1.25rem, 3.5vw, 2.5rem);
    --h3-size: clamp(1rem, 2.5vw, 1.75rem);

    /* 本文 */
    --body-size: clamp(0.75rem, 1.5vw, 1.125rem);
    --small-size: clamp(0.65rem, 1vw, 0.875rem);

    /* 間隔はビューポートでスケール */
    --slide-padding: clamp(1rem, 4vw, 4rem);
    --content-gap: clamp(0.5rem, 2vw, 2rem);
    --element-gap: clamp(0.25rem, 1vw, 1rem);
}

/* 5. カード/コンテナはビューポート相対の最大サイズを使用 */
.card, .container, .content-box {
    max-width: min(90vw, 1000px);
    max-height: min(80vh, 700px);
}

/* 6. リストはビューポートでオートスケール */
.feature-list, .bullet-list {
    gap: clamp(0.4rem, 1vh, 1rem);
}

.feature-list li, .bullet-list li {
    font-size: var(--body-size);
    line-height: 1.4;
}

/* 7. グリッドは利用可能なスペースに適応 */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: clamp(0.5rem, 1.5vw, 1rem);
}

/* 8. ビューポートに制限された画像 */
img, .image-container {
    max-width: 100%;
    max-height: min(50vh, 400px);
    object-fit: contain;
}

/* ===========================================
   レスポンシブブレークポイント
   小さいビューポート用の積極的なスケーリング
   =========================================== */

/* 短いビューポート (< 700px 高さ) */
@media (max-height: 700px) {
    :root {
        --slide-padding: clamp(0.75rem, 3vw, 2rem);
        --content-gap: clamp(0.4rem, 1.5vw, 1rem);
        --title-size: clamp(1.25rem, 4.5vw, 2.5rem);
        --h2-size: clamp(1rem, 3vw, 1.75rem);
    }
}

/* 非常に短いビューポート (< 600px 高さ) */
@media (max-height: 600px) {
    :root {
        --slide-padding: clamp(0.5rem, 2.5vw, 1.5rem);
        --content-gap: clamp(0.3rem, 1vw, 0.75rem);
        --title-size: clamp(1.1rem, 4vw, 2rem);
        --body-size: clamp(0.7rem, 1.2vw, 0.95rem);
    }

    /* 非本質的な要素を非表示 */
    .nav-dots, .keyboard-hint, .decorative {
        display: none;
    }
}

/* 極めて短い (横向きスマートフォン、< 500px 高さ) */
@media (max-height: 500px) {
    :root {
        --slide-padding: clamp(0.4rem, 2vw, 1rem);
        --title-size: clamp(1rem, 3.5vw, 1.5rem);
        --h2-size: clamp(0.9rem, 2.5vw, 1.25rem);
        --body-size: clamp(0.65rem, 1vw, 0.85rem);
    }
}

/* 狭いビューポート (< 600px 幅) */
@media (max-width: 600px) {
    :root {
        --title-size: clamp(1.25rem, 7vw, 2.5rem);
    }

    /* グリッドを垂直にスタック */
    .grid {
        grid-template-columns: 1fr;
    }
}

/* ===========================================
   動きの削減
   ユーザーの設定を尊重
   =========================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.2s !important;
    }

    html {
        scroll-behavior: auto;
    }
}

オーバーフロー防止チェックリスト

プレゼンテーションを生成する前に、心の中で確認してください:

1. ✅ すべての .slide に height: 100vh; height: 100dvh; overflow: hidden; がある
2. ✅ すべてのフォントサイズが clamp(min, preferred, max) を使用している
3. ✅ すべての間隔が clamp() またはビューポートユニットを使用している
4. ✅ コンテンツコンテナに max-height 制約がある
5. ✅ 画像に max-height: min(50vh, 400px) またはそれに類するものがある
6. ✅ グリッドが auto-fit と minmax() をレスポンシブカラムに使用している
7. ✅ ブレークポイントが高さに存在する: 700px、600px、500px
8. ✅ コンテンツ要素にはピクセルの固定高さがない
9. ✅ スライドごとのコンテンツが密度制限を遵守している

コンテンツがフィットしない場合

コンテンツが多すぎる場合:

すべき:

• 複数のスライドに分割
• 箇条書きを削減 (スライドごとに最大 5-6 個)
• テキストを短縮 (箇条書きごとに 1-2 行を目指す)
• より小さいコードスニペットを使用
• 「続き」スライドを作成

すべき:

• フォントサイズを読める範囲より小さくしない
• パディング/スペーシングを完全に削除しない
• スクロールを許可しない
• フィットするようにコンテンツを詰め込まない

ビューポート適合のテスト

生成後、ユーザーにこれらのサイズでテストすることをお勧めします:

• デスクトップ: 1920×1080、1440×900、1280×720
• タブレット: 1024×768、768×1024 (縦向き)
• モバイル: 375×667、414×896
• 横向きスマートフォン: 667×375、896×414

---

フェーズ 0: モード検出

まず、ユーザーが何を望んでいるかを判定します:

モード A: 新規プレゼンテーション

• ユーザーがゼロからスライドを作成したい
• フェーズ 1 (コンテンツディスカバリー) に進む

モード B: PPT 変換

• ユーザーが変換する PowerPoint ファイル (.ppt、.pptx) を持っている
• フェーズ 4 (PPT 抽出) に進む

モード C: 既存プレゼンテーション拡張

• ユーザーが HTML プレゼンテーションを持っており、改善したい
• 既存ファイルを読む、構造を理解し、拡張する

---

フェーズ 1: コンテンツディスカバリー (新規プレゼンテーション)

設計する前に、コンテンツを理解してください。AskUserQuestion 経由で質問:

ステップ 1.1: プレゼンテーションコンテキスト

質問 1: 目的

• ヘッダー: 「目的」
• 質問: 「このプレゼンテーションは何のためですか?」
• オプション:
  • 「ピッチデック」 — 投資家/クライアントへアイデア、製品、または会社を売ること
  • 「教育/チュートリアル」 — 概念の説明、ハウツーガイド、教育コンテンツ
  • 「カンファレンストーク」 — イベントでのスピーキング、テックトーク、基調講演
  • 「社内プレゼンテーション」 — チーム更新、戦略会議、会社更新

質問 2: スライド数

• ヘッダー: 「長さ」
• 質問: 「スライド数はおおよそいくつですか?」
• オプション:
  • 「短い (5-10)」 — クイックピッチ、ライトニングトーク
  • 「中間 (10-20)」 — 標準プレゼンテーション
  • 「長い (20+)」 — ディープダイブ、包括的なトーク

質問 3: コンテンツ

• ヘッダー: 「コンテンツ」
• 質問: 「コンテンツは準備完了ですか、それとも構造化に役立つ必要がありますか?」
• オプション:
  • 「すべてのコンテンツが準備完了」 — プレゼンテーションを設計するだけで済みます
  • 「粗いメモがある」 — スライドに整理するのに役立つ
  • 「トピックだけある」 — 完全なアウトラインの作成に役立つ

ユーザーがコンテンツを持っている場合、共有するよう依頼してください (テキスト、箇条書き、画像など)。

---

フェーズ 2: スタイルディスカバリー (ビジュアル探索)

重大: これは「見せる、言わない」フェーズです。

ほとんどの人は、単語でデザイン設定を説明できません。「ミニマリストですか、それは大胆ですか?」と聞く代わりに、ミニプレビューを生成し、反応させます。

ユーザーがプリセットを選択する方法

ユーザーは 2 つの方法でスタイルを選択できます:

オプション A: ガイド付きディスカバリー (デフォルト)

• ユーザーが気分質問に答える
• スキルは回答に基づいて 3 つのプレビューファイルを生成
• ユーザーはブラウザでプレビューを表示し、お気に入りを選ぶ
• これは特定のスタイルが想定されないユーザーに最適

オプション B: 直接選択

• ユーザーがすでに何が欲しいかを知っている場合、名前でプリセットをリクエストできます
• 例: 「Bold Signal スタイルを使用」または 「Dark Botanical のようなものが欲しい」
• フェーズ 3 にスキップ

利用可能なプリセット:

プリセット	ビブ	最適
Bold Signal	自信、高インパクト	ピッチデック、基調講演
Electric Studio	クリーン、プロフェッショナル	エージェンシープレゼンテーション
Creative Voltage	エネルギッシュ、レトロモダン	クリエイティブピッチ
Dark Botanical	エレガント、洗練	プレミアムブランド
Notebook Tabs	エディトリアル、組織化	レポート、レビュー
Pastel Geometry	フレンドリー、親切	製品概要
Split Pastel	遊び心、モダン	クリエイティブエージェンシー
Vintage Editorial	機知、個性的	個人ブランド
Neon Cyber	未来的、テクニカル	テックスタートアップ
Terminal Green	開発者向け	開発ツール、API
Swiss Modern	ミニマル、正確	企業、データ
Paper & Ink	文学的、思慮深い	ストーリーテリング

ステップ 2.0: スタイルパス選択

まず、ユーザーがスタイルを選ぶ方法を聞いてください:

質問: スタイル選択方法

• ヘッダー: 「スタイル」
• 質問: 「プレゼンテーションスタイルを選ぶ方法は?」
• オプション:
  • 「オプションを見せて」 — 私のニーズに基づいて 3 つのプレビューを生成 (ほとんどのユーザーに推奨)
  • 「知りたい」 — プリセットリストから選択

「オプションを見せて」の場合 → ステップ 2.1 に進む (ムード選択)

「知りたい」の場合 → プリセットピッカーを表示:

質問: プリセットを選択

• ヘッダー: 「プリセット」
• 質問: 「どのスタイルを使用しますか?」
• オプション:
  • 「Bold Signal」 — ダークの充実したカードビブ、自信的で高インパクト
  • 「Dark Botanical」 — 柔らかい抽象図形を備えたエレガントダーク
  • 「Notebook Tabs」 — カラフルなセクションタブを備えたエディトリアルペーパーに見える
  • 「Pastel Geometry」 — フレンドリーなパステルと装飾薬

(ユーザーが 1 を選ぶ場合、フェーズ 3 にスキップ。詳細をもっと見たい場合、追加プリセットを表示するか、ガイド付きディスカバリーに進む)

ステップ 2.1: ムード選択 (ガイド付きディスカバリー)

質問 1: 感覚

• ヘッダー: 「ビブ」
• 質問: 「スライドを見るときに聴衆はどのような気分を持つべきですか?」
• オプション:
  • 「感動/自信」 — プロ的、信頼できる、このチームは何をしているかを知っている
  • 「興奮/エネルギッシュ」 — イノベーティブ、大胆、これは未来
  • 「落ち着き/集中」 — クリア、思慮深い、従うのが簡単
  • 「インスピレーション/感動」 — 感情的、ストーリーテリング、記憶に残る
• multiSelect: true (最大 2 個まで選択可能)

ステップ 2.2: スタイルプレビューを生成

ムード選択に基づいて、 3 つの異なるスタイルプレビューを生成 一時ディレクトリ内のミニ HTML ファイルとして。各プレビューは 1 つのタイトルスライドを表示する必要があります:

• タイポグラフィ (フォント選択、見出し/本体階層)
• カラーパレット (背景、アクセント、テキスト色)
• アニメーションスタイル (要素がどのように出現するか)
• 全体的な美的感覚

考慮するプレビュースタイル (ムードに基づいて 3 つを選択):

ムード	スタイルオプション
感動/自信	「Bold Signal」、「Electric Studio」、「Dark Botanical」
興奮/エネルギッシュ	「Creative Voltage」、「Neon Cyber」、「Split Pastel」
落ち着き/集中	「Notebook Tabs」、「Paper & Ink」、「Swiss Modern」
インスピレーション/感動	「Dark Botanical」、「Vintage Editorial」、「Pastel Geometry」

重要: これらの一般的なパターンを使用しない:

• 白い背景の紫グラデーション
• Inter、Roboto、またはシステムフォント
• 標準的な青い一次色
• 予測可能なヒーローレイアウト

代わりに、特徴的な選択肢を使用:

• ユニークなフォントペアリング (Clash Display、Satoshi、Cormorant Garamond、DM Sans など)
• 性格のある一貫したカラーテーマ
• 大気背景 (グラデーション、微妙なパターン、深さ)
• シグネチャーアニメーションモーメント

ステップ 2.3: プレビューを提示

プレビューを作成: .claude-design/slide-previews/

.claude-design/slide-previews/
├── style-a.html   # 最初のスタイルオプション
├── style-b.html   # 2 番目のスタイルオプション
├── style-c.html   # 3 番目のスタイルオプション
└── assets/        # 共有アセット

各プレビューファイルは:

• 自己完結型 (インライン CSS/JS)
• 1 つの「タイトルスライド」美的感覚を表示
• モーション動作を発揮するためのアニメーション
• 〜50-100 行、完全なプレゼンテーションではない

ユーザーに表示:

比較する 3 つのスタイルプレビューを作成しました:

**スタイル A: [名前]** — [1 文の説明]
**スタイル B: [名前]** — [1 文の説明]
**スタイル C: [名前]** — [1 文の説明]

各ファイルを開いて動作中に見てください:
- .claude-design/slide-previews/style-a.html
- .claude-design/slide-previews/style-b.html
- .claude-design/slide-previews/style-c.html

見て教えてください:
1. どのスタイルが最も共鳴しますか?
2. それについてあなたは何が好きですか?
3. 何か変えたい?

次に AskUserQuestion を使用:

質問: スタイルを選択

• ヘッダー: 「スタイル」
• 質問: 「どのスタイルプレビューを好みますか?」
• オプション:
  • 「スタイル A: [名前]」 — [簡潔な説明]
  • 「スタイル B: [名前]」 — [簡潔な説明]
  • 「スタイル C: [名前]」 — [簡潔な説明]
  • 「要素を混合」 — 異なるスタイルから側面を結合

「要素を混合」の場合、具体的に聞いてください。

---

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

次に、以下に基づいて完全なプレゼンテーションを生成:

• フェーズ 1 からのコンテンツ
• フェーズ 2 からのスタイル

ファイル構造

単一プレゼンテーションの場合:

presentation.html    # 自己完結型プレゼンテーション
assets/              # 画像 (任意)

複数のプレゼンテーション付きプロジェクトの場合:

[presentation-name].html
[presentation-name]-assets/

HTML アーキテクチャ

すべてのプレゼンテーションでこの構造に従う:

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>プレゼンテーションタイトル</title>

    <!-- フォント (Fontshare または Google Fonts を使用) -->
    <link rel="stylesheet" href="https://api.fontshare.com/v2/css?f[]=...">

    <style>
        /* ===========================================
           CSS カスタムプロパティ (テーマ)
           簡単に変更: これらを変更して全体を変更
           =========================================== */
        :root {
            /* 色 */
            --bg-primary: #0a0f1c;
            --bg-secondary: #111827;
            --text-primary: #ffffff;
            --text-secondary: #9ca3af;
            --accent: #00ffcc;
            --accent-glow: rgba(0, 255, 204, 0.3);

            /* タイポグラフィ - レスポンシブスケーリング用に clamp() を使用する必要があります */
            --font-display: 'Clash Display', sans-serif;
            --font-body: 'Satoshi', sans-serif;
            --title-size: clamp(2rem, 6vw, 5rem);
            --subtitle-size: clamp(0.875rem, 2vw, 1.25rem);
            --body-size: clamp(0.75rem, 1.2vw, 1rem);

            /* 間隔 - レスポンシブスケーリング用に clamp() を使用する必要があります */
            --slide-padding: clamp(1.5rem, 4vw, 4rem);
            --content-gap: clamp(1rem, 2vw, 2rem);

            /* アニメーション */
            --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
            --duration-normal: 0.6s;
        }

        /* ===========================================
           ベーススタイル
           =========================================== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
            scroll-snap-type: y mandatory;
            height: 100%;
        }

        body {
            font-family: var(--font-body);
            background: var(--bg-primary);
            color: var(--text-primary);
            overflow-x: hidden;
            height: 100%;
        }

        /* ===========================================
           スライドコンテナ
           重大: 各スライドはビューポット内に正確にフィットする必要があります
           - height: 100vh を使用 (min-height ではない)
           - overflow: hidden を使用してスクロールを防止
           - コンテンツは clamp() 値でスケーリング
           =========================================== */
        .slide {
            width: 100vw;
            height: 100vh; /* 正確なビューポート高さ - スクロールなし */
            height: 100dvh; /* モバイル向けの動的ビューポート高さ */
            padding: var(--slide-padding);
            scroll-snap-align: start;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            overflow: hidden; /* コンテンツオーバーフローを防止 */
        }

        /* オーバーフローを防ぐコンテンツラッパー */
        .slide-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            max-height: 100%;
            overflow: hidden;
        }

        /* ===========================================
           レスポンシブブレークポイント
           異なる画面サイズ用にコンテンツを調整
           =========================================== */
        @media (max-height: 600px) {
            :root {
                --slide-padding: clamp(1rem, 3vw, 2rem);
                --content-gap: clamp(0.5rem, 1.5vw, 1rem);
            }
        }

        @media (max-width: 768px) {
            :root {
                --title-size: clamp(1.5rem, 8vw, 3rem);
            }
        }

        @media (max-height: 500px) and (orientation: landscape) {
            /* 横向きスマートフォン用の超コンパクト */
            :root {
                --title-size: clamp(1.25rem, 5vw, 2rem);
                --slide-padding: clamp(0.75rem, 2vw, 1.5rem);
            }
        }

        /* ===========================================
           アニメーション
           .visible クラス経由でトリガー (JS によってスクロール時に追加)
           =========================================== */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity var(--duration-normal) var(--ease-out-expo),
                        transform var(--duration-normal) var(--ease-out-expo);
        }

        .slide.visible .reveal {
            opacity: 1;
            transform: translateY(0);
        }

        /* 子をスタッガー */
        .reveal:nth-child(1) { transition-delay: 0.1s; }
        .reveal:nth-child(2) { transition-delay: 0.2s; }
        .reveal:nth-child(3) { transition-delay: 0.3s; }
        .reveal:nth-child(4) { transition-delay: 0.4s; }

        /* ... より多くのスタイル ... */
    </style>
</head>
<body>
    <!-- プログレスバー (オプション) -->
    <div class="progress-bar"></div>

    <!-- ナビゲーションドット (オプション) -->
    <nav class="nav-dots">
        <!-- JS によって生成 -->
    </nav>

    <!-- スライド -->
    <section class="slide title-slide">
        <h1 class="reveal">プレゼンテーションタイトル</h1>
        <p class="reveal">サブタイトルまたは著者</p>
    </section>

    <section class="slide">
        <h2 class="reveal">スライドタイトル</h2>
        <p class="reveal">コンテンツ...</p>
    </section>

    <!-- その他のスライド... -->

    <script>
        /* ===========================================
           スライドプレゼンテーションコントローラー
           ナビゲーション、アニメーション、インタラクションを処理
           =========================================== */

        class SlidePresentation {
            constructor() {
                // ... 初期化
            }

            // ... メソッド
        }

        // 初期化
        new SlidePresentation();
    </script>
</body>
</html>

必須 JavaScript 機能

すべてのプレゼンテーションには以下を含める必要があります:

1. SlidePresentation クラス — メインコントローラー

   • キーボードナビゲーション (矢印、スペース)
   • タッチ/スワイプサポート
   • マウスホイールナビゲーション
   • プログレスバー更新
   • ナビゲーションドット

2. Intersection Observer — スクロールトリガーアニメーション用

   • スライドがビューポートに入ると .visible クラスを追加
   • CSS アニメーション効率的にトリガー

3. オプション拡張 (スタイルに基づく):

   • 足跡を持つカスタムカーソル
   • パーティクルシステム背景 (キャンバス)
   • パララックス効果
   • ホバー時の 3D チルト
   • マグネティックボタン
   • カウンターアニメーション

コード品質要件

コメント: 各セクションには以下を説明するクリアなコメントが必要:

• それが何をするか
• なぜ存在するか
• それを変更する方法

/* ===========================================
   カスタムカーソル
   トレイル効果でマウスをフォローするスタイライズされたカーソルを作成します。
   - マウスムーブメント用に lerp (線形補間) を使用
   - インタラクティブ要素上でホバー時に大きくなる
   =========================================== */
class CustomCursor {
    constructor() {
        // ...
    }
}

アクセシビリティ:

• セマンティック HTML (<section>、<nav>、<main>)
• キーボードナビゲーション機能
• 必要に応じて ARIA ラベル
• 動きの削減サポート

@media (prefers-reduced-motion: reduce) {
    .reveal {
        transition: opacity 0.3s ease;
        transform: none;
    }
}

レスポンシブ & ビューポート適合 (重大):

上の「重大: ビューポート適合要件」セクションで完全な CSS とガイドラインを参照。

クイックリファレンス:

• すべての .slide は height: 100vh; height: 100dvh; overflow: hidden; を必須
• すべてのタイポグラフィとスペーシングは clamp() を使用する必要があります
• コンテンツ密度制限を遵守 (最大 4-6 箇条書き、最大 6 カード等)
• 高さのブレークポイントを含める: 700px、600px、500px
• コンテンツがフィットしない場合 → 複数のスライドに分割、スクロールしない

---

フェーズ 4: PPT 変換

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

ステップ 4.1: コンテンツ抽出

python-pptx を使用して Python を抽出:

from pptx import Presentation
from pptx.util import Inches, Pt
import json
import os
import base64

def extract_pptx(file_path, output_dir):
    """
    PowerPoint ファイルからすべてのコンテンツを抽出します。
    スライド、テキスト、および画像を含む JSON 構造を返します。
    """
    prs = Presentation(file_path)
    slides_data = []

    # アセットディレクトリを作成
    assets_dir = os.path.join(output_dir, 'assets')
    os.makedirs(assets_dir, exist_ok=True)

    for slide_num, slide in enumerate(prs.slides):
        slide_data = {
            'number': slide_num + 1,
            'title': '',
            'content': [],
            'images': [],
            'notes': ''
        }

        for shape in slide.shapes:
            # タイトルを抽出
            if shape.has_text_frame:
                if shape == slide.shapes.title:
                    slide_data['title'] = shape.text
                else:
                    slide_data['content'].append({
                        'type': 'text',
                        'content': shape.text
                    })

            # 画像を抽出
            if shape.shape_type == 13:  # Picture
                image = shape.image
                image_bytes = image.blob
                image_ext = image.ext
                image_name = f"slide{slide_num + 1}_img{len(slide_data['images']) + 1}.{image_ext}"
                image_path = os.path.join(assets_dir, image_name)

                with open(image_path, 'wb') as f:
                    f.write(image_bytes)

                slide_data['images'].append({
                    'path': f"assets/{image_name}",
                    'width': shape.width,
                    'height': shape.height
                })

        # メモを抽出
        if slide.has_notes_slide:
            notes_frame = slide.notes_slide.notes_text_frame
            slide_data['notes'] = notes_frame.text

        slides_data.append(slide_data)

    return slides_data

ステップ 4.2: コンテンツ構造確認

抽出したコンテンツをユーザーに提示:

PowerPoint から以下を抽出しました:

**スライド 1: [タイトル]**
- [コンテンツサマリー]
- 画像: [個数]

**スライド 2: [タイトル]**
- [コンテンツサマリー]
- 画像: [個数]

...

すべての画像はアセットフォルダに保存されています。

これは正しく見えますか? スタイル選択に進めばいいですか?

ステップ 4.3: スタイル選択

抽出したコンテンツを念頭に置いてフェーズ 2 (スタイルディスカバリー) に進む。

ステップ 4.4: HTML 生成

抽出したコンテンツを選択したスタイルに変換、以下を保持:

• すべてのテキストコンテンツ
• すべての画像 (アセットフォルダから参照)
• スライド順序
• スピーカーメモ (HTML コメントまたは別ファイル)

---

フェーズ 5: 配信

最終出力

プレゼンテーション完成時:

1. 一時ファイルのクリーンアップ

   • 存在する場合、.claude-design/slide-previews/ を削除

2. プレゼンテーションを開く

   • open [filename].html を使用してブラウザで起動

3. サマリーを提供

プレゼンテーションの準備が完了しました!

📁 ファイル: [filename].html
🎨 スタイル: [スタイル名]
📊 スライド: [個数]

**ナビゲーション:**
- 矢印キー (← →) またはスペースでナビゲート
- スクロール/スワイプも機能
- 右のドットをクリックしてスライドにジャンプ

**カスタマイズするには:**
- 色: 上部の `:root` CSS 変数を探す
- フォント: Fontshare/Google Fonts リンクを変更
- アニメーション: `.reveal` クラスのタイミングを変更

何か調整してほしいことはありますか?

---

スタイルリファレンス: エフェクト → フィーリングマッピング

このガイドを使用してアニメーションを意図したフィーリングにマッチさせる:

ドラマティック / シネマティック

• 遅いフェードイン (1-1.5s)
• 大きなスケール遷移 (0.9 → 1)
• スポットライト効果付きダーク背景
• パララックススクローリング
• フルブリードイメージ

テクニカル / 未来的

• ネオングロー効果 (アクセント色を使用した box-shadow)
• パーティクルシステム (キャンバス背景)
• グリッドパターン
• アクセント用モノスペースフォント
• グリッチまたはスクランブルテキスト効果
• シアン、マゼンタ、エレクトリックブルーパレット

遊び心 / フレンドリー

• バウンシーイージング (スプリング物理学)
• 丸いコーナー (大きい半径)
• パステルまたは明るい色
• フローティング/ボビングアニメーション
• 手書きまたはイラスト要素

プロフェッショナル / 企業

• 微妙で高速なアニメーション (200-300ms)
• クリーンな sans-serif フォント
• ネイビー、スレート、またはチャコール背景
• 正確なスペーシングと配置
• 最小限の装飾要素
• データ可視化フォーカス

落ち着き / ミニマル

• 非常に遅く、微妙なモーション
• 高いホワイトスペース
• ミュートされたカラーパレット
• Serif タイポグラフィ
• 寛大なパディング
• コンテンツに焦点を当てる、気晴らしなし

エディトリアル / マガジン

• 強いタイポグラフィ階層
• プルクォートとコールアウト
• 画像テキストインタープレイ
• グリッド破りレイアウト
• Serif 見出し、sans-serif 本文
• 黒と白と 1 つのアクセント

---

アニメーションパターンリファレンス

入場アニメーション

/* フェード + スライドアップ (最も一般的) */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s var(--ease-out-expo),
                transform 0.6s var(--ease-out-expo);
}

.visible .reveal {
    opacity: 1;
    transform: translateY(0);
}

/* スケールイン */
.reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s, transform 0.6s var(--ease-out-expo);
}

/* 左からスライド */
.reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.6s, transform 0.6s var(--ease-out-expo);
}

/* ブラーイン */
.reveal-blur {
    opacity: 0;
    filter: blur(10px);
    transition: opacity 0.8s, filter 0.8s var(--ease-out-expo);
}

背景効果

/* グラデーントメッシュ */
.gradient-bg {
    background:
        radial-gradient(ellipse at 20% 80%, rgba(120, 0, 255, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(0, 255, 200, 0.2) 0%, transparent 50%),
        var(--bg-primary);
}

/* ノイズテクスチャ */
.noise-bg {
    background-image: url("data:image/svg+xml,..."); /* インライン SVG ノイズ */
}

/* グリッドパターン */
.grid-bg {
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 50px 50px;
}

インタラクティブ効果

/* ホバー時の 3D チルト */
class TiltEffect {
    constructor(element) {
        this.element = element;
        this.element.style.transformStyle = 'preserve-3d';
        this.element.style.perspective = '1000px';
        this.bindEvents();
    }

    bindEvents() {
        this.element.addEventListener('mousemove', (e) => {
            const rect = this.element.getBoundingClientRect();
            const x = (e.clientX - rect.left) / rect.width - 0.5;
            const y = (e.clientY - rect.top) / rect.height - 0.5;

            this.element.style.transform = `
                rotateY(${x * 10}deg)
                rotateX(${-y * 10}deg)
            `;
        });

        this.element.addEventListener('mouseleave', () => {
            this.element.style.transform = 'rotateY(0) rotateX(0)';
        });
    }
}

---

トラブルシューティング

一般的な問題

フォントが読み込まない:

• Fontshare/Google Fonts URL をチェック
• フォント名が CSS で一致することを確認

アニメーションがトリガーしない:

• Intersection Observer が実行されていることを確認
• .visible クラスが追加されていることを確認

スクロールスナップが機能しない:

• html/body に scroll-snap-type があることを確認
• 各スライドに scroll-snap-align: start が必要

モバイル問題:

• 768px ブレークポイントで重い効果を無効化
• タッチイベントをテスト
• パーティクル数を削減するか、キャンバスを無効化

パフォーマンス問題:

• will-change をわずかに使用
• transform と opacity アニメーションを優先
• スクロール/mousemove ハンドラーをスロットル

---

関連スキル

• learn — プレゼンテーション用の FORZARA.md ドキュメントを生成
• frontend-design — スライドを超えた複雑なインタラクティブページ用
• design-and-refine:design-lab — コンポーネント設計の反復用

---

例セッションフロー

1. ユーザー: 「AI スタートアップのピッチデックを作成したい」
2. スキルは目的、長さ、コンテンツについて質問
3. ユーザーは箇条書きとキーメッセージを共有
4. スキルは望ましいフィーリングについて質問 (感動 + 興奮)
5. スキルは 3 つのスタイルプレビューを生成
6. ユーザーはスタイル B (Neon Cyber) を選び、背景を暗くするよう要求
7. スキルはすべてのスライド付きの完全なプレゼンテーションを生成
8. スキルはブラウザでプレゼンテーションを開く
9. ユーザーは特定のスライドの調整をリクエスト
10. 最終プレゼンテーション配信

---

変換セッションフロー

1. ユーザー: 「slides.pptx をウェブプレゼンテーションに変換」
2. スキルは PPT からコンテンツと画像を抽出
3. スキルは抽出したコンテンツをユーザーに確認
4. スキルは望ましいフィーリング/スタイルについて質問
5. スキルはスタイルプレビューを生成
6. ユーザーはスタイルを選択
7. スキルは保存されたアセット付き HTML プレゼンテーションを生成
8. 最終プレゼンテーション配信