frontend-slides-editable

フロントエンドスライド（編集可能）

ゼロ依存で、ブラウザー内だけで動作する、アニメーション豊富な HTML プレゼンテーションを作成します。組み込みエディターを備え、オブジェクトの移動、Ctrl+クリックでの複数選択、整列時のスナップ、フォントファミリーとサイズのコントロールを使った簡単なテキスト書式設定、元に戻す／やり直し、ページサイドバー（スライドのサムネイル、ドラッグによる並べ替え、削除）、プレゼンテーションツール（レーザーポインターと全画面表示）、Ctrl+Sでの保存、HTML のエクスポートに対応します。

このスキルは、編集可能なデッキのランタイムを追加した frontend-slides スキルのコピーです。エディター機能を必要としない読み取り専用のデッキには、元の frontend-slides スキルを使用してください（スキルディレクトリの構成は同じです）。

<preset_fidelity> 親の frontend-slides との同等性（スタイルの柔軟性）

編集モードを追加しても、プリセットに基づく作成機能は置き換えないでください。 親スキルでは、STYLE_PRESETS.md にある選択肢それぞれを仕様として扱います。プリセットごとに、レイアウトの説明、特徴的な要素、タイポグラフィ、色を実装します。タイトルスライドとコンテンツスライドのデザインは、プリセットによって異なります（例：Bold Signal のカードと大きな数字、Notebook Tabs の紙と端のタブ、Swiss Modern のグリッドと赤いバー）。

フェーズ 3 の規範となる動作：

