html-ppt-graphify-dark-graph

HTML PPT・暗色背景の知識グラフ

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

このカードを選ぶ場合

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

デッキの作成方法

1. まずマスタースキルを読みます。 作成ルールはすべて skills/html-ppt/SKILL.md に記載されています。内容と対象者のチェックリスト、 トークンのルール、レイアウトの再利用、プレゼンターモード、キーボードのランタイム、 「プレゼンター専用のテキストをスライドに表示しない」というルールが含まれます。
2. 対応するテンプレートフォルダーから始めます。 skills/html-ppt/templates/full-decks/graphify-dark-graph/ から index.html と style.css をプロジェクトにコピーし、.tpl-graphify-dark-graph ボディクラスはそのままにします。
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-graphify-dark-graph スコープの CSS が 認識するのは、テンプレートに含まれる構造クラスのみです。これらはそのまま使います。
6. 発表者ノートは <aside class="notes"> または <div class="notes"> 内に記述します。 スライド上に表示されるテキストとして記述しないでください。

クレジット

ビジュアルシステム、レイアウト、テーマ、およびランタイムのキーボード操作モデルは、 上流の MIT ライセンスの lewislulu/html-ppt-skill に基づいています。 LICENSE ファイルは skills/html-ppt/LICENSE に含まれています。再配布時もそのまま残してください。