html-ppt-dir-key-nav-minimal

HTML PPT · 8 色のミニマルな方向キー

html-ppt のマスタースキルへの、焦点を絞った入り口です。ユーザーを dir-key-nav-minimal のフルデッキテンプレートに直接案内します。

このカードを選ぶとき

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

デッキの作成方法

1. まずマスタースキルを読みます。 作成ルールはすべて skills/html-ppt/SKILL.md に記載されています。内容・対象者のチェックリスト、 トークンのルール、レイアウトの再利用、プレゼンターモード、キーボードランタイム、 「プレゼンター専用のテキストをスライドに表示しない」ルールを確認してください。
2. 対応するテンプレートフォルダーから始めます。 skills/html-ppt/templates/full-decks/dir-key-nav-minimal/ から index.html と style.css をプロジェクトにコピーし、body クラス .tpl-dir-key-nav-minimal はそのままにします。
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. テーマを選びます。 デフォルトのトークンで問題なければそのまま使います。別の雰囲気にしたい場合は、 skills/html-ppt/assets/themes/*.css にある 36 種類のテーマのいずれかを <link id="theme-link"> で読み込み、T キーで切り替えられるようにします。
5. クラスではなく、デモコンテンツを置き換えます。 .tpl-dir-key-nav-minimal のスコープ付き CSS が 認識するのは、テンプレートに含まれる構造クラスだけです。これらはそのままにしてください。
6. 発表者ノートは <aside class="notes"> または <div class="notes"> の内側に記述します。 スライド上に表示されるテキストとして記述しないでください。

クレジット

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