frontend-slides

name	frontend-slides
description	Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
origin	ECC

Frontend Slides

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

zarazhangrui が紹介したビジュアル探索アプローチにインスパイアされています（クレジット: @zarazhangrui）。

起動条件

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

絶対条件

1. 依存関係ゼロ: デフォルトではインライン CSS と JS を持つ単一の自己完結型 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() でスケール
• コンテンツが収まらない場合は複数のスライドに分割
• 読めないサイズまでテキストを縮小してオーバーフローを解決しない
• スライド内にスクロールバーを許可しない

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 を尊重

コンテンツ密度制限

ユーザーが明示的にデンスなスライドを要求し、読みやすさが維持される場合を除き、以下の最大値を使用します:

スライドタイプ	制限
Title	1見出し + 1サブタイトル + オプションのタグライン
Content	1見出し + 4-6箇条書きまたは2つの短い段落
Feature grid	最大6カード
Code	最大8-10行
Quote	1引用 + 帰属
Image	ビューポートに制約された1画像

アンチパターン

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

関連 ECC スキル

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

成果物チェックリスト

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