html-ppt-xhs-pastel-card

HTML PPT · やさしいパステルカラーのスローライフ

html-ppt マスタースキルへの、xhs-pastel-card のフルデッキテンプレートを直接利用できる専用エントリーポイントです。

このカードを選ぶ場合

Examples ギャラリーでは、「Use this prompt」が上記の example_prompt に紐づいています。このプロンプトを受け入れたとき、ユーザーが xhs-pastel-card のビジュアルアイデンティティをそのまま使いたい場合は、このカードを選びます（スクリーンショットと選定理由については、上流のフルデッキカタログを参照してください）。

デッキの作成方法

1. まずマスタースキルを読みます。 作成ルールはすべて skills/html-ppt/SKILL.md に記載されています。内容と対象者のチェックリスト、 トークンのルール、レイアウトの再利用、プレゼンターモード、キーボードのランタイム、そして 「プレゼンター専用のテキストをスライドに表示しない」というルールが含まれます。
2. 対応するテンプレートフォルダーから始めます。 skills/html-ppt/templates/full-decks/xhs-pastel-card/ — index.html と style.css をプロジェクトにコピーし、body クラス .tpl-xhs-pastel-card はそのままにします。
3. 共有ランタイムもテンプレートと一緒に配置します。 上流の index.html は ../../../assets/... 経由で共有 CSS／JS を読み込みます。これは skills/html-ppt/templates/full-decks/ の中で3階層下にあるためです。 index.html をプロジェクトにコピーすると、これらの親相対 URL は解決できなくなり、 base.css、animations.css、runtime.js が404になります。その結果、デッキが有効化されず、スライドの移動も 機能しません。プロジェクトごとに、次のいずれかの方法を選んでください。
   • 方法 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 だけで完結します。 どちらの方法でも、上流の ../../../assets/... URL をそのままプロジェクトの成果物に含めないでください。 これらの URL はリポジトリ内でのみ機能します。
4. テーマを選びます。 デフォルトのトークンで問題なければそのまま使い、別の雰囲気にしたい場合は、 <link id="theme-link"> を使って skills/html-ppt/assets/themes/*.css にある36種類のテーマのいずれかを読み込み、 T キーで切り替えられるようにします。
5. クラスではなく、デモコンテンツを置き換えます。 .tpl-xhs-pastel-card のスコープ付き CSS は、 テンプレートに含まれる構造クラスのみを認識します。そのため、これらのクラスは維持してください。
6. スピーカーノートは <aside class="notes"> または <div class="notes"> の中に配置します — スライド上に表示されるテキストとして配置しないでください。

クレジット表記

ビジュアルシステム、レイアウト、テーマ、ランタイムのキーボード操作モデルは、MIT ライセンスの上流プロジェクト lewislulu/html-ppt-skill に由来します。 LICENSE ファイルは skills/html-ppt/LICENSE にあります。再配布する際も、そのまま含めてください。