Frontend Slides

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

zarazhangruiの作品に見られるビジュアル探索アプローチにインスパイアされています（クレジット：@zarazhangrui）。

アクティベーション条件

• トークデック、ピッチデック、ワークショップデック、社内プレゼンテーションの作成
• .pptや.pptxスライドのHTMLプレゼンテーションへの変換
• 既存HTMLプレゼンテーションのレイアウト、モーション、タイポグラフィの改善
• デザインの好みがまだ分からないユーザーとのプレゼンテーションスタイルの探索

非交渉事項

1. 依存関係ゼロ：デフォルトでインラインCSSとJSを含む1つの自己完結型HTMLファイル。
2. ビューポートフィットは必須：すべてのスライドが内部スクロールなしで1ビューポートに収まること。
3. 見せて、語らない：抽象的なスタイル質問ではなくビジュアルプレビューを使用。
4. 独自のデザイン：汎用的な紫グラデーション、Inter-on-white、テンプレート風のデッキは避ける。
5. プロダクション品質：コメント付き、アクセシブル、レスポンシブ、パフォーマントなコードを維持。

生成前に、ビューポートセーフCSSベース、密度制限、プリセットカタログ、CSS注意点についてSTYLE_PRESETS.mdを参照してください。

ワークフロー

1. モード検出

パスを選択：

• 新規プレゼンテーション：トピック、ノート、完成ドラフトがある
• PPT変換：.pptまたは.pptxがある
• 改善：既にHTMLスライドがあり改善が必要

2. コンテンツの把握

最低限必要なことだけを質問：

• 目的：ピッチ、教育、カンファレンストーク、社内アップデート
• 長さ：短い（5-10）、中（10-20）、長い（20+）
• コンテンツの状態：完成コピー、ラフノート、トピックのみ

コンテンツがある場合は、スタイリング前にペーストを依頼。

3. スタイルの発見

デフォルトでビジュアル探索。

希望するプリセットが既に分かっている場合、プレビューをスキップして直接使用。

それ以外は：

1. デッキが作り出すべき印象を質問：impressed、energized、focused、inspired。
2. .ecc-design/slide-previews/に3つのシングルスライドプレビューファイルを生成。
3. 各プレビューは自己完結型で、タイポグラフィ/色/モーションが明確に表示され、約100行以内のスライドコンテンツに収まること。
4. どのプレビューを使うか、またはどの要素を混ぜるかをユーザーに質問。

ムードからスタイルへのマッピングにはSTYLE_PRESETS.mdのプリセットガイドを使用。

4. プレゼンテーションの構築

出力：

• presentation.html
• [presentation-name].html

抽出またはユーザー提供の画像をデッキに含む場合のみassets/フォルダを使用。

必須構造：

• セマンティックスライドセクション
• STYLE_PRESETS.mdからのビューポートセーフCSSベース
• テーマ値用のCSSカスタムプロパティ
• キーボード、ホイール、タッチナビゲーション用プレゼンテーションコントローラークラス
• 表示アニメーショントリガー用Intersection Observer
• reduced-motionサポート

5. ビューポートフィットの強制

ハードゲートとして扱う。

ルール：

• すべての.slideがheight: 100vh; height: 100dvh; overflow: hidden;を使用
• すべてのタイプとスペーシングがclamp()でスケール
• コンテンツが収まらない場合、複数スライドに分割
• 可読サイズ以下にテキストを縮小してオーバーフローを解決しない
• スライド内にスクロールバーを許可しない

密度制限と必須CSSブロックについてはSTYLE_PRESETS.mdを使用。

6. 検証

以下のサイズで完成デッキを確認：

• 1920x1080
• 1280x720
• 768x1024
• 375x667
• 667x375

ブラウザオートメーションが利用可能な場合、スライドオーバーフローがないこととキーボードナビゲーションが動作することを確認。

7. 納品

納品時：

• ユーザーが保持を希望しない限り一時プレビューファイルを削除
• プラットフォームに適したオープナーでデッキを開く
• ファイルパス、使用したプリセット、スライド数、簡単なテーマカスタマイズポイントを要約

現在のOSに適したオープナーを使用：

• macOS: open file.html
• Linux: xdg-open file.html
• Windows: start "" file.html

PPT / PPTX変換

PowerPoint変換：

1. テキスト、画像、ノートの抽出にはpython3とpython-pptxを優先。
2. python-pptxが利用できない場合、インストールするか手動/エクスポートベースのワークフローにフォールバックするか質問。
3. スライド順序、スピーカーノート、抽出アセットを保持。
4. 抽出後、新規プレゼンテーションと同じスタイル選択ワークフローを実行。

変換はクロスプラットフォームに保つ。Pythonで対応可能な場合はmacOS専用ツールに依存しない。

実装要件

HTML / CSS

• ユーザーが明示的にマルチファイルプロジェクトを望まない限り、インラインCSSとJSを使用。
• フォントはGoogle FontsまたはFontshareから。
• 雰囲気のある背景、強いタイプ階層、明確なビジュアルディレクションを優先。
• イラストではなく、抽象的な形状、グラデーション、グリッド、ノイズ、ジオメトリを使用。

JavaScript

含めるもの：

• キーボードナビゲーション
• タッチ / スワイプナビゲーション
• マウスホイールナビゲーション
• プログレスインジケーターまたはスライドインデックス
• 表示時のアニメーショントリガー

アクセシビリティ

• セマンティック構造（main、section、nav）を使用
• コントラストを読みやすく保つ
• キーボードのみのナビゲーションをサポート
• prefers-reduced-motionを尊重

コンテンツ密度制限

ユーザーが明示的に密なスライドを要求し可読性が維持される場合を除き、以下の最大値を使用：

スライドタイプ	制限
タイトル	1見出し + 1サブタイトル + オプションのタグライン
コンテンツ	1見出し + 4-6箇条書きまたは2短パラグラフ
フィーチャーグリッド	最大6カード
コード	最大8-10行
引用	1引用 + 帰属
画像	ビューポートに制約された1画像

アンチパターン

• ビジュアルアイデンティティのない汎用スタートアップグラデーション
• 意図的にエディトリアルでない限りシステムフォントデッキ
• 長い箇条書きの壁
• スクロールが必要なコードブロック
• 短い画面で壊れる固定高さのコンテンツボックス
• -clamp(...)のような無効な否定CSS関数

関連ECCスキル

• frontend-patterns デッキ周りのコンポーネントとインタラクションパターン
• liquid-glass-design プレゼンテーションが意図的にAppleのガラス美学を借りる場合
• e2e-testing 最終デッキの自動ブラウザ検証が必要な場合

納品チェックリスト

• プレゼンテーションがブラウザでローカルファイルから動作
• すべてのスライドがスクロールなしでビューポートに収まる
• スタイルが独自で意図的
• アニメーションが意味のあるもので、ノイズではない
• reduced motionが尊重される
• ファイルパスとカスタマイズポイントが納品時に説明される