1. 選択したプリセットについて STYLE_PRESETS を読み、:root の色とフォントだけでなく、HTML/CSS にレイアウトと特徴的な要素を反映します。
2. 編集可能な参考例（examples/editable-deck-reference.html）が示すのはJS/CSS のパターン（クローム、サイドバー、オブジェクト、履歴）であり、すべてのデッキに貼り付けるための固定スライドレイアウトではありません。すべてのスタイルで、汎用的な「タイトル＋サブタイトル＋角丸長方形」のジオメトリを使い回さないでください。
3. examples/generated/presets/*.html はサンプルデッキであり、レイアウトの近道ではありません。従来の 12 個のサンプルは、ランタイムのスモークテストとビジュアルプレビュー用です。移植された 34 個のサンプルは、共有の Swiss／参考ランタイムと固定されたスロット編集機能を使用した、beautiful-html-templates の実際のテンプレートの移植版です。実際の成果物では、汎用的な README デッキを再利用するのではなく、選択したプリセット／テンプレートのデザイン文法に合わせてください。
4. 静的なクローム（ドラッグ可能にすべきでない装飾）は、プリセットに応じて .slide-edit-layer の外側に配置できます（例：背景の疑似要素、固定ナビゲーションクローム）。移動可能なコピーやブロックは、レイヤー内に [data-slide-object] として配置します。

ランタイムの制約が特徴的な要素と衝突する場合は、その要素を調整してください（例：CSS で同じ見た目を実現する、または複数のオブジェクトに分割する）。単一のテンプレートを優先して、プリセットの個性をなくしてはなりません。 </preset_fidelity>

<template_ports> 実際のテンプレートの移植（スロット編集可能）

beautiful-html-templates から移植された 34 個のプリセットでは、色トークンを合わせることだけでなく、元のテンプレートの雰囲気／トーン／密度と視覚的なデザイン文法を優先してください。

インタラクションの基本要件：移植されたデッキでは、examples/editable-deck-reference.html／swiss-modern.html と同じ Swiss／参考エディターのクロームとオブジェクトエディターを使用する必要があります。テンプレート本来のスロットは、レイアウトが固定されたコンテンツスロットです。ユーザーが追加したオブジェクトは、通常の [data-slide-object][data-oid] オブジェクトです。

重要なインタラクション契約： data-edit-slot は編集可能なコンテンツであり、ドラッグ可能なコンポーネントではありません。編集モードでは、ユーザーはスロット内のテキスト／画像をクリックして、RTE／元に戻す／やり直し／保存／エクスポート機能で内容を変更できます。ただし、元のテンプレートのレイアウトグリッド、カードの形状、装飾レイヤー、間隔は固定されたままです。.slide-edit-layer 内でユーザーが追加したオブジェクトだけが、選択、ドラッグ、サイズ変更可能なコンポーネントになります。別途コンポーネント化モードを明示的に要求して実装しない限り、テンプレート本来のすべての子要素にオブジェクトハンドルが付くと約束しないでください。

テンプレートの編集モード：

</template_ports>

• data-template-edit-mode="slots" がデフォルトです。これはテンプレートセーフです。作成されたコンテンツはスロットを通じて編集可能であり、レイアウトと装飾はロックされたままになります。
• data-template-edit-mode="components" は、[data-slide-object] として表現できるセマンティックブロック向けのオプションの生成モードです。
• 配信される移植済みデッキでは、Unlock layout は、元の編集可能なスロットノードを .slide-edit-layer に移動/ラップすることで、現在のスライドをオンデマンドでコンポーネント化します。元の要素タグ、クラス、および計算済みタイポグラフィを保持する必要があり、重複したコンテンツコピーを作成してはならず、元のレイアウト位置に戻せるように取り消し可能でなければなりません。
• すべての DOM ノードをコンポーネント化しないでください。背景、グリッド、軸、目盛り、装飾マーク、テクスチャ/グリッチレイヤー、SVG パス、アニメーションラッパー、および純粋なレイアウトコンテナは除外します。

移植済みプリセットを使用または拡張する場合:

1. 対応する beautiful-html-templates/templates/{source_slug}/template.html をビジュアルシステムとして扱います。フォント、CSS 変数、スライドレベルのクラス、レイアウトグリッド、装飾 DOM、およびコンポーネント文法を保持します。
2. テンプレートをドラッグ可能なボックスに分解するのではなく、スロットを通じて作成されたコンテンツを編集します。使用するもの:
   • data-edit-slot
   • data-slot-type="text|image|metric|table-cell"
   • data-slot-label
   • data-slot-locked-layout="true"
3. ユーザーがその正確な項目を自然に変更するのでない限り、装飾要素はロックしたままにします。グリッド、紙のテクスチャ、ヘアライン、スキャンライン、ピクセル/グリッチレイヤー、装飾マーク、およびレイアウトコンテナは、ドラッグ可能なオブジェクトにしないでください。
4. ユーザーが追加したフリーフォームオブジェクトのために .slide-edit-layer を保持します。追加されたオブジェクトは [data-slide-object][data-oid] と通常の Swiss ドラッグ/リサイズ/複数選択ランタイムを使用できます。ネイティブテンプレートスロットは Swiss RTE/Undo/Redo/Save/Export パスを使用しますが、移動/リサイズハンドルは付与されません。
5. 必要なスライドタイプが欠けている場合は、同じテンプレートシステム内で新しいスライドを設計します。同じフォント、パレット、スペーシングリズム、クローム、およびコンポーネント文法を使用します。別のテンプレートのビジュアル言語を混在させないでください。 </template_ports>

<discovery_gate> ディスカバリーゲート (スキップしないでください)

モデルはしばしば、いきなり HTML の生成に飛びつきます。モード A (新しいデッキ) および抽出後のモード B (PPT または PDF) では、フェーズ 1 をフェーズ 2 より前に、フェーズ 2 をフェーズ 3 より前に完了しなければなりません — 以下の限定的な例外が適用される場合を除きます。

厳格なルール: ユーザーが 1 ターンで (または明確にスコープされた 1 つのバッチで) フェーズ 1 チェックリストのすべての項目を提供しない限り、フェーズ 1 を最初に 1 つのグループ化されたメッセージ (または構造化された質問 UI) として実行しなければなりません。バッチが不完全な場合は、次のメッセージで不足しているチェックリスト項目のみを送信してください — スライド数、アウトラインの深さ、プリセット、または言語を推測しないでください。/frontend-slides-editable を呼び出すこと、またはこの skill を添付することは、ディスカバリーを免除しません。 一行の指示 (例: 「用 skill 介绍它自己」、「做一份某某主题的演示」) はトピック / 意図のみであり、ブリーフではありません。

フェーズ 1 チェックリスト (完全なブリーフ — モデルの推論なしで、すべて必須):

#	観点	「完了」とは何を意味するか
1	目的	ピッチ / 教育 / カンファレンス / 社内 / メタ役割（例: スキルのオンボーディング）など
2	分量	スライド枚数の区分（例: 短い 5～10 / 中程度 10～20 / 長い 20+）または正確な枚数 — トピックだけから推測してはならない
3	内容	貼り付けられたアウトライン、箇条書き、草稿テキスト、または指定されたソース + 抽出範囲（例: 「README §X–Y のみ」）。「テーマ」だけでは不十分
4	スタイルの方向性	フェーズ 1 のスタイル嗜好クラスター または STYLE_PRESETS.md からの名前付きプリセット または明示的な委任（「あなたが選んで」）—「あなたが選んで」だけの場合は、ユーザーがプレビューを明示的にスキップしない限り、フェーズ 2 を実行して推薦/プレビューで絞り込む
5	編集	完全に編集可能なランタイム（このスキルのデフォルト）を確認する または親の読み取り専用 frontend-slides への明示的な切り替え
6	画像	なし / あり / 未定。ありの場合、ファイルは後から届いてもよいが、意図が明示されていること
7	モバイル	必須の回答: デスクトップ優先のみ（デフォルト）またはスマートフォンの縦向き + 横向きに適応。これを暗黙に推測してはならない
—	言語 / ロケール	文章が聴衆向けで、まだ明示されていない場合: 単一言語 / 二言語 / ロケール別ファイル — フェーズ 1 で質問する

画像 vs アウトライン: アウトラインと画像の共同設計（ステップ 1.2）は、ユーザーが評価できる実際のアセットやリンクを持っている後にのみ行います。画像が保留中だからといってフェーズ 1 の観点をスキップしないでください。フェーズ 1 で「はい、提供します」と記録し、ファイルが存在するときに画像評価を実行します。

モード B（PPT / PDF）: extract-pptx.py（.pptx）または extract-pdf.py（.pdf）の後、タイトル/概要/アセット数を提示し、抽出では判断できない項目について引き続きフェーズ 1 を実行します: 再構成する場合の分量の目標、スタイルの方向性、編集の範囲、ロケール、抽出されたアセットの画像処理に関する注記。「これが抽出結果です」からいきなりスタイル選択だけに飛ばないでください** — まずフェーズ 1 のギャップを埋め、次にフェーズ 2、次にコード生成です。

フェーズ 1 および/またはフェーズ 2 を短縮できる場合（限定的な例外のみ）:

1. 明示的なオプトアウト — ユーザーがディスカバリーおよび/またはプレビューを明確にスキップする（例: 「跳过发现，你全部决定」、「no discovery — just generate」）。
2. 完全な書面によるブリーフ — 同じバッチが、あなたが推測することなくフェーズ 1 のチェックリストのすべての行をすでに満たしており、かつ (a) 名前付きプリセットが選択されているためフェーズ 2 をフェーズ 3 への直接的な引き継ぎにできる、または (b) ユーザーがプレビューなしを明示的に許可し、あなたの単一の推薦プリセットを受け入れる。

デフォルトの順序: フェーズ 1（グループ化） → フェーズ 2（語らず見せる） → フェーズ 3。 「ターンを節約する」ためにフェーズ 3 を開始しないでください。

部分的な回答: 次のメッセージ = 不足しているフェーズ 1 の項目のみ、その後フェーズ 2 を再開します。

沈黙を承認と決して解釈しないでください。 モード C（既存の HTML を強化）: 正確な変更リストがあればフェーズ 1～2 の全体をスキップできます。曖昧な「もっと良くして」→ まず 1～2 の確認質問を行います。

アンチパターン: スキルが添付されたという理由、または良い分量やプリセットを「すでに知っている」という理由で HTML を生成すること — 失敗モードです。

「ターンを節約する」ためにディスカバリーをスキップすることは、このスキルにおける失敗モードです。 </discovery_gate>

<core_principles> コア原則

1. ゼロ依存 — インライン CSS/JS を備えた単一の HTML ファイル。npm もビルドツールも不要。
2. 語らず見せる — 抽象的な選択肢ではなく、視覚的なプレビューを生成します。人は見ることで自分が何を求めているかを発見します。
3. 際立つデザイン — ありきたりな「AI スロップ」は禁止。すべてのプレゼンテーションがカスタムメイドに感じられる必要があります。
4. ビューポートへの適合（譲れない） — すべてのスライドは正確に 100vh 以内に収まらなければなりません。スライド内でのスクロールは決して許されません。コンテンツがオーバーフローしますか？ 複数のスライドに分割してください。 </core_principles>

<design_aesthetics> デザインの美学

あなたはありきたりな「分布どおり」の出力に収束しがちです。フロントエンドデザインでは、これがユーザーが「AI スロップ」と呼ぶ美学を生み出します。これを避けてください: 驚きと喜びをもたらす、創造的で際立つフロントエンドを作りましょう。 注目する点：

• タイポグラフィ：美しく、個性的で、興味を引くフォントを選びます。Arial や Inter のような汎用フォントは避け、フロントエンドの美しさを高める個性豊かなフォントを選びます。
• 色とテーマ：統一感のある美的スタイルを貫きます。一貫性を保つため、CSS 変数を使用します。控えめで均等に分散した配色より、メインカラーを大胆に使い、アクセントを際立たせた配色が効果的です。IDE のテーマや文化的な美意識をヒントにします。
• モーション：生成するスライドでは CSS のみ のアニメーションとトランジションを使用します（このスキルが出力するのは単一ファイルの HTML で、React も Motion ライブラリも使用しません）。インパクトの大きい演出に集中します。animation-delay を使った段階的な表示を伴う、よく練られた一度の読み込み演出は、ばらばらな小さなインタラクションに勝ります。
• 背景：単色をデフォルトにせず、雰囲気と奥行きを演出します。CSS グラデーションを重ねたり、幾何学模様を使ったり、全体の美的スタイルに合った文脈に沿う効果を加えたりします。

AI 生成でありがちな画一的な美的スタイルは避けます：

• 使われすぎているラテン文字向けフォントファミリー（Inter、Roboto、Arial、基本的なシステムフォント）— 厳選した CJK システムフォントのスタックは、移植性を確保するための適切な選択であり、この意味で「画一的」ではないことに注意してください（「フェーズ 3 §フォントと移植性」を参照）。
• 使い古された配色（特に、白背景に紫のグラデーションを組み合わせたもの）
• 先が読めるレイアウトやコンポーネントのパターン
• 文脈に応じた個性に欠ける、型にはまったデザイン

創造的に解釈し、文脈に合った、本当にデザインされたと感じられる意外性のある選択をします。ライトテーマとダークテーマ、異なるフォントや美的スタイルを使い分けます。それでも、生成するたびに Space Grotesk のような定番の選択肢に収束しがちです。これを避け、型にはまらない発想をすることが何より重要です！ </design_aesthetics>

<viewport_fitting_rules> ビューポートに収めるためのルール

以下の不変条件は、すべてのプレゼンテーションのすべてのスライドに適用されます。

• すべての .slide に height: 100vh; height: 100dvh; overflow: hidden; を指定する必要があります。
• すべてのフォントサイズと余白には clamp(min, preferred, max) を使用します。固定の px/rem は使用しません。
• コンテンツコンテナーには max-height の制約が必要です。
• 画像：max-height: min(50vh, 400px)
• 高さ 700px、600px、500px のブレークポイントが必要です。
• prefers-reduced-motion をサポートします。
• CSS 関数を直接否定してはいけません（-clamp()、-min()、-max() は無視されます）。代わりに calc(-1 * clamp(...)) を使用します。

生成時には viewport-base.css を読み込み、内容全体をすべてのプレゼンテーションに含めてください。

スライドごとのコンテンツ量の上限

スライドの種類	コンテンツの上限
タイトルスライド	見出し 1 つ＋サブタイトル 1 つ＋任意のタグライン
コンテンツスライド	見出し 1 つ＋箇条書き 4〜6 項目、または見出し 1 つ＋段落 2 つ
機能グリッド	見出し 1 つ＋カード最大 6 枚（2x3 または 3x2）
コードスライド	見出し 1 つ＋コード 8〜10 行
引用スライド	引用 1 つ（最大 3 行）＋出典
画像スライド	見出し 1 つ＋画像 1 枚（高さは最大 60vh）

コンテンツ量が上限を超える場合は、複数のスライドに分割してください。詰め込まず、スクロールもさせないでください。 </viewport_fitting_rules>

<quick_start> <mode_detection> フェーズ 0：モードの判定

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

• モード A：新規プレゼンテーション — ゼロから作成します。フェーズ 1 に進みます。
• モード B：PPT / PDF の変換 — .pptx または .pdf ファイルを変換します。フェーズ 4 に進みます。
• モード C：既存プレゼンテーションの改善 — 既存の HTML プレゼンテーションを読み、内容を理解して改善します。以下のモード C の変更ルールに従います。 </mode_detection>

<mode_c_modification_rules> モード C：変更ルール

既存のプレゼンテーションを改善する場合、ビューポートに収めることが最大のリスクです。 </mode_c_modification_rules> </quick_start>

1. コンテンツを追加する前に: 既存の要素を数え、密度の上限と照合する
2. 画像を追加する場合: max-height: min(50vh, 400px) が必須です。スライドにすでに最大限のコンテンツがある場合は、2 枚のスライドに分割してください
3. テキストを追加する場合: 1 スライドあたり最大 4〜6 個の箇条書き。上限を超えますか？ 継続スライドに分割してください
4. あらゆる変更の後に確認: .slide に overflow: hidden があるか、新しい要素が clamp() を使用しているか、画像にビューポート相対の max-height があるか、1280x720 でコンテンツが収まるか
5. 積極的に再編成: 変更によってオーバーフローが発生する場合は、自動的にコンテンツを分割してユーザーに知らせてください。依頼されるまで待たないでください

既存のスライドに画像を追加する場合: まず画像を新しいスライドに移動するか、他のコンテンツを減らしてください。既存のコンテンツがすでにビューポートを埋めているか確認せずに画像を追加しないでください。 </mode_c_modification_rules>

<phase_1_content_discovery> フェーズ 1: コンテンツの discovery（新しいデッキ & PPT/PDF パス）

フェーズ 1 の一元化: モード A および抽出後のモード B では、チェックリストを1 つのグループ化されたやり取りで提示してください（上記の Discovery gate を参照）— 何度も往復に分けて少しずつ出さないでください。ユーザーの最初のメッセージが不完全な場合は、次に不足している項目のみを尋ねてください。

フェーズ 1 が満たされるまで、スタイルプレビューや HTML に進まないでください（例外: Discovery gate）。

ゼロから始める場合は、すべての discovery 質問（以下の 1〜6）をそのグループ化されたやり取りの中で尋ねてください。構造化質問ツールが利用可能な場合はそれを使用し、そうでなければ 1 つの簡潔なメッセージで尋ねてください:

質問 1 — 目的（ヘッダー: "Purpose"）: このプレゼンテーションは何のためのものですか？ 選択肢: ピッチデッキ / 教学・チュートリアル / カンファレンストーク / 社内プレゼンテーション

質問 2 — 長さ（ヘッダー: "Length"）: スライドはおよそ何枚ですか？ 選択肢: 短い 5〜10 / 中程度 10〜20 / 長い 20+

質問 3 — コンテンツ（ヘッダー: "Content"）: コンテンツは準備できていますか？ 選択肢: すべてのコンテンツが準備済み / ラフなメモ / トピックのみ

質問 4 — スタイルの好み（ヘッダー: "Style Pref"）: 出発点として最も近いと感じるビジュアルの方向性はどれですか？ 選択肢:

• 「おすすめを選んで」 — オーディエンス、トピック、コンテンツから推測します
• 「クリーン / プロフェッショナル」 — 抑制が効いた、洗練された、信頼できる印象
• 「大胆 / 実験的」 — 高コントラストで、エネルギッシュ、意外性のある
• 「エディトリアル / 温かみ」 — 人間味があり、作り込まれた、ストーリー重視
• 「テクニカル / ミニマル」 — 精密で、構造化された、プロダクトらしい
• 「プリセットをすでに知っている」 — 直接プリセットの選択に進みます

質問 5 — 編集範囲（ヘッダー: "Editing"）: ユーザーがフル編集可能なランタイム（このスキルのデフォルト）を望んでいることを確認してください: オブジェクトレイアウト、Pages サイドバー、元に戻す/やり直し。もしユーザーが明示的に最小限の読み取り専用ファイルのみを望む場合は、代わりに親の frontend-slides スキルに切り替えてください — このスキルからランタイムを勝手に削除しないでください。

質問 6 — アセット / 画像（ヘッダー: "Images"）: このデッキは、あなたが提供する画像ファイル（フォルダ、アップロード、またはリンク）を使用しますか？ 選択肢: 画像なし（CSS/グラフィックスのみ）/ はい — 画像を提供します / 不明 — おすすめを提案

質問 7 — モバイル対応（ヘッダー: "Mobile"）: この編集可能なデッキを、縦向きと横向きの両方でスマートフォン利用に合わせて適応させるべきですか？ 選択肢: デスクトップ優先のみ（推奨。デスクトップでのプレゼン/編集に最適化されたデッキを維持します）/ スマートフォンの縦向き + 横向きに適応（モバイル固有の CSS フック、サイドバーの挙動、追加のビューポート確認を加えます）。これは新しいデッキおよび抽出後の PPT/PDF 変換において、フェーズ 1 で必須の回答です。

言語 / ロケール（該当する場合は同じグループ化されたメッセージに含めてください）: 成果物が単一言語、バイリンガル、またはローカライズ（例: 同じスライドに CN/EN を併記するか、2 つのファイルにするか）でなければならない場合、ユーザーがまだ述べていないときにここで一度尋ねてください。

ユーザーがドラフトコンテンツ（箇条書き、ドキュメント、アウトライン）を持っている場合は、同じターン内またはフェーズ 1 の直後に貼り付けるか添付するよう依頼してください。

<image_evaluation> ステップ 1.2: 画像の評価（画像が提供された場合） If Question 6 was No images or the user has not supplied any image files yet → Phase 1 がそれ以外の点で完了したら Phase 2 に進みます（考えが変わった場合は、Phase 3 の前に画像を追加するよう後から依頼してもかまいません）。

ユーザーが Phase 1 で画像ありと回答した後に画像フォルダー（またはリンク）を提供した場合：

1. スキャン — すべての画像ファイル（.png、.jpg、.svg、.webp など）を一覧表示します
2. 各画像を確認 — ホストで利用できる画像／ファイルの表示機能を使います
3. 評価 — 各画像について、何が写っているか、使用可能か使用不可か（理由も含む）、どのコンセプトを表しているか、支配的な色を確認します
4. アウトラインを共同で設計 — 厳選した画像をテキストと合わせてスライド構成に反映します。これは「スライドを計画してから画像を追加」することではなく、最初から両方を考慮して設計します（例：スクリーンショットが3枚なら3枚の機能紹介スライド、ロゴが1つならタイトル／クロージングスライド）
5. まとめて確認するフォローアップを1回行う（利用可能な場合は構造化された質問 UI を使用）：「このスライドのアウトラインと画像の選択でよさそうですか？」選択肢：問題ありません／画像を調整／アウトラインを調整

プレビューでのロゴ： 使用可能なロゴが見つかった場合は、Phase 2 の各スタイルプレビューに（base64 で）埋め込みます。ユーザーは自社ブランドを3種類のスタイルで確認できます。 </image_evaluation> </phase_1_content_discovery>

<phase_2_style_discovery> Phase 2：スタイルの探索（説明するより、見せる）

Phase 1 が完了してから開始します（Discovery gate を参照）。

目的： 美的な方向性を視覚的に絞り込みます。多くの人は自分の求めるものを言葉にできません。HTML プレビュー（STYLE_PRESETS.md の具体的な参考例と、リポジトリ内の例：examples/generated/presets/ のスモークデッキ、ランタイムの表示部分については examples/editable-deck-reference.html）を使い、ユーザーが方向性を選んでから、プリセットまたは組み合わせを選べるようにします。

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

<style_preference_first> Step 2.0：スタイルの好みを最初に確認

Phase 1 で把握したスタイルの好みを起点にします。どのように選びたいかをユーザーに尋ねる前に、その好み、対象者、内容に最も合う2～4個のプリセットを短く推薦します。名前を STYLE_PRESETS の項目と結び付け（必要に応じて「スラッグ X の生成サンプル *.html を参照」などと示し）、抽象的な提案ではなく、具体的な選択肢にします。

まずは次の対応表を使います。

スタイルの好み	推奨プリセット
おすすめを教えて	目的＋対象者＋内容から推測し、最適な候補を2～4個推薦します
クリーン／プロフェッショナル	Bold Signal、Electric Studio、Swiss Modern
大胆／実験的	Creative Voltage、Neon Cyber、Split Pastel
エディトリアル／温かみのある	Dark Botanical、Vintage Editorial、Paper & Ink
テクニカル／ミニマル	Swiss Modern、Terminal Green、Notebook Tabs
使いたいプリセットは決まっています	推薦の説明を省略し、プリセットの選択に進みます

対象者との相性、活気の度合い、ブランドのトーン、内容の密度など、具体的な観点から推薦理由を簡潔に説明します。

ユーザーが Phase 1 ですでに **「使いたいプリセットは決まっています」**を選んでいる場合は、Step 2.1 を省略して、プリセット選択に進みます。 </style_preference_first>

<style_path> Step 2.1：スタイルの選び方

どのように選びたいかを尋ねます（ヘッダー：「スタイル」）：

• 「おすすめから選ぶ」（推奨）— 提案されたプリセットから直接選びます（可能であれば、プリセットのサムネイルや一言の視覚的な説明も表示します）
• 「選択肢を見せて」— プリセットを決定する前に選択肢を絞り込むため、1枚構成の HTML プレビューを3つ生成します（Step 2.3）
• 「希望は決まっています」— STYLE_PRESETS.md のプリセット一覧全体から選びます

プリセット名が直接指定された場合： STYLE_PRESETS と照合してから Phase 3 に進みます。Phase 1 で「あなたが選んで」と指定された場合： デフォルトの進め方は、おすすめを提示し、生成前にプレビューも選べるようにすることです。 </style_path>

<mood_selection> Step 2.2：ムードの選択（ガイド付き探索） 質問（ヘッダー：「Vibe」、複数選択：true、最大選択数：2）： オーディエンスにどのような気持ちを抱いてほしいですか？ 選択肢：

• 感銘を受ける／自信が持てる — プロフェッショナルで、信頼できる
• わくわくする／活気づく — 革新的で、大胆
• 落ち着く／集中できる — 明快で、思慮深い
• 心を動かされる／感動する — 感情に訴え、印象に残る

ユーザーのスタイルの好みと推奨プリセットのクラスターを参考に、この質問を調整してください。好みから方向性がすでに明確に決まる場合は、無関係な美的スタイルにばらけさせず、近いテイストのプレビューに絞ってください。 </mood_selection>

<style_previews> ステップ 2.3：スタイルプレビューを 3 つ生成する

ムード とそれ以前に確認したスタイルの好み に基づき、タイポグラフィ、色、アニメーション、全体的な美的スタイルを示す、異なる 1 枚スライドの HTML プレビューを 3 つ生成してください。利用可能なプリセットとその仕様については、STYLE_PRESETS.md を読んでください。

ムード	推奨プリセット
感銘を受ける／自信が持てる	Bold Signal、Electric Studio、Dark Botanical
わくわくする／活気づく	Creative Voltage、Neon Cyber、Split Pastel
落ち着く／集中できる	Notebook Tabs、Paper & Ink、Swiss Modern
心を動かされる／感動する	Dark Botanical、Vintage Editorial、Pastel Geometry

.claude-design-slide-previews/ や .design/slide-previews/ などのプロジェクト内の一時フォルダーに、style-a.html、style-b.html、style-c.html としてプレビューを保存してください。それぞれ自己完結型で、約 50～100 行の、アニメーション付きタイトルスライドを 1 枚表示するものにしてください。

可能であれば、各プレビューを既定のブラウザーで開いてください：macOS open path/to/file.html、Linux xdg-open path/to/file.html、Windows start path\to\file.html。

可能であれば、ユーザーが他のスタイルを見る前に適切なバリエーションを確認できるよう、3 つのプレビューのうち少なくとも 2 つは推奨プリセットのファミリーから選んでください。 </style_previews>

<user_picks> ステップ 2.4：ユーザーが選択する

質問（ヘッダー：「Style」）： どのスタイルプレビューが好みですか？ 選択肢：スタイル A：[Name]／スタイル B：[Name]／スタイル C：[Name]／要素を組み合わせる

「要素を組み合わせる」を選んだ場合は、具体的にどの要素を組み合わせたいか尋ねてください。 </user_picks> </phase_2_style_discovery>

<phase_3_generate_presentation> フェーズ 3：プレゼンテーションを生成する

フェーズ 1 の内容（テキスト、またはテキストと厳選した画像）とフェーズ 2 のスタイルを使って、プレゼンテーション全体を生成してください。

画像が提供された場合は、ステップ 1.2 のスライド概要にすでに反映されています。画像がない場合は、CSS で生成したビジュアル（グラデーション、図形、パターン）で視覚的な魅力を加えます。これは完全にサポートされている標準的な方法です。

生成する前に、以下の関連ファイルを読んでください：

• STYLE_PRESETS.md — 選択したプリセットの正式なビジュアル仕様（レイアウト、特徴、フォント、色） — 親の frontend-slides と同じ役割です
• editor-runtime.md — DOM の仕様（data-slide-object、data-oid、編集レイヤー）、履歴の種類、スナップ規則、生成時のチェックリスト
• examples/editable-deck-reference.html — デッキのランタイムをコピーしてください（エディター＋サイドバー＋履歴＋永続化のパターン）。スライドのマークアップを唯一許可されたレイアウトとして扱わないでください
• html-template.md — HTML のアーキテクチャと統合に関する説明
• viewport-base.css — 必須の CSS（全文を含めること）
• animation-patterns.md — 選択した印象に合わせたアニメーションの参考資料
• 移植済みプリセットの場合は、利用可能であればローカルの beautiful-html-templates/templates/{source_slug}/template.html と template.json も読んでください。インデックスには STYLE_PRESETS.md を使用し、詳細なデザインの文法には上流のテンプレートを使用してください。 主な要件：
• CSS／JSをすべてインライン化した、単一の自己完結型HTMLファイルにすること
• 作成した画像と動画はすべて、デフォルトでdata: URLとしてHTMLに埋め込むこと。assets/パスを使用できるのは生成前の一時的な抽出元としてのみであり、納品するメディアのsrc値には使用しないこと。
• viewport-base.cssの全内容を<style>ブロックに含めること
• プリセットへの忠実性： 選択したスタイルについて、STYLE_PRESETS.mdのレイアウトと特徴的な要素を実装すること。スライドごと、またプリセットごとに構成を変え、すべてのスタイルで同一のタイトルスライドのひな型を繰り返すことは避けてください（親スキルではそのようなことはしていません）。
• 移植されたプリセットへの忠実性： 移植された34種類のプリセットでは、上流のテンプレートのDOM／CSS／クラスを維持し、作成するコンテンツをスロット編集可能にすること。すべてのネイティブ要素をドラッグ可能にするのではなく、ネイティブのレイアウトを固定し、編集可能なdata-edit-slotコンテンツを優先してください。
• すべてのスライドのsection.slideに安定したidを設定すること。移動可能なコンテンツは、editor-runtime.mdに従って.slide-edit-layer内に[data-slide-object][data-oid]として配置すること。
• デッキのスライド一覧： フィルムストリップでスライドを複製する場合、グローバルなquerySelectorAll('section.slide')は決して使用せず、デッキラッパー内のスライドのみを対象にすること（例：.slides-offsetと:scope > section.slide）。html-template.md §回帰ガードを参照してください。
• モバイル対応： フェーズ1でスマートフォン対応を選択した場合は、<html>にdata-mobile-adaptation="enabled"を設定し、デッキのUI、サイドバー、スライドオブジェクトに縦向きと横向きのメディアクエリ規則を含めること。選択していない場合は、data-mobile-adaptation="desktop-default"を設定し、明示的なデスクトップ優先の選択と未決定とを検証時に区別できるようにすること。
• 参照例の編集可能なデッキランタイムを埋め込むこと：SlideDeck、オブジェクトエディター（選択／ドラッグ／スナップ／RTEツールバー）、SlideSidebar、HistoryStack、保存／エクスポート
• フォント（下記の§フォントとポータビリティを参照）： ディスプレイ用／本文用のラテン文字には、汎用的なシステムフォントより、個性のあるFontshareまたはGoogle Fontsを優先すること。CJK（中国語／日本語／韓国語）のテキストには、厳選したシステムCJKフォントスタックを使用すること。CJKウェブフォントは数メガバイトあり、単一ファイルで自己完結するという要件に反するため、ここでは適切に選定したネイティブフォントスタックが正しい選択であり、「AIスロップ」ではありません。リンクを避けるためだけに、ラテン文字の本文フォントを単なるArial／Inter／システムのデフォルトにしないこと。
• 各セクションについて詳しく説明するコメントを追加すること
• すべてのセクションに、/* === SECTION NAME === */形式の明確なコメントブロックを付けること

