html-ppt-weekly-report について
html-ppt スキルから weekly-report テンプレートを選んでスライド一式を作成するための入口です。テンプレートの再利用、ランタイムの設定、テーマ選択、発表者ノートの配置方法を説明します。
主な機能
- 01weekly-report の全スライドテンプレート
- 02HTML と CSS のテンプレートファイル
- 03共通スタイルとランタイムの設定
- 04テーマの切り替え
- 05発表者ノートの配置規則
活用シーン
- 01週次報告スライドの作成
- 02デッキ内のサンプル内容の置き換え
- 03プロジェクトへの共通ランタイムの組み込み
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ nexu-io/ open-design --skill html-ppt-weekly-reportインストール後、Claude Code で/html-ppt-weekly-reportを入力して読み込まれたか確認します。
同梱ファイルexample.html
詳細
HTML PPT · 週次レポート
ユーザーを weekly-report の全スライドテンプレートへ直接案内する、html-ppt マスタースキルへの特化したエントリーポイントです。
このカードを選ぶ場面
Examples ギャラリーでは、「Use this prompt」が上記の example_prompt に紐付けられています。このプロンプトを選択したとき、ユーザーが weekly-report のビジュアルアイデンティティをそのまま使いたい場合は、このカードが適しています(スクリーンショットと選定理由については、上流の全スライドカタログを参照してください)。
デッキの作成方法
- まずマスタースキルを読みます。 作成ルールはすべて
skills/html-ppt/SKILL.mdにあります。内容と対象読者のチェックリスト、 トークンのルール、レイアウトの再利用、プレゼンターモード、キーボードランタイム、 「プレゼンター専用のテキストをスライドに表示しない」というルールが含まれます。 - 対応するテンプレートフォルダーから始めます。
skills/html-ppt/templates/full-decks/weekly-report/—index.htmlとstyle.cssをプロジェクトにコピーし、.tpl-weekly-reportの body クラスを維持します。 - 共有ランタイムもテンプレートと一緒に用意します。 上流の
index.htmlは、skills/html-ppt/templates/full-decks/内で 3階層下に置かれているため、共有 CSS/JS を../../../assets/...経由で読み込みます。 プロジェクトにindex.htmlをコピーすると、これらの相対 URL は解決できなくなり、base.css、animations.css、runtime.jsが 404 になって、 デッキが起動せず、スライドの移動もできなくなります。プロジェクトごとに、次のいずれかの方法を選びます。- 方法 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-weekly-report用のスコープ付き CSS が 認識するのは、テンプレートに含まれる構造クラスだけです。そのため、クラスは維持してください。 - スピーカーノートは
<aside class="notes">または<div class="notes">の中に記述します。 スライド上に表示されるテキストとして記載しないでください。
クレジット
ビジュアルシステム、レイアウト、テーマ、ランタイムのキーボード操作モデルは、上流の MIT ライセンス適用プロジェクト lewislulu/html-ppt-skill に由来します。LICENSE ファイルは skills/html-ppt/LICENSE にあります。再配布する際も、そのまま残してください。
コメント
Markdown 対応