Мирового класса AgentSkill для создания профессиональных HTML-презентаций в 36 тем, 15 шаблонов полной колоды, 36 макетов страниц, 47 анимаций (27 CSS + 20 эффектов на холсте) и режим настоящего ведущего с пиксельно точными превью + скрипт динамика + таймер — всё чистое статическое возбуждение HTML/CSS/JS, без шага сборки.

Автор: Льюис <[email protected]> Лицензия: MIT 中文文档: README.zh-CN.md

One Command устанавливает 36 тем × 20 canvas FX × 36 макетов × 15 полных колод + режим презентатора. Каждый превью выше — это живой iframe с реальным шаблонным файлом, рендеринговым внутри колоды — без скриншотов и макетов.

🎤 Режим ведущего (новый!)

Нажмите S на любой колоде, чтобы открыть отдельное окно ведущего с четырьмя Перетаскиваемые, изменяемые размером магнитные карты: текущий слайд, предварительный просмотр следующего слайда, Script speaker (逐字稿) и таймер. Два окна синхронизируются через BroadcastChannel.

Почему предпросмотры идеально подходят к пикселям: каждая карта — это , который загружает HTML той же колоды с параметром запроса ?preview=N. Время выполнения обнаруживает это и рендерит только N без Chrome — поэтому предпросмотр использует тот же 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