mcpField
H
html-ppt-testing-safety-alert

html-ppt-testing-safety-alert

github.com/nexu-ioドキュメント104.6k182 回インストール今日更新
リポジトリ

html-ppt-testing-safety-alert について

`html-ppt` マスタースキルへの専用入口で、`testing-safety-alert` の全スライドテンプレートを使います。この安全警告スタイルで HTML プレゼンテーションを作る人向けに、共有ランタイムの導入方法も説明します。

主な機能

  1. 01testing-safety-alert の全スライドテンプレート
  2. 02ランタイムのコピーまたは埋め込み手順
  3. 03テーマの選択
  4. 04テンプレートの構造クラスを維持
  5. 05スピーカーノートの配置方法

活用シーン

  1. 01安全警告スタイルでプレゼンを作成
  2. 02テンプレートをプロジェクトにコピーして素材を設定
  3. 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 のビジュアルアイデンティティをそのまま求めているなら、このカードが適しています(スクリーンショットと選定理由については、上流のフルデッキカタログを参照してください)。

デッキの作成方法

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

クレジット表記

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

コメント