プロフェッショナルなHTMLプレゼンテーションを作成するための世界クラスのエージェントスキル 36のテーマ、15のフルデッキテンプレート、36ページのレイアウト 47のアニメーション(27 CSS + 20 キャンバスFX)、そして真のプレゼンターモード ピクセル単位のプレビュー+スピーカースクリプト+タイマーで、すべて純粋な静止音で、> HTML/CSS/JS、ビルドステップはありません。

著者: ルイス・<[email protected]> ライセンス: MIT 中文文档: README.zh-CN.md

ワンコマンドで36テーマ×20のキャンバスFX×36のレイアウト×15のフルデッキ+プレゼンターモードをインストールします。上記のプレビューはすべて、デッキ内でレンダリングされている実際のテンプレートファイルのライブiframeで、スクリーンショットやモックアップはありません。

🎤 プレゼンターモード(新!)

任意のデッキのSを押すと、4人の専用プレゼンターウィンドウが開きます ドラッグ可能、サイズ調整可能磁気カード:現在のスライド、次のスライドプレビュー、 スピーカースクリプト(逐字稿)とタイマー。2つのウィンドウは以下の方法で同期を保っています BroadcastChannel。

プレビューがピクセル単位で完璧な理由: 各カードは で 同じデッキHTMLに?preview=Nクエリパラメータを付けています。ランタイムはこれを検出し、 Chromeを使わずにスライドNのみをレンダリングするため、プレビューは同じCSSを使用しています。 テーマ、フォント、ビューポートは観客の視点として表示されます。色とレイアウトは

html-ppt — HTML PPT Studio

A world-class AgentSkill for producing professional HTML presentations in 36 themes, 15 full-deck templates, 36 page layouts, 47 animations (27 CSS + 20 canvas FX), and a true presenter mode with pixel-perfect previews + speaker script + timer — all pure static HTML/CSS/JS, no build step.

Author: lewis <[email protected]> License: MIT 中文文档: README.zh-CN.md

One command installs 36 themes × 20 canvas FX × 36 layouts × 15 full decks + presenter mode. Every preview above is a live iframe of a real template file rendering inside the deck — no screenshots, no mock-ups.

🎤 Presenter Mode (new!)

Press S on any deck to pop open a dedicated presenter window with four draggable, resizable magnetic cards: current slide, next slide preview, speaker script (逐字稿), and timer. Two windows stay in sync via BroadcastChannel.

Why previews are pixel-perfect: each card is an `` that loads the same deck HTML with a ?preview=N query param. The runtime detects this and renders only slide N with no chrome — so the preview uses the same CSS, theme, fonts and viewport as the audience view. Colors and layout are guaranteed identical.

Smooth (no-reload) navigation: on slide change, the presenter window sends postMessage({type:'preview-goto', idx:N}) to each iframe. The iframe just toggles .is-active between slides — no reload, no flicker.

Speaker script rules (3 golden):

1. Prompt signals, not lines to read — bold the keywords, separate transition sentences into their own paragraphs
2. 150–300 words per slide — that’s the ~2–3 min/page pace
3. Write it like you speak — conversational, not written prose

See references/presenter-mode.md for the full authoring guide, or copy the ready-made template at templates/full-decks/presenter-mode-reveal/ which ships with full 150-300 word speaker scripts on every slide.

Install (one command)

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

That registers the skill with your agent runtime. After install, any agent that supports AgentSkills can author presentations by asking things like:

“做一份 8 页的技术分享 slides，用 cyberpunk 主题” “turn this outline into a pitch deck” “做一个小红书图文，9 张，白底柔和风”

Offline / manual install

npx skills add needs network on the target machine. Three alternatives, in decreasing order of how much network they need.

1. Install from a local copy. Fetch the repo anywhere, move the folder over (git, zip, USB), then point the CLI at the directory instead of the URL:

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

npx still downloads the skills package itself once. For a fully air-gapped