html-ppt-xhs-white-editorial

HTML PPT · 白背景の雑誌風

ユーザーを xhs-white-editorial の全スライド用テンプレートへ直接案内する、html-ppt マスタースキルの専用エントリーポイントです。

このカードが選ばれるとき

Examples ギャラリーでは、「このプロンプトを使用」を上記の example_prompt に紐付けています。このプロンプトを受け入れたとき、ユーザーが xhs-white-editorial のビジュアルアイデンティティをそのまま使いたい場合は、このカードが適しています（スクリーンショットと選定理由については、上流の全スライド用カタログをご覧ください）。

スライドデッキの作成方法

1. まずマスタースキルを読みます。 作成ルールはすべて skills/html-ppt/SKILL.md に記載されています。内容と対象読者のチェックリスト、 トークンのルール、レイアウトの再利用、プレゼンターモード、キーボードランタイム、 および「プレゼンター専用のテキストをスライドに表示しない」というルールが含まれます。
2. 対応するテンプレートフォルダーから始めます。 skills/html-ppt/templates/full-decks/xhs-white-editorial/ の index.html と style.css をプロジェクトにコピーし、.tpl-xhs-white-editorial の body クラスはそのままにします。
3. テンプレートと一緒に共有ランタイムも用意します。 上流の index.html は ../../../assets/... 経由で共有 CSS／JS を読み込みます。これは、 skills/html-ppt/templates/full-decks/ 内の3階層下に置かれているためです。 index.html をプロジェクトにコピーすると、これらの親ディレクトリー相対 URL は 解決できなくなり、base.css、animations.css、runtime.js が 404 になります。つまり、スライドデッキが有効にならず、スライドナビゲーションも 機能しません。プロジェクトごとに、次の2つの方法から1つを選んでください。
   • 方法 A — コピーして書き換える（推奨）： skills/html-ppt/assets/fonts.css、skills/html-ppt/assets/base.css、 skills/html-ppt/assets/animations/animations.css、skills/html-ppt/assets/runtime.js を プロジェクト内の assets/（assets/animations/animations.css を含む）にコピーし、 index.html の4つの <link>／<script> タグのパスを ../../../assets/... から対応するプロジェクト内のパス （assets/fonts.css、assets/base.css、 assets/animations/animations.css、assets/runtime.js）に書き換えます。
   • 方法 B — インライン化する： 同じ4つのファイルを読み込み、各 <link rel="stylesheet" href="../../../assets/..."> を、ファイルの内容を含む <style>...</style> に置き換えます。また、 <script src="../../../assets/runtime.js"> を、runtime.js の内容を含む <script>...</script> に置き換えます。これにより、自己完結型の index.html が1つできます。 いずれの方法でも、上流の ../../../assets/... URL を そのままプロジェクトの成果物に含めないでください。これらの URL はリポジトリー内でのみ機能します。
4. テーマを選びます。 デフォルトのトークンで問題ありませんが、別の雰囲気にしたい場合は、 skills/html-ppt/assets/themes/*.css にある36種類のテーマのいずれかを <link id="theme-link"> 経由で適用し、 T キーで切り替えられるようにします。
5. クラスではなく、デモの内容を置き換えます。 .tpl-xhs-white-editorial のスコープ付き CSS が認識するのは、 テンプレートに含まれる構造クラスのみです。これらはそのままにしてください。
6. スピーカーノートは <aside class="notes"> または <div class="notes"> の中に記述します。 スライド上に表示されるテキストとしては記述しないでください。

クレジット

ビジュアルシステム、レイアウト、テーマ、ランタイムのキーボードモデルは、上流の MIT ライセンス対象である lewislulu/html-ppt-skill に由来します。LICENSE ファイルは skills/html-ppt/LICENSE にあります。再配布する場合は、所定の場所に残してください。