html-ppt

html-ppt — HTML PPT スタジオ

プロフェッショナルな HTML プレゼンテーションを静的ファイルとして作成します。テーマファイル 1 つで 1 つの外観、レイアウトファイル 1 つで 1 種類のページ、アニメーションクラス 1 つで 1 種類の開始時効果を定義します。すべてのページで、assets/base.css にあるトークンベースのデザインシステムを共有します。

インストール

npx skills add https://github.com/lewislulu/html-ppt-skill

コマンド 1 つで使え、ビルドは不要です。CDN のウェブフォントのみを使用する、純粋な静的 HTML/CSS/JS です。

このスキルでできること

• 36 種類のテーマ（assets/themes/*.css）— minimal-white、editorial-serif、soft-pastel、sharp-mono、arctic-cool、sunset-warm、catppuccin-latte/mocha、dracula、tokyo-night、nord、solarized-light、gruvbox-dark、rose-pine、neo-brutalism、glassmorphism、bauhaus、swiss-grid、terminal-green、xiaohongshu-white、rainbow-gradient、aurora、blueprint、memphis-pop、cyberpunk-neon、y2k-chrome、retro-tv、japanese-minimal、vaporwave、midcentury、corporate-clean、academic-paper、news-broadcast、pitch-deck-vc、magazine-bold、engineering-whiteprint
• 15 種類のフルデッキテンプレート（templates/full-decks/<name>/）— スコープ付きの .tpl-<name> CSS を使用した、複数スライドからなる完全なデッキです。実際のデッキから抽出した 8 種類（xhs-white-editorial、graphify-dark-graph、knowledge-arch-blueprint、hermes-cyber-terminal、obsidian-claude-gradient、testing-safety-alert、xhs-pastel-card、dir-key-nav-minimal）と、シナリオ別のひな形 7 種類（pitch-deck、product-launch、tech-sharing、weekly-report、xhs-post 3:4、course-module、presenter-mode-reveal — 演者モード専用）
• デモデータを含む 31 種類のレイアウト（templates/single-page/*.html）
• data-anim で使える 27 種類の CSS アニメーション（assets/animations/animations.css）
• data-fx で使える 20 種類の Canvas FX アニメーション（assets/animations/fx/*.js）— particle-burst、confetti-cannon、firework、starfield、matrix-rain、knowledge-graph（力指向）、neural-net（パルス）、constellation、orbit-ring、galaxy-swirl、word-cascade、letter-explode、chain-react、magnetic-field、data-stream、gradient-blob、sparkle-trail、shockwave、typewriter-multi、counter-explosion
• キーボード操作ランタイム（assets/runtime.js）— 矢印キー、T（テーマ）、A（アニメーション）、F/O、S（演者モード：CURRENT / NEXT / SCRIPT / TIMER カードを表示するマグネット式ポップアップ）、N（ノートドロワー）、R（演者モードでタイマーをリセット）
• FX ランタイム（assets/animations/fx-runtime.js）— スライド表示時に [data-fx] を自動初期化し、スライドを離れるとクリーンアップします
• テーマ／レイアウト／アニメーション／フルデッキのギャラリー用ショーケースデッキ
• PNG エクスポート用の Chromium 管理レンダリングスクリプト

使用する場面

ユーザーがスライド形式の出力を求める場合や、テキスト／メモをプレゼン可能なデッキにしたい場合に使用します。ゼロから作成するより、こちらを優先してください。

🎤 プレゼンターモード（演者モード＋逐語スクリプト）

ユーザーが 演説／共有／講演原稿／逐語スクリプト／speaker notes／presenter view／演者ビュー／プロンプター のいずれかに触れたり、「チームに xxx を話しに行く」「技術共有会を開く」「流暢に話せるか不安」「逐語スクリプト付きの PPT が欲しい」などと言った場合は、presenter-mode-reveal のフルデッキテンプレートを使い、各スライドの <aside class="notes"> に 150～300 語の逐語スクリプトを記述してください。

話者スクリプト作成の 3 つのルールを含む、執筆ガイドの全文については references/presenter-mode.md を参照してください。

1. 講演原稿ではなく、合図です — 核心となるキーワードを太字にし、つなぎの文は独立した段落にします
2. 各ページ 150～300 語 — 1 ページあたり 2～3 分のペース
3. 書き言葉ではなく、話し言葉を使います — 「したがって」→「なので」、「当該の方法」→「この方法」

すべてのフルデッキテンプレートは、プレゼンターモードの S キーに対応しています（runtime.js に組み込まれています）。S キーを押すと、4 枚のマグネット式カードを備えた新しいポップアップウィンドウが開きます。

• 🔵 CURRENT — 現在のスライドをピクセル単位で忠実に表示する iframe プレビュー
• 🟣 NEXT — 次のスライドをピクセル単位で忠実に表示する iframe プレビュー
• 🟠 SPEAKER SCRIPT — 大きなフォントで表示する逐語スクリプト（スクロール可能）
• 🟢 TIMER — 経過時間＋スライドカウンター＋前／次／リセットボタン

各カードはヘッダーをドラッグして移動でき、右下隅のハンドルをドラッグしてサイズを変更できます。カードの位置とサイズはデッキごとに localStorage に保存されます。「レイアウトをリセット」ボタンを押すと、デフォルトの配置に戻ります。

プレビューがピクセル単位で忠実に表示される理由：各プレビューは、実際のデッキ HTML を ?preview=N クエリパラメーター付きで読み込む <iframe> です。runtime.js はこれを検出し、スライド N のみをクロームなしで表示します。そのため、プレビューは聴衆向け表示と同じ CSS、テーマ、フォント、ビューポートを使い、色とレイアウトが確実に一致します。

スムーズなナビゲーション：スライドが切り替わると、プレゼンターウィンドウは各 iframe に postMessage({type:'preview-goto', idx:N}) を送信します。iframe はスライド間の .is-active を切り替えるだけなので、再読み込みもちらつきもありません。2 つのウィンドウは BroadcastChannel でも同期されます。

すべてのスライドに適切な逐語スクリプトの例が用意され、この機能を中心に一から設計されているのは presenter-mode-reveal だけです。

プレゼンターウィンドウのキーボード操作：← → 移動（聴衆向け画面と同期） · R タイマーをリセット · Esc ポップアップを閉じる。 聴衆向けウィンドウのキーボード操作：S プレゼンターを開く · T テーマを切り替える · ← → 移動（プレゼンターと同期） · F 全画面表示 · O 概要。

作成を始める前に、まず推測し、行き詰まった場合にのみ質問する

スライドを書く前に、ユーザーの依頼内容、プロジェクトのメタデータ、提供されたコンテンツ、会話の内容から、以下の 3 つの決定事項を整理してください。十分に明確であれば、適切なデフォルトを選び、確認を待たずに進めてください。選択内容は計画の中で簡潔に示します。不足している回答によってデッキが大きく変わる場合に限り、確認を 1 回にまとめて質問してください。

1. コンテンツと聴衆。 デッキのテーマ、スライドの枚数、対象者（エンジニア／経営幹部／小紅書の読者／学生／VC）は誰ですか？
2. スタイル／テーマ。 36 種類のテーマのうち、どれが合いますか？判断に迷う場合は、トーンに応じて候補を 2～3 個提案してください。
   • ビジネス／投資家向けピッチ → pitch-deck-vc、corporate-clean、swiss-grid
   • 技術共有／エンジニアリング → tokyo-night、dracula、catppuccin-mocha、terminal-green、blueprint
   • 小紅書の画像付き投稿 → xiaohongshu-white、soft-pastel、rainbow-gradient、magazine-bold
   • 学術／レポート → academic-paper、editorial-serif、minimal-white
   • エッジの効いた表現／サイバー／ローンチ → cyberpunk-neon、vaporwave、y2k-chrome、neo-brutalism
3. 出発点。 14 種類のフルデッキテンプレートのいずれか、またはゼロから作成する方法のどれにしますか？最も近い templates/full-decks/<name>/ を選んでください。ユーザーのコンテンツから明らかな場合（例：「製品発表会をしたい」→ product-launch）は、むやみに質問せず、確信を持ってそのテンプレートを使ってください。

確認が本当に必要な場合は、現在有効な discovery-question-form プロトコルに従い、未解決の項目だけを質問してください。たとえば、コンテンツと対象者は分かっているものの、希望するトーンが相容れないテーマにまたがる場合は、推奨候補を 2～3 個挙げてテーマについて 1 つ質問します。フォームを Markdown のチェックリストとして繰り返さないでください。

既知のコンテキストで必要な項目がすでに決まっている場合は、すぐにデッキのひな型を作成し、執筆を始めてください。

クイックスタート

1. 新しいデッキを作成します。 リポジトリのルートから実行します。

   ./scripts/new-deck.sh my-talk
   open examples/my-talk/index.html
   

2. テーマを選択します。 デッキを開き、T を押して切り替えます。または、直接指定します。

   <link rel="stylesheet" id="theme-link" href="../assets/themes/aurora.css">
   

   一覧は references/themes.md を参照してください。
3. レイアウトを選択します。 templates/single-page/ 内のファイルから <section class="slide">...</section> ブロックをコピーして、デッキに貼り付けます。デモデータを置き換えてください。 一覧は references/layouts.md を参照してください。
4. アニメーションを追加します。 任意の要素に data-anim="fade-up"（または class="anim-fade-up"）を指定します。 <ul> やグリッドには、順番に表示するため anim-stagger-list を使います。 キャンバス FX には、<div data-fx="knowledge-graph">...</div> を使い、 <script src="../assets/animations/fx-runtime.js"></script> を含めます。 一覧は references/animations.md を参照してください。
5. デッキ全体のテンプレートを使います。 templates/full-decks/<name>/ を examples/my-talk/ にコピーして、出発点として使います。各フォルダーは、スコープ化された CSS を含む自己完結型です。一覧は references/full-decks.md を、ギャラリーは templates/full-decks-index.html を参照してください。
6. PNG にレンダリングします。

   ./scripts/render.sh templates/theme-showcase.html       # one shot
   ./scripts/render.sh examples/my-talk/index.html 12      # 12 slides
   

作成ルール（重要）

• 必ずテンプレートから始めます。 スライドをゼロから作成しないでください。まず templates/single-page/ から最も近いレイアウトをコピーし、その後で内容を置き換えます。
• 色はリテラル値ではなくトークンを使います。 色、角丸、シャドウはすべて、 assets/base.css で定義され、テーマによってオーバーライドされる CSS 変数を使います。 良い例：color: var(--text-1)。悪い例：color: #111。
• 新しいレイアウトファイルを作らないでください。 既存のものを組み合わせることを優先します。30 種類のどれにも当てはまらない場合に限り、新しい templates/single-page/*.html を追加します。
• クロームのスロットを尊重してください。 .deck-header、.deck-footer、.slide-number およびプログレスバーは、assets/base.css と runtime.js によって提供されます。
• キーボード操作を優先します。 デッキが ← → / T / A / F / S / O / ハッシュによるディープリンクに対応するよう、 必ず <script src="../assets/runtime.js"></script> を含めてください。
• 論理ページごとに .slide を 1 つ使います。 runtime.js は .slide.is-active を表示し、それ以外は非表示にします。
• ノートを用意します。 各スライド内の <div class="notes">…</div> に発表者ノートを記述します。S を押すとオーバーレイが開きます。
• スライド自体に発表者専用のテキストを絶対に置かないでください。 「このページでは……を示します」や「発表者：ここで補足できます……」のような説明文、または発表者向けの短い説明文は、必ず <div class="notes"> 内に記述し、スライド上の表示要素である <p> / <span> には記述しないでください。.notes クラスはデフォルトで display:none です。S オーバーレイでのみ表示されます。スライドには、聴衆向けの内容（タイトル、箇条書き、データ、グラフ、画像）のみを含めてください。

執筆ガイド

references/authoring-guide.md では、ファイル構造、命名、アウトラインからデッキに変換する方法、対象者に合わせたレイアウトとテーマの選び方、中国語と英語を併記したデッキの作り方、エクスポート方法を順を追って説明しています。

カタログ（必要に応じて読み込む）

• references/themes.md — 用途の説明を含む全 36 種類のテーマ。
• references/layouts.md — 全 31 種類のレイアウト。
• references/animations.md — 27 種類の CSS アニメーションと 20 種類のキャンバス FX アニメーション。
• references/full-decks.md — 全 15 種類のデッキ全体用テンプレート。
• references/presenter-mode.md — 発表者モード + 台本作成ガイド（技術共有／講演の際は必読）。
• references/authoring-guide.md — ワークフロー全体。

ファイル構造

html-ppt/
├── SKILL.md                 (this file)
├── references/              (detailed catalogs, load as needed)
├── assets/
│   ├── base.css             (tokens + primitives — do not edit per deck)
│   ├── fonts.css            (webfont imports)
│   ├── runtime.js           (keyboard + presenter + overview + theme cycle)
│   ├── themes/*.css         (36 token overrides, one per theme)
│   └── animations/
│       ├── animations.css   (27 named CSS entry animations)
│       ├── fx-runtime.js    (auto-init [data-fx] on slide enter)
│       └── fx/*.js          (20 canvas FX modules: particles/graph/fireworks…)
├── templates/
│   ├── deck.html                  (minimal 6-slide starter)
│   ├── theme-showcase.html        (36 slides, iframe-isolated per theme)
│   ├── layout-showcase.html       (iframe tour of all 31 layouts)
│   ├── animation-showcase.html    (20 FX + 27 CSS animation slides)
│   ├── full-decks-index.html      (gallery of all 14 full-deck templates)
│   ├── full-decks/<name>/         (14 scoped multi-slide deck templates)
│   └── single-page/*.html         (31 layout files with demo data)
├── scripts/
│   ├── new-deck.sh                (scaffold a deck from deck.html)
│   └── render.sh                  (managed Chromium → PNG)
└── examples/demo-deck/            (complete working deck)

PNG へのレンダリング

scripts/render.sh は Playwright が管理する Chromium レンダラーを使用します。PNG のエクスポートに、ユーザーがインストールした Google Chrome を直接呼び出さないでください。特に macOS のデスクトップビルドでは、Crashpad／プロファイルの権限により、スクリーンショットが書き込まれる前に Chrome が異常終了する場合があります。管理対象のレンダラーが一度でも失敗した場合は、そのエラーを報告して停止してください。別の Chrome 起動コマンドを試して再実行しないでください。

複数スライドのキャプチャでは、runtime.js が #/N ディープリンクを公開し、render.sh が 1..N を順に処理します。

./scripts/render.sh templates/single-page/kpi-grid.html        # single page
./scripts/render.sh examples/demo-deck/index.html 8 out-dir    # 8 slides, custom dir

Keyboard cheat sheet

←  →  Space  PgUp  PgDn  Home  End    navigate
F                                       fullscreen
S                                       open presenter window (magnetic cards: current/next/script/timer)
N                                       quick notes drawer (bottom overlay)
R                                       reset timer (in presenter window)
?preview=N                              URL param — force preview-only mode (single slide, no chrome)
O                                       slide overview grid
T                                       cycle themes (reads data-themes attr)
A                                       cycle demo animation on current slide
#/N in URL                              deep-link to slide N
Esc                                     close all overlays

License & author

MIT. Copyright (c) 2026 lewis <[email protected]>.