html-ppt-hermes-cyber-terminal

HTML PPT · 暗色端末の評価

html-ppt のマスタースキルに直接アクセスし、ユーザーを hermes-cyber-terminal のフルデッキテンプレートに案内するための専用エントリーポイントです。

このカードを選ぶ場合

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

デッキの作成方法

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

クレジット表記

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