<fonts_portability> フォントとポータビリティ（自己完結の要件を意図的に満たす）

エクスポートするファイルは、**単一の自己完結型ファイル（外部フォントリンクなし）**でなければなりません（フェーズ5を参照）。この制約を踏まえてフォントを選択してください。無視しないでください。

• ラテン文字のディスプレイ／本文: 個性を出すために Fontshare／Google の特徴ある書体を推奨します。ただし、単純な <link rel="stylesheet" href="https://fonts..."> では エクスポートがネットワークに依存 してしまい、オフラインで開くと書体が黙ってフォールバックします。次のいずれかを選んでください:
  1. インラインでセルフホスト — ラテン文字の Web フォントを base64 の @font-face src: url(data:font/woff2;base64,...) として埋め込み、ファイル内に同梱させます（忠実度は最高、ファイルサイズは増加）、または
  2. 多層フォールバック — ライブ／編集時の体験のために Web フォントをリンクしつつ、同じカテゴリの強力なシステムフォントスタックと組み合わせることで、オフラインエクスポート時にも素の Arial へではなく、緩やかにデグレードさせます。 エクスポートのサニタイザーは残存する外部フォントの <link> を除去するため、インライン化されていない Web フォントは 必ず 配信ファイル内でフォールバックします — 忠実度が重要な場合は (1) を選んでください。
