html-ppt-xhs-post

HTML PPT · 小红书 图文

html-ppt マスタースキルへの専用エントリーポイントです。ユーザーを xhs-post のフルデッキテンプレートに直接案内します。

このカードを選ぶタイミング

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

デッキの作成方法

1. まずマスタースキルを読みます。 作成ルールはすべて skills/html-ppt/SKILL.md に記載されています。内容と対象読者のチェックリスト、 トークンのルール、レイアウトの再利用、プレゼンターモード、キーボードランタイム、および 「プレゼンター専用のテキストをスライドに表示しない」というルールが含まれます。
2. 該当するテンプレートフォルダーから始めます。 skills/html-ppt/templates/full-decks/xhs-post/ — index.html と style.css をプロジェクトにコピーし、.tpl-xhs-post の body クラスはそのままにします。
3. テンプレートと一緒に共有ランタイムも用意します。 上流の index.html は、skills/html-ppt/templates/full-decks/ 内で 3 階層下にあるため、共有 CSS/JS を ../../../assets/... 経由で読み込みます。 index.html をプロジェクトにコピーすると、これらの親ディレクトリ相対 URL は 解決できなくなり、base.css、animations.css、runtime.js が 404 になります。その結果、デッキが有効化されず、スライドのナビゲーションも 機能しません。プロジェクトごとに、次の 2 つの方法のいずれかを選んでください。
   • 方法 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-post のスコープ付き CSS は テンプレートに含まれる構造クラスのみを認識します。クラスはそのままにしてください。
6. スピーカーノートは <aside class="notes"> または <div class="notes"> の中に記述します — スライド上に表示されるテキストとして記述しないでください。

クレジット

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