frontend-slides

Frontend Slides

ブラウザだけで動作する、依存関係のないアニメーションリッチなHTMLプレゼンテーションを作成します。

zarazhangrui 氏の作品で紹介された視覚的探索アプローチに着想を得ています（クレジット: @zarazhangrui）。

アクティベートするタイミング

• トークデッキ、ピッチデッキ、ワークショップデッキ、社内プレゼンテーションを作成するとき
• .ppt または .pptx のスライドをHTMLプレゼンテーションに変換するとき
• 既存のHTMLプレゼンテーションのレイアウト、動き、タイポグラフィを改善するとき
• 自分のデザインの好みがまだわからないユーザーとプレゼンテーションのスタイルを探るとき

絶対条件

1. 依存関係ゼロ: デフォルトでは、インラインCSSとJSを含む1つの自己完結型HTMLファイルにする。
2. ビューポートフィットは必須: すべてのスライドは内部スクロールなしで1つのビューポートに収まらなければならない。
3. 説明ではなく表示: 抽象的なスタイルに関する質問票ではなく、視覚的なプレビューを使う。
4. 個性的なデザイン: 無難な紫のグラデーション、Inter on white、テンプレートのようなデッキは避ける。
5. プロダクション品質: コードはコメント付きで、アクセシブルで、レスポンシブで、パフォーマンスが高い状態を保つ。

生成する前に、STYLE_PRESETS.md を読んで、ビューポートセーフなCSSベース、密度制限、プリセットカタログ、CSSの注意点を確認してください。

ワークフロー

1. モードの検出

以下のいずれかのパスを選択します:

• 新規プレゼンテーション: ユーザーがトピック、メモ、または完全なドラフトを持っている
• PPT変換: ユーザーが .ppt または .pptx を持っている
• 改善: ユーザーがすでにHTMLスライドを持っており、改善を希望している

2. コンテンツの確認

必要最低限のみを尋ねます:

• 目的: ピッチ、教育、カンファレンストーク、社内アップデート
• 長さ: 短い(5-10)、中程度(10-20)、長い(20+)
• コンテンツの状態: 完成したコピー、ラフなメモ、トピックのみ

ユーザーがコンテンツを持っている場合は、スタイリングの前に貼り付けてもらうよう依頼します。

3. スタイルの探索

デフォルトでは視覚的探索にします。

ユーザーがすでに希望のプリセットを知っている場合は、プレビューをスキップして直接使用します。

それ以外の場合:

1. デッキがどのような雰囲気を作り出すべきかを尋ねます: 印象的、活力、集中、インスピレーション。
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
• 動きの抑制のサポート

5. ビューポートフィットの適用

これを厳格なゲートとして扱います。

ルール:

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

STYLE_PRESETS.md の密度制限と必須CSSブロックを使用します。

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画像

アンチパターン

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

関連ECCスキル

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

成果物チェックリスト

• プレゼンテーションがブラウザでローカルファイルから動作する
• すべてのスライドがスクロールなしでビューポートに収まる
• スタイルが個性的で意図的である
• アニメーションが意味を持ち、ノイズになっていない
• 動きの抑制が尊重されている
• ファイルパスとカスタマイズポイントが引き渡し時に説明されている