• CJK（中文 / 日本語 / 한국어）: CJK の Web フォントを 追い求めないでください — 完全なカバレッジは数メガバイトになり、単一ファイルのデッキにインライン化できません。厳選された ネイティブ CJK スタック を使用してください。例: "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",sans-serif。 これは CJK にとって正しく、ポータブルな選択です — 品質の妥協ではありません。CJK のデッキ内のラテングリフは、スタック内のより前のファミリーを介して Web フォントを引き続き使用できます。
• 中国語／英語の混在デッキ: ラテン文字のディスプレイ書体を先頭に置き、その後に CJK スタックを配置することで、見出しには個性を与えつつ、CJK の本文はクリーンなネイティブ書体でレンダリングされます: "Clash Display","PingFang SC",...。 </fonts_portability> </phase_3_generate_presentation>

<phase_4_ppt_conversion> フェーズ 4: PPT / PDF 変換

PowerPoint（.pptx）または PDF（.pdf）ファイルを変換する場合:

1. コンテンツを抽出
   • PPTX: python3 scripts/extract-pptx.py <input.pptx> <output_dir>（必要に応じて python-pptx をインストール: pip install python-pptx）
   • PDF: python3 scripts/extract-pdf.py <input.pdf> <output_dir>（必要に応じて PyMuPDF をインストール: pip install pymupdf）。オプション: --raster-if-empty は、ページに抽出可能なテキストも埋め込み画像も存在しない場合にそのページを PNG としてレンダリングします（例: スキャンしたようなページは依然として別途 OCR が必要です。このフラグはページのビットマップを取得するだけです）。
   • 両方のライターは同じ中間形式を出力します: extracted-slides.json + assets/（スライド／ページごとに 1 レコード。PDF にはスピーカーノートがありません — notes: "" を使用してください）。
