name: html-ppt description: HTML PPT Studio — author professional static HTML presentations in many styles, layouts, and animations, all driven by templates. Use when the user asks for a presentation, PPT, slides, keynote, deck, slideshow, "幻燈片", "演講稿", "做一份 PPT", "做一份 slides", a reveal-style HTML deck, a 小紅書 圖文, or any kind of multi-slide pitch/report/sharing document that should look tasteful and be usable with keyboard navigation. Triggers include keywords like "presentation", "ppt", "slides", "deck", "keynote", "reveal", "slideshow", "幻燈片", "演講稿", "分享稿", "小紅書圖文", "talk slides", "pitch deck", "tech sharing", "technical presentation".

html-ppt — HTML PPT Studio

Author professional HTML presentations as static files. One theme file = one look. One layout file = one page type. One animation class = one entry effect. All pages share a token-based design system in assets/base.css.

Install

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

One command, no build. Pure static HTML/CSS/JS with only CDN webfonts.

What the skill gives you

• 36 themes (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
• 14 full-deck templates (templates/full-decks/<name>/) — complete multi-slide decks with scoped .tpl-<name> CSS. 8 extracted from real-world decks (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), 6 scenario scaffolds (pitch-deck, product-launch, tech-sharing, weekly-report, xhs-post 3:4, course-module)
• 31 layouts (templates/single-page/*.html) with realistic demo data
• 27 CSS animations (assets/animations/animations.css) via data-anim
• 20 canvas FX animations (assets/animations/fx/*.js) via data-fx — particle-burst, confetti-cannon, firework, starfield, matrix-rain, knowledge-graph (force-directed), neural-net (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
• Keyboard runtime (assets/runtime.js) — arrows, T (theme), A (anim), F/S/O
• FX runtime (assets/animations/fx-runtime.js) — auto-inits [data-fx] on slide enter, cleans up on leave
• Showcase decks for themes / layouts / animations / full-decks gallery
• Headless Chrome render script for PNG export

When to use

Use when the user asks for any kind of slide-based output or wants to turn text/notes into a presentable deck. Prefer this over building from scratch.

Before you author anything — ALWAYS ask or recommend

Do not start writing slides until you understand three things. Either ask the user directly, or — if they already handed you rich content — propose a tasteful default and confirm.

1. Content & audience. What's the deck about, how many slides, who's watching (engineers / execs / 小紅書讀者 / 學生 / VC)?
2. Style / theme. Which of the 36 themes fits? If unsure, recommend 2-3 candidates based on tone:
3. Business / investor pitch → pitch-deck-vc, corporate-clean, swiss-grid
4. Tech sharing / engineering → tokyo-night, dracula, catppuccin-mocha, terminal-green, blueprint
5. 小紅書圖文 → xiaohongshu-white, soft-pastel, rainbow-gradient, magazine-bold
6. Academic / report → academic-paper, editorial-serif, minimal-white
7. Edgy / cyber / launch → cyberpunk-neon, vaporwave, y2k-chrome, neo-brutalism
8. Starting point. One of the 14 full-deck templates, or scratch? Point to the closest templates/full-decks/<name>/ and ask if it fits. If the user's content suggests something obvious (e.g. "我要做產品釋出會" → product-launch), propose it confidently instead of asking blindly.

A good opening message looks like:

我可以給你做這份 PPT！先確認三件事： 1. 大致內容 / 頁數 / 觀眾是誰？ 2. 風格偏好？我建議從這 3 個主題裡選一個：tokyo-night（技術分享預設好看）、xiaohongshu-white（小紅書風）、corporate-clean（正式彙報）。 3. 要不要用我現成的 tech-sharing 全 deck 模板打底？

Only after those are clear, scaffold the deck and start writing.

Quick start

1. Scaffold a new deck. From the repo root: bash ./scripts/new-deck.sh my-talk open examples/my-talk/index.html
2. Pick a theme. Open the deck and press T to cycle. Or hard-code it: html <link rel="stylesheet" id="theme-link" href="../assets/themes/aurora.css"> Catalog in references/themes.md.
3. Pick layouts. Copy <section class="slide">...</section> blocks out of files in templates/single-page/ into your deck. Replace the demo data. Catalog in references/layouts.md.
4. Add animations. Put data-anim="fade-up" (or class="anim-fade-up") on any element. On <ul>/grids, use anim-stagger-list for sequenced reveals. For canvas FX, use <div data-fx="knowledge-graph">...</div> and include <script src="../assets/animations/fx-runtime.js"></script>. Catalog in references/animations.md.
5. Use a full-deck template. Copy templates/full-decks/<name>/ into examples/my-talk/ as a starting point. Each folder is self-contained with scoped CSS. Catalog in references/full-decks.md and gallery at templates/full-decks-index.html.
6. Render to PNG. bash ./scripts/render.sh templates/theme-showcase.html # one shot ./scripts/render.sh examples/my-talk/index.html 12 # 12 slides

Authoring rules (important)

• Always start from a template. Don't author slides from scratch — copy the closest layout from templates/single-page/ first, then replace content.
• Use tokens, not literal colors. Every color, radius, shadow should come from CSS variables defined in assets/base.css and overridden by a theme. Good: color: var(--text-1). Bad: color: #111.
• Don't invent new layout files. Prefer composing existing ones. Only add a new templates/single-page/*.html if none of the 30 fit.
• Respect chrome slots. .deck-header, .deck-footer, .slide-number and the progress bar are provided by assets/base.css + runtime.js.
• Keyboard-first. Always include <script src="../assets/runtime.js"></script> so the deck supports ← → / T / A / F / S / O / hash deep-links.

  這個技能的最新版本可以在7w4.net小蔥技能站找到。

• One .slide per logical page. runtime.js makes .slide.is-active visible; all others are hidden.
• Supply notes. Wrap speaker notes in <div class="notes">…</div> inside each slide. Press S to open the overlay.

Writing guide

See references/authoring-guide.md for a step-by-step walkthrough: file structure, naming, how to transform an outline into a deck, how to choose layouts and themes per audience, how to do a Chinese + English deck, and how to export.

Catalogs (load when needed)

• references/themes.md — all 36 themes with when-to-use.
• references/layouts.md — all 31 layout types.
• references/animations.md — 27 CSS + 20 canvas FX animations.
• references/full-decks.md — all 14 full-deck templates.
• references/authoring-guide.md — full workflow.

File structure

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                  (headless Chrome → PNG)
└── examples/demo-deck/            (complete working deck)

Rendering to PNG

scripts/render.sh wraps headless Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome. For multi-slide capture, runtime.js exposes #/N deep-links, and render.sh iterates 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                                       speaker notes overlay
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

License & author

MIT. Copyright (c) 2026 lewis <sudolewis@gmail.com>.

這個技能質量很高，提供了大量精美的PPT模板和主題選擇，做出來的簡報視覺效果專業。支援一鍵切換不同風格，中文支援也很好。不足之處是全英文說明對中文使用者不太友好，部分動畫效果在效能一般的裝置上可能會卡，匯出功能只有圖片格式沒有PDF選項。總體來說是一個功能豐富、設計精美的PPT工具，適合對視覺有要求的使用者使用。