mcpField
H
html-ppt-weekly-report

html-ppt-weekly-report

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

html-ppt-weekly-report について

html-ppt スキルから weekly-report テンプレートを選んでスライド一式を作成するための入口です。テンプレートの再利用、ランタイムの設定、テーマ選択、発表者ノートの配置方法を説明します。

主な機能

  1. 01weekly-report の全スライドテンプレート
  2. 02HTML と CSS のテンプレートファイル
  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-weekly-report

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

同梱ファイルexample.html

詳細

HTML PPT · 週次レポート

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

このカードを選ぶ場面

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

デッキの作成方法

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

クレジット

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

コメント