2. ユーザーに確認 — 抽出されたスライド／ページのタイトル、コンテンツの要約、画像数を提示します
3. フェーズ 1（不足を補う） — 抽出は コンテンツ を提供しますが、ファイルによって確定しない項目については明示的な回答が依然として必要です: スタイルの方向性（またはプリセット／委任）、完全編集可能か読み取り専用か、ロケール、スライドを統合／分割する場合の 長さ の意図、および抽出されたアセットに対する 画像 の扱い。不足項目のみについて 1 回にまとめた追加質問 を行います。
4. フェーズ 2 — スタイルの発見（プレビュー／プリセットの選択）。このスキルファイルの フェーズ 2: スタイルの発見 を参照してください
5. HTML を生成 — すべてのテキスト、画像（assets/ から）、スライド順を保持したまま、選択したスタイルへ変換します。PPTX: スピーカーノートは HTML コメントとして。PDF: ソースにノートがないため、ユーザーが別途提供した場合のみ省略するかコメントのプレースホルダーを残します。

PDF の注意点: テキストの読み取り順や「タイトルか本文か」はヒューリスティックです。レイアウトは PPTX のようにオブジェクト単位ではありません。画像のみの PDF は、使用可能なテキストを得るために --raster-if-empty または外部 OCR が必要です。 </phase_4_ppt_conversion> </quick_start>

