mcpField
H
html-ppt-tech-sharing

html-ppt-tech-sharing

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

html-ppt-tech-sharing について

`html-ppt`のマスタースキルから、`tech-sharing`のフルデッキテンプレートを選ぶための入口です。技術共有用のスライドを作る人向けに、テンプレートや共有ランタイムの設定、内容の差し替え方法を案内します。

主な機能

  1. 01`tech-sharing`のフルデッキテンプレート
  2. 02テンプレートのコピーとアセット設定
  3. 03テーマの変更に対応
  4. 04構造クラスとスピーカーノートの扱い

活用シーン

  1. 01技術共有スライドの作成
  2. 02テンプレートのコピーとアセットパスの修正
  3. 03テーマ変更とサンプル内容の差し替え

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/nexu-io/open-design --skill html-ppt-tech-sharing

インストール後、Claude Code で/html-ppt-tech-sharingを入力して読み込まれたか確認します。

同梱ファイルexample.html

詳細

HTML PPT・技術共有

ユーザーを tech-sharing の全スライドテンプレートに直接案内する、html-ppt マスタースキルへの特化したエントリーポイントです。

このカードを選ぶ場合

Examples ギャラリーでは、「Use this prompt」が上記の example_prompt にリンクされています。このプロンプトを受け入れた場合、ユーザーが tech-sharing のビジュアルアイデンティティをそのまま使いたいなら、このカードを選んでください(スクリーンショットと選定理由については、上流の全スライドカタログを参照してください)。

スライドの作成方法

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

帰属表示

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

コメント