html-ppt-testing-safety-alert について
`html-ppt` マスタースキルへの専用入口で、`testing-safety-alert` の全スライドテンプレートを使います。この安全警告スタイルで HTML プレゼンテーションを作る人向けに、共有ランタイムの導入方法も説明します。
主な機能
- 01testing-safety-alert の全スライドテンプレート
- 02ランタイムのコピーまたは埋め込み手順
- 03テーマの選択
- 04テンプレートの構造クラスを維持
- 05スピーカーノートの配置方法
活用シーン
- 01安全警告スタイルでプレゼンを作成
- 02テンプレートをプロジェクトにコピーして素材を設定
- 03プレゼンのテーマを変更
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ nexu-io/ open-design --skill html-ppt-testing-safety-alertインストール後、Claude Code で/html-ppt-testing-safety-alertを入力して読み込まれたか確認します。
同梱ファイルexample.html
詳細
HTML PPT・赤琥珀色の警告
ユーザーを testing-safety-alert のフルデッキテンプレートに直接案内する、html-ppt マスタースキルへの専用エントリーポイントです。
このカードが選ばれる場合
Examples ギャラリーでは、「Use this prompt」が上記の example_prompt にリンクされています。このプロンプトを受け入れた場合、ユーザーが testing-safety-alert のビジュアルアイデンティティをそのまま求めているなら、このカードが適しています(スクリーンショットと選定理由については、上流のフルデッキカタログを参照してください)。
デッキの作成方法
- まずマスタースキルを読みます。 作成ルールはすべて
skills/html-ppt/SKILL.mdに記載されています。内容と対象読者のチェックリスト、 トークンのルール、レイアウトの再利用、プレゼンターモード、キーボードランタイム、 「プレゼンター専用のテキストをスライドに表示しない」というルールが含まれます。 - 対応するテンプレートフォルダーから始めます。
skills/html-ppt/templates/full-decks/testing-safety-alert/—index.htmlとstyle.cssをプロジェクトにコピーし、.tpl-testing-safety-alertの body クラスを維持します。 - 共有ランタイムもテンプレートと一緒に用意します。 上流の
index.htmlは、skills/html-ppt/templates/full-decks/の3階層下にあるため、../../../assets/...を介して共有 CSS/JS をリンクしています。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 が機能するのはリポジトリ内だけです。
- 方法 A — コピーして書き換える(推奨):
- テーマを選びます。 デフォルトのトークンで問題ありませんが、別の雰囲気にしたい場合は、
skills/html-ppt/assets/themes/*.cssにある36種類のテーマのいずれかを<link id="theme-link">経由で読み込み、Tキーで切り替えられるようにします。 - デモコンテンツを置き換え、クラスは変更しません。
.tpl-testing-safety-alertのスコープ付き CSS が認識するのは、 テンプレートに含まれる構造クラスのみです。これらは維持してください。 - スピーカーノートは
<aside class="notes">または<div class="notes">の中に記述します。 スライド上に表示されるテキストとして記載しないでください。
クレジット表記
ビジュアルシステム、レイアウト、テーマ、ランタイムのキーボード操作モデルは、
上流の MIT ライセンス lewislulu/html-ppt-skill に由来します。
LICENSE ファイルは skills/html-ppt/LICENSE に含まれています。再配布する際は、そのまま保持してください。
コメント
Markdown 対応