<success_criteria> フェーズ 5: 配信

1. クリーンアップ — 一時的なスライドプレビュー用フォルダーが存在する場合は削除します（Phase 2 を参照）
2. スモークチェック（簡易） — 引き渡す前に、ファイルを一度開きます。約1280×720でスライド内のスクロールが発生しないことを確認します。モバイル対応を選択した場合は、縦向きの約390×844と横向きの約844×390も確認します。編集モードでは、Pagesを開き、スライドを1枚並べ替え、スライドを1枚コピーし、+New Pageを追加してから更新します — スライドやオブジェクト ID が重複しないこと（リグレッション防止）。Export HTMLが開き、単独で動作することを確認します
3. 開く — 既定のブラウザーで起動します：macOS open [filename].html；Linux xdg-open [filename].html；Windows start [filename].html
4. 要約する — ユーザーに次の内容を伝えます：
   • ファイルの場所、スタイル名、スライド数
   • ナビゲーション：矢印キー、Space、スクロール／ホイール（編集モード中はホイール無効）、ナビゲーションドットをクリック
   • プレゼンテーションツール：左上にカーソルを合わせると、LaserとFullscreenが表示されます。Laserはポインターに追従する1つのレーザードットを表示します（残像ストローク効果は設計上削除されており、残像ノードは作成されません）。Escでオフになり、編集モードに入ると自動的に閉じます。FullscreenはブラウザーのFullscreen APIを使用します。
   • 編集モード：Eで編集モードに入ります。左上にカーソルを合わせると、Edit、Pages、（編集中は）Undo／Redo／Doneが表示されます。ポインターが離れると（約400ms後）コントロールが非表示になります。Done（同じコントロール群）で編集モードを終了します — EditボタンのラベルはEditのままです。テキスト入力中でなければ、Escはまずテキストのフォーカスを外し、その後編集モードを終了します
   • サムネイルの表示、並べ替え（行をドラッグ）、サムネイルにカーソルを合わせてCopyを表示してページを複製、スライドの削除、Export HTMLの横にある**+New Pageを使って現在のスライドの後にスタイルを合わせた空白ページを挿入するためのPages**サイドバー
   • オブジェクト：****⠿をドラッグして移動します。オブジェクトにカーソルを合わせて×を使うか、Delete/Backspaceで削除します（複数選択時の確認メッセージは英語で表示されます）。選択したオブジェクトの角のリサイズハンドルをドラッグして幅／高さを変更します（テキストは折り返されます）。Ctrl+クリックで複数選択します（macOS：Controlキー）
   • 要素の追加：編集モードで左上にあるAdd element（Edit／Pagesと並んでいます）をクリックすると、メニューが開きます：Text、Image（ローカルファイル、貼り付け、またはプレースホルダー）、Video（ローカルファイル＋コントロール）。追加したメディアはデータ URL として埋め込まれるため、エクスポートしたデッキは1つのファイルとして持ち運べます
   • スナップ：****スライド中央および他のオブジェクトに合わせます — スライドの外側の端には合わせません
   • テキスト：テキストをクリックして入力します。フローティングツールバー：B/Iに加えて、Font・Scale・Pxのドロワー（クリックすると、フォントファミリー、スケール段階、ピクセル値のプリセット＋カスタム設定のカードが展開されます）。Ctrl+Z／Ctrl+YまたはCtrl+Shift+Z；macOSでは、contenteditableに入力していないときにCmd+Z／Cmd+Y／Cmd+Shift+Z
   • 保存（編集中に左上のEdit／Pagesの横にある#btnSave — 同じくカーソルを合わせると表示されます）、またはCtrl+S／Cmd+Sを使うと、ブラウザーの下書きがlocalStorageに保存されます。ブラウザーがFile System Accessに対応している場合は、持ち運び可能なHTMLファイルを書き出します。対応していない場合は、更新されたHTMLのフォールバックをダウンロードします。Export HTMLは引き続きPagesサイドバーにあり、現在のデッキの状態とメディアをエクスポートファイルに埋め込むとともに、一時的な編集状態を取り除く必要があります。エクスポートしたファイルは持ち運び可能な単一の自己完結型ファイル（外部フォントリンクなし）で、レーザーの残像もありません — 最新の編集内容が反映され、Laser／Fullscreenも動作しますが、アクティブなレーザー状態が埋め込まれることはありません。
   • カスタマイズ方法：スライドテーマの:root変数、編集 UI 用の**--deck-chrome-***（STYLE_PRESETS.md §Deck chrome tokensを参照）、フォント（ラテン文字のウェブフォントをbase64の@font-faceとしてインライン化するか、階層化したシステムフォントスタックを使用し、CJKにはネイティブのフォントスタックを使用します — Phase 3 §Fonts & portabilityを参照。エクスポートファイルは外部フォントリンクなしで自己完結型のままです）、.revealアニメーション。オブジェクトを追加する際は、data-oidが一意になるようにします </success_criteria>

