html-ppt-skill README

The project's README from github.com/lewislulu/html-ppt-skill. As one markdown file: README.md.

html-ppt — HTML PPT Studio

A world-class AgentSkill for producing professional HTML presentations in 36 themes, 15 full-deck templates, 31 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

html-ppt — cover with live previews

One command installs 36 themes × 20 canvas FX × 31 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.

Presenter mode with 4 magnetic cards

Why previews are pixel-perfect: each card is an <iframe> 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 张，白底柔和风"

What's in the box

Count Where
🎤 Presenter mode NEW S key / ?preview=N
🎨 Themes 36 assets/themes/*.css
📑 Full-deck templates 15 templates/full-decks/<name>/
🧩 Single-page layouts 31 templates/single-page/*.html
✨ CSS animations 27 assets/animations/animations.css
💥 Canvas FX animations 20 assets/animations/fx/*.js
🖼️ Showcase decks 4 templates/*-showcase.html
📸 Verification screenshots 56 scripts/verify-output/

36 Themes

minimal-white, editorial-serif, soft-pastel, sharp-mono, arctic-cool, sunset-warm, catppuccin-latte, catppuccin-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.

36 themes · 8 of them

Each is a pure CSS-tokens file — swap one <link> to reskin the entire deck. Browse them all in templates/theme-showcase.html (each slide rendered in an isolated iframe so theme ≠ theme is visually guaranteed).

14 full-deck templates

15 Full-deck templates

Eight extracted from real-world decks, seven generic scenario scaffolds:

Extracted looks

Scenario decks

Each is a self-contained folder with scoped .tpl-<name> CSS so multiple decks can be previewed side-by-side without collisions. Browse the full gallery in templates/full-decks-index.html.

31 single-page layouts

31 Single-page layouts

cover · toc · section-divider · bullets · two-column · three-column · big-quote · stat-highlight · kpi-grid · table · code · diff · terminal · flow-diagram · timeline · roadmap · mindmap · comparison · pros-cons · todo-checklist · gantt · image-hero · image-grid · chart-bar · chart-line · chart-pie · chart-radar · arch-diagram · process-steps · cta · thanks

Every layout ships with realistic demo data so you can drop it into a deck and immediately see it render.

31 layouts auto-cycling through real template files

The big iframe is loading templates/single-page/<name>.html directly and cycling through all 31 layouts every 2.8 seconds.

47 animations — 27 CSS + 20 canvas FX

27 CSS animations + 20 Canvas FX

CSS (lightweight) — directional fades, rise-in, zoom-pop, blur-in, glitch-in, typewriter, neon-glow, shimmer-sweep, gradient-flow, stagger-list, counter-up, path-draw, morph-shape, parallax-tilt, card-flip-3d, cube-rotate-3d, page-turn-3d, perspective-zoom, marquee-scroll, kenburns, ripple-reveal, spotlight, …

Canvas FX (cinematic) — particle-burst, confetti-cannon, firework, starfield, matrix-rain, knowledge-graph (force-directed physics), neural-net (signal pulses), constellation, orbit-ring, galaxy-swirl, word-cascade, letter-explode, chain-react, magnetic-field, data-stream, gradient-blob, sparkle-trail, shockwave, typewriter-multi, counter-explosion. Each is a real hand-rolled canvas module auto-initialised on slide enter via fx-runtime.js.

Quick start (manual, after install or git clone)

# Scaffold a new deck from the base template
./scripts/new-deck.sh my-talk

# Browse everything
open templates/theme-showcase.html         # all 36 themes (iframe-isolated)
open templates/layout-showcase.html        # all 31 layouts
open templates/animation-showcase.html     # all 47 animations
open templates/full-decks-index.html       # all 14 full decks

# Render any template to PNG via headless Chrome
./scripts/render.sh templates/theme-showcase.html
./scripts/render.sh examples/my-talk/index.html 12

Keyboard cheat sheet

← → Space PgUp PgDn Home End   navigate
F                               fullscreen
S                               open presenter window (magnetic cards)
N                               quick notes drawer (bottom)
R                               reset timer (in presenter window)
O                               slide overview grid
T                               cycle themes (syncs to presenter)
A                               cycle a demo animation on current slide
#/N (URL)                       deep-link to slide N
?preview=N (URL)                preview-only mode (single slide, no chrome)

Project structure

html-ppt-skill/
├── SKILL.md                      agent-facing dispatcher
├── README.md                     this file
├── references/                   detailed catalogs
│   ├── themes.md                 36 themes with when-to-use
│   ├── layouts.md                31 layout types
│   ├── animations.md             27 CSS + 20 FX catalog
│   ├── full-decks.md             14 full-deck templates
│   └── authoring-guide.md        full workflow
├── assets/
│   ├── base.css                  shared tokens + primitives
│   ├── fonts.css                 webfont imports
│   ├── runtime.js                keyboard + presenter + overview
│   ├── themes/*.css              36 theme token files
│   └── animations/
│       ├── animations.css        27 named CSS animations
│       ├── fx-runtime.js         auto-init [data-fx] on slide enter
│       └── fx/*.js               20 canvas FX modules
├── templates/
│   ├── deck.html                 minimal starter
│   ├── theme-showcase.html       iframe-isolated theme tour
│   ├── layout-showcase.html      all 31 layouts
│   ├── animation-showcase.html   47 animation slides
│   ├── full-decks-index.html     14-deck gallery
│   ├── full-decks/<name>/        14 scoped multi-slide decks
│   └── single-page/*.html        31 layout files with demo data
├── scripts/
│   ├── new-deck.sh               scaffold
│   ├── render.sh                 headless Chrome → PNG
│   └── verify-output/            56 self-test screenshots
└── examples/demo-deck/           complete working deck

Philosophy

License

MIT © 2026 lewis <[email protected]>.

html-ppt-skill (lewislulu/html-ppt-skill)

Searching Database…

8.7K ·GitHub
Html-ppt-skill
Что это?html-ppt (HTML PPT Studio) — это AgentSkill, позволяющий AI-агентам для кодинга создавать профессиональные HTML-презентации — с 36 темами, 31 макетом страниц, 15 шаблонами целых презентаций и 47 анимациями, плюс режимом докладчика, — всё в виде чистого статического HTML/CSS/JS без этапа сборки.
Это отдельное приложение или то, что я устанавливаю в своего AI-агента?Это пакет AgentSkill, а не отдельное приложение — после регистрации любой AI-кодинг-агент с поддержкой AgentSkills может создавать презентации по запросу, а результат — чистый статический HTML/CSS/JS с нулевым этапом сборки.
Как его настроить?Одна команда установки регистрирует скилл в среде выполнения вашего агента; после этого вы просто просите агента на естественном языке, например 'преврати этот план в питч-презентацию'.
Нужен ли конкретный AI-агент, чтобы пользоваться этим?Нужна среда выполнения агента с поддержкой AgentSkills — после установки любой такой агент может создавать презентации по простому запросу вроде 'сделай 8-страничную презентацию для техшеринга в теме киберпанк'.
Есть ли подвох в подходе без сборки?Это чистый статический HTML/CSS/JS без этапа сборки, но опциональные дополнения вроде webfonts, highlight.js и chart.js всё равно подтягиваются с CDN, так что этим функциям нужен доступ в интернет.
Работает ли он на Windows, macOS и Linux?Да — поскольку каждая презентация и сам скилл представляют собой чистый статический HTML/CSS/JS, они работают везде, где работает браузер, без платформенно-специфичных зависимостей.
Что такое режим докладчика?Нажатие S на любой презентации открывает синхронизированное окно докладчика с перетаскиваемыми карточками: текущий слайд, превью следующего слайда, сценарий выступления и таймер, синхронизируемые с зрительским видом через BroadcastChannel, так что навигация по слайдам никогда не вызывает перезагрузку или мерцание.
Сколько тем и макетов в комплекте?В комплекте 36 тем на CSS-токенах, 31 одностраничный макет, 15 шаблонов целых презентаций и 47 анимаций (27 CSS + 20 canvas FX), так что презентацию можно полностью перестилизовать, просто заменив один файл темы.
Поддерживает ли он китайский контент?Да — он построен с первоклассной поддержкой китайского и английского, с предзагрузкой шрифтов Noto Sans SC / Noto Serif SC и отдельным китайским README (README.zh-CN.md).
Чем уникальны превью презентаций?Каждое живое превью — в галереях тем, обзорах макетов и режиме докладчика — это настоящий изолированный iframe, загружающий реальный файл шаблона с query-параметром ?preview=N, а не скриншот, поэтому цвета и макет всегда в точности совпадают с тем, что видит аудитория.
What are similar projects?nodeppt, bolt-slides, dashi-ppt-skill, guizang-ppt-skill, Cowart, ppt-master, frontend-slides, banana-slides
Which topics is it in?css-animations, ppt, slides, static-site, presentation, zero-dependency, canvas, template, theme, skill, animation, css
Creator
lewislulu
Size
9.4 MB
Stars
8.7K
Updated
CommitSep 14
Age
6mo
Commits · 90 Days