presentation-builder

Presentation Builder

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

zarazhangrui/frontend-slides を基に、OrchestKit 向けに再構成しています。

基本理念

1. 依存関係ゼロ -- CSS/JS をインラインで記述した単一の HTML ファイルです。npm もビルドツールも必要ありません。
2. 説明するより、見せる -- 抽象的な選択肢ではなく、視覚的なプレビューを生成します。実際に見ることで、好みが見つかります。
3. 個性あるデザイン -- ありきたりな「AI 生成っぽい」見た目を避けます。すべてのプレゼンテーションに、オーダーメイドのような印象を持たせます。
4. 本番品質 -- コメントが充実し、アクセシブルで、高パフォーマンスなコードです。
5. ビューポートへのフィット -- すべてのスライドはビューポート内にぴったり収まる必要があります。スライド内でのスクロールは一切ありません。

Phase 0: モードの判定

ユーザーの希望を判定します。

モード	条件	次のフェーズ
A: 新規プレゼンテーション	ゼロからスライドを作成する	Phase 1
B: PPT 変換	.ppt/.pptx ファイルがある	Read("${CLAUDE_SKILL_DIR}/references/pptx-conversion.md") を読み込んでから Phase 2
C: 強化	既存の HTML プレゼンテーションがある	ファイルを読み込み、構造を把握して強化する

---

Phase 1: コンテンツの確認

デザインを始める前に、コンテンツを把握します。AskUserQuestion を使用します。

質問 1: 目的

• Header: 「目的」
• Options: 「ピッチデッキ」、「教育／チュートリアル」、「カンファレンストーク」、「社内プレゼンテーション」

質問 2: スライド枚数

• Header: 「長さ」
• Options: 「短め（5-10）」、「中程度（10-20）」、「長め（20+）」

質問 3: コンテンツの準備状況

• Header: 「コンテンツ」
• Options: 「コンテンツはすべて準備できています」、「大まかなメモがあります」、「トピックだけあります」

ユーザーがコンテンツを用意している場合は、共有してもらいます。トピックだけの場合は、アウトラインの構成を支援します。

---

Phase 2: スタイルの確認

ここが「説明するより、見せる」フェーズです。

Step 2.0: スタイルの選択方法

スタイルをどのように選ぶか、ユーザーに尋ねます。

• 「選択肢を見せて」 -- ムードに基づいてプレビューを 3 つ生成します（推奨）。
• 「希望は決まっている」 -- プリセット一覧から直接選びます。

利用可能なプリセット（詳細は Read("${CLAUDE_SKILL_DIR}/references/style-presets.md") を読み込みます）：

プリセット	雰囲気	おすすめの用途
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	文学的で思索的	ストーリーテリング

Step 2.1: ムードの選択（ガイド付きのスタイル発見）

「選択肢を見せて」を選んだ場合は、AskUserQuestion を使って尋ねます。

質問: 雰囲気

• 「聴衆にどんな印象を持ってもらいたいですか？」
• Options（multiSelect: true、最大 2 つ選択）：
  • 「感銘／自信」 -- プロフェッショナルで、信頼できる
  • 「興奮／活気」 -- 革新的で、大胆
  • 「落ち着き／集中」 -- 明快で、わかりやすい
  • 「ひらめき／感動」 -- 感情に訴え、印象に残る

ムードとスタイルの対応：

ムード	おすすめのスタイル
感銘／自信	Bold Signal、Electric Studio、Dark Botanical
興奮／活気	Creative Voltage、Neon Cyber、Split Pastel
落ち着き／集中	Notebook Tabs、Paper & Ink、Swiss Modern
ひらめき／感動	Dark Botanical、Vintage Editorial、Pastel Geometry

Step 2.2: スタイルプレビューの生成

.claude-design/slide-previews/ に、異なる特徴を持つミニ HTML ファイルを 3 つ生成します。

.claude-design/slide-previews/
├── style-a.html   # ~50-100 lines, single title slide
├── style-b.html
└── style-c.html

各プレビューは自己完結型で、CSS/JS をインラインで記述し、タイポグラフィ、色、モーションスタイルを見せる、アニメーション付きのタイトルスライドにします。

Step 2.3: プレビューを提示する

ユーザーに3つの選択肢を提示し、AskUserQuestion を使って質問します：

• 「どのスタイルのプレビューが好みですか？」
• 選択肢：Style A、Style B、Style C、「要素を組み合わせる」

---

Phase 3: プレゼンテーションを生成する

コンテンツ（Phase 1）とスタイル（Phase 2）に基づいて、プレゼンテーション全体を生成します。

ファイル出力

presentation.html    # Self-contained presentation
assets/              # Images if any (PPT conversion)

HTML アーキテクチャ

すべてのプレゼンテーションは、次の構造に従います：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Presentation Title</title>
    
    <style>
        /* Theme variables in :root */
        /* Base styles + viewport fitting (see rules/viewport-fitting.md) */
        /* Slide container styles */
        /* Animations */
        /* Responsive breakpoints */
    </style>
</head>
<body>
    <div class="progress-bar"></div>
    <nav class="nav-dots"></nav>
    <section class="slide title-slide">...</section>
    <section class="slide">...</section>
    
    <script>
        /* SlidePresentation class with navigation */
    </script>
