html-ppt-tech-sharing について
`html-ppt`のマスタースキルから、`tech-sharing`のフルデッキテンプレートを選ぶための入口です。技術共有用のスライドを作る人向けに、テンプレートや共有ランタイムの設定、内容の差し替え方法を案内します。
主な機能
- 01`tech-sharing`のフルデッキテンプレート
- 02テンプレートのコピーとアセット設定
- 03テーマの変更に対応
- 04構造クラスとスピーカーノートの扱い
活用シーン
- 01技術共有スライドの作成
- 02テンプレートのコピーとアセットパスの修正
- 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 のビジュアルアイデンティティをそのまま使いたいなら、このカードを選んでください(スクリーンショットと選定理由については、上流の全スライドカタログを参照してください)。
スライドの作成方法
- まずマスタースキルを読んでください。 作成ルールはすべて
skills/html-ppt/SKILL.mdにあります。内容と対象読者のチェックリスト、 トークンのルール、レイアウトの再利用、プレゼンターモード、キーボードランタイム、 「プレゼンター専用のテキストをスライドに表示しない」というルールが含まれます。 - 対応するテンプレートフォルダーを使用してください。
skills/html-ppt/templates/full-decks/tech-sharing/からindex.htmlとstyle.cssをプロジェクトにコピーし、.tpl-tech-sharingの 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 — コピーして書き換える(推奨):
- テーマを選んでください。 デフォルトのトークンで問題ありませんが、雰囲気を変えたい場合は、
<link id="theme-link">を使ってskills/html-ppt/assets/themes/*.cssにある36種類のテーマから選び、Tキーで切り替えられるようにしてください。 - デモコンテンツを差し替え、クラスは変更しないでください。
.tpl-tech-sharingにスコープされた CSS は、 テンプレートに含まれる構造クラスのみを認識するため、そのまま維持してください。 - スピーカーノートは
<aside class="notes">または<div class="notes">の中に記述してください。 スライド上に表示されるテキストとして記述してはいけません。
帰属表示
ビジュアルシステム、レイアウト、テーマ、ランタイムのキーボード操作モデルは、上流の MIT ライセンスの lewislulu/html-ppt-skill に由来します。
LICENSE ファイルは skills/html-ppt/LICENSE にあります。再配布する場合は、そのまま残してください。
コメント
Markdown 対応