<supporting_files> サポートファイル

ファイル	目的	読むタイミング
editor-runtime.md	DOM の契約、元に戻す操作の種類、スナップ規則、ジェネレーターのチェックリスト	フェーズ 3（コード生成の前）
examples/editable-deck-reference.html	動作するリファレンス：1 ファイルにまとめた完全なランタイム	フェーズ 3（JS/CSS のコピーや調整）
STYLE_PRESETS.md	色、フォント、特徴的な要素を含む、厳選された 46 種類のビジュアルプリセット	フェーズ 2（スタイルの選択）
viewport-base.css	必須のレスポンシブ CSS — すべてのプレゼンテーションにコピーします	フェーズ 3（生成）
html-template.md	HTML 構造、編集可能なランタイムとの統合	フェーズ 3（生成）
animation-patterns.md	CSS/JS アニメーションのスニペットと、効果と印象の対応ガイド	フェーズ 3（生成）
scripts/extract-pptx.py	PPT コンテンツを抽出する Python スクリプト	フェーズ 4（PPTX）
scripts/extract-pdf.py	PDF のページを抽出する Python スクリプト（PPTX と同じ JSON 形式）	フェーズ 4（PDF）
README.md	バイリンガルの詳細な概要、比較表、トラブルシューティング	任意（ユーザー／メンテナー）