</body>
</html>

重要：ビューポートへの適合

すべてのスライドはビューポートに正確に収まる必要があります。 以下を読み込みます：Read("${CLAUDE_SKILL_DIR}/rules/viewport-fitting.md")

簡易チェックリスト：

• すべての .slide に height: 100vh; height: 100dvh; overflow: hidden; がある
• すべてのフォントサイズに clamp(min, preferred, max) を使用する
• すべての間隔に clamp() またはビューポート単位を使用する
• コンテンツが密度制限を守っている（${CLAUDE_SKILL_DIR}/rules/content-density.md を読み込む）
• 高さが 700px、600px、500px の場合のブレークポイントがある
• コンテンツが収まらない場合は、複数のスライドに分割し、スクロールは決して使わない

高度な clamp()/コンテナークエリのパターンについては、responsive-patterns スキルも参照してください。

必須の JavaScript 機能

1. SlidePresentation クラス -- キーボード（矢印キー、スペースキー）、タッチ／スワイプ、マウスホイール、プログレスバー、ナビゲーションドット
2. Intersection Observer -- スクロール時に CSS アニメーション用の .visible クラスを追加する
3. オプションの拡張機能（スタイルによる）：カスタムカーソル、パーティクル背景、視差効果、3D チルト、マグネティックボタン

コード品質

• すべての CSS/JS セクションに、何をするか、なぜそうするか、変更方法を説明する明確なコメントを付ける
• セマンティック HTML（<section>、<nav>、<main>）
• キーボード操作に対応する
• 必要に応じて ARIA ラベルを付ける
• モーション低減に対応する：@media (prefers-reduced-motion: reduce)

アンチパターン（使用禁止）

• フォント： 表示用フォントとして Inter、Roboto、Arial、システムフォントを使う
• 色： #6366f1（汎用的なインディゴ）、白地に紫のグラデーション
• レイアウト： すべて中央揃え、汎用的なヒーローセクション、同一のカードグリッド
• 装飾： 写実的なイラスト、過度なグラスモーフィズム

---

Phase 4: 納品

1. .claude-design/slide-previews/ が存在する場合はクリーンアップする
2. プレゼンテーションを開く：open [filename].html
3. 概要を提示する：

Your presentation is ready!

File: [filename].html
Style: [Style Name]
Slides: [count]

Navigation:
- Arrow keys or Space to navigate
- Scroll/swipe also works
- Click dots on the right to jump

To customize:
- Colors: :root CSS variables at top
- Fonts: Change the font link
- Animations: Modify .reveal class timings

---

スタイルリファレンス：印象と効果の対応

印象	アニメーションのスタイル	ビジュアルアプローチ
ドラマチック／シネマティック	ゆっくりしたフェードイン（1～1.5秒）、大きなスケール遷移	暗い背景、スポットライト効果、視差効果
テクノロジー／未来的	ネオングロー、グリッチ／スクランブルテキスト	パーティクルシステム、グリッドパターン、等幅フォントのアクセント
遊び心／親しみやすさ	弾むイージング、浮遊アニメーション	パステル／明るい色、丸みのある角
プロフェッショナル／企業向け	控えめで高速なアニメーション（200～300ms）	すっきりしたサンセリフ、ネイビー／スレート、データビジュアライゼーションを重視
穏やか／ミニマル	非常にゆっくりとした控えめな動き	広い余白、落ち着いた配色、セリフ体
エディトリアル／雑誌風	明確なタイポグラフィの階層	プルクオート、グリッドを崩したレイアウト、白黒＋アクセント

---

トラブルシューティング

問題	解決策
フォントが読み込まれない	Fontshare/Google Fonts の URL を確認し、フォント名が CSS と一致しているか確認する
アニメーションが起動しない	Intersection Observer が実行されていることを確認し、.visible クラスを確認する
スクロールスナップが機能しない	html に scroll-snap-type が、スライドに scroll-snap-align が設定されていることを確認する
モバイルで問題が発生する	768px で負荷の高い効果を無効にし、タッチイベントをテストして、パーティクルを減らす
パフォーマンス	will-change は控えめに使用し、transform/opacity アニメーションを優先する

---

関連スキル

• ork:responsive-patterns -- 高度な clamp()、コンテナークエリ、レスポンシブなブレークポイント
• ork:accessibility -- WCAG 2.2 準拠、キーボード操作、ARIA パターン
• ork:ui-components -- shadcn/ui と Radix のコンポーネントパターン
• ork:demo-producer -- ターミナルの録画と動画デモ

ルール

Read("${CLAUDE_SKILL_DIR}/rules/<file>") を使って必要に応じて読み込みます：

ファイル	内容
viewport-fitting.md	ビューポートに固定するスライドで必須の CSS
content-density.md	スライドの種類ごとのコンテンツ上限

参考資料

必要に応じて Read("${CLAUDE_SKILL_DIR}/references/<file>") で読み込みます。

ファイル	内容
style-presets.md	CSS 変数を使用した、厳選された 12 種類のビジュアルテーマ
pptx-conversion.md	PowerPoint の抽出および変換ワークフロー