html-ppt-knowledge-arch-blueprint

HTML PPT・クリームブループリントアーキテクチャ

html-ppt マスタースキルへのフォーカスした入口で、ユーザーを knowledge-arch-blueprint のフルデッキテンプレートに直接案内します。

このカードを選ぶ場合

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

デッキの作成方法

1. まずマスタースキルを読みます。 作成に関するルールはすべて skills/html-ppt/SKILL.md にあります。内容・対象者のチェックリスト、 トークンのルール、レイアウトの再利用、プレゼンターモード、キーボードランタイム、 「プレゼンター専用のテキストをスライドに表示しない」というルールが含まれます。
2. 対応するテンプレートフォルダーを使用します。 skills/html-ppt/templates/full-decks/knowledge-arch-blueprint/ — index.html と style.css をプロジェクトにコピーし、.tpl-knowledge-arch-blueprint の body クラスを維持します。
3. 共有ランタイムもテンプレートと一緒に用意します。 上流の index.html は skills/html-ppt/templates/full-decks/ 内に3階層深く置かれているため、 共有 CSS／JS を ../../../assets/... 経由で読み込みます。 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. テーマを選びます。 デフォルトのトークンで問題ありません。雰囲気を変えたい場合は、 skills/html-ppt/assets/themes/*.css にある36種類のテーマから選んで <link id="theme-link"> 経由で適用し、T キーで切り替えられるようにします。
5. クラスではなく、デモコンテンツを置き換えます。 .tpl-knowledge-arch-blueprint のスコープ付き CSS が 認識するのは、テンプレートに含まれる構造クラスのみです。これらは維持してください。
6. スピーカーノートは <aside class="notes"> または <div class="notes"> の中に記述します。 スライド上に表示されるテキストとして記述しないでください。

クレジット

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