htmlewislulu-html-ppt-skill/html-ppt
lewis 5554a11c85 feat: html-ppt AgentSkill — HTML PPT Studio
Token-driven static HTML presentation system. One skill directory under
html-ppt/ implementing the full AgentSkills spec.

- 24 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.
  Each overrides only CSS custom properties consumed by base.css.
- 31 single-page layout templates (templates/single-page/) with realistic
  demo data: cover, toc, section-divider, bullets, two/three-column,
  big-quote, stat-highlight, kpi-grid, table, code (highlight.js), diff,
  terminal, flow/arch/mindmap diagrams, timeline, roadmap, gantt,
  comparison, pros-cons, checklist, image-hero/grid, chart-bar/line/pie/
  radar (chart.js), process-steps, cta, thanks.
- 27 named animations (assets/animations/animations.css) applied via
  class="anim-<name>" or data-anim="<name>"; runtime re-triggers on slide
  enter. Respects prefers-reduced-motion.
- Runtime (assets/runtime.js): ←/→/Space/PgUp/PgDn/Home/End nav, F
  fullscreen, S speaker notes overlay, O overview grid, T cycle themes,
  A cycle animations, #/N deep-link, progress bar, counter-up tick-up.
- Showcase decks: theme-showcase.html (24), animation-showcase.html (27),
  layout-showcase.html (iframe tour of 30 layouts), deck.html starter.
- Scripts: render.sh (headless Chrome at /Applications/Google Chrome.app,
  1920×1080, multi-slide via #/N) and new-deck.sh (scaffold from deck.html).
- References: themes.md, layouts.md, animations.md, authoring-guide.md.
- examples/demo-deck/ — complete 8-slide deck using aurora theme + chart.js.
- SKILL.md with trigger keywords (presentation, PPT, slides, keynote, deck,
  幻灯片, 演讲稿, reveal, 小红书图文) and authoring rules.
- MIT LICENSE, README.md.

Author: lewis <sudolewis@gmail.com>
2026-04-15 15:35:03 +08:00
..
assets feat: html-ppt AgentSkill — HTML PPT Studio 2026-04-15 15:35:03 +08:00
examples/demo-deck feat: html-ppt AgentSkill — HTML PPT Studio 2026-04-15 15:35:03 +08:00
references feat: html-ppt AgentSkill — HTML PPT Studio 2026-04-15 15:35:03 +08:00
scripts feat: html-ppt AgentSkill — HTML PPT Studio 2026-04-15 15:35:03 +08:00
templates feat: html-ppt AgentSkill — HTML PPT Studio 2026-04-15 15:35:03 +08:00
LICENSE feat: html-ppt AgentSkill — HTML PPT Studio 2026-04-15 15:35:03 +08:00
README.md feat: html-ppt AgentSkill — HTML PPT Studio 2026-04-15 15:35:03 +08:00
SKILL.md feat: html-ppt AgentSkill — HTML PPT Studio 2026-04-15 15:35:03 +08:00

README.md

html-ppt — HTML PPT Studio

Author: lewis <sudolewis@gmail.com> License: MIT

A self-contained AgentSkill for producing professional HTML presentations ("slides", "decks", "keynotes", 演讲稿, 幻灯片) in many styles, layouts, and animations — all driven by tasteful, hand-tuned templates.

  • 24 themes (assets/themes/*.css)
  • 30 page layouts (templates/single-page/*.html)
  • 25 named animations (assets/animations/animations.css)
  • Keyboard-driven runtime with presenter mode, theme cycling, overview grid
  • Zero build: pure static HTML/CSS/JS, CDN deps only (Noto Sans SC, Inter, JetBrains Mono, highlight.js, chart.js)
  • Showcase decks for every theme / layout / animation
  • Headless-Chrome PNG renderer script

Quick start

# scaffold a new deck
./scripts/new-deck.sh my-talk

# render a template to PNG
./scripts/render.sh templates/theme-showcase.html

Open templates/theme-showcase.html / templates/layout-showcase.html / templates/animation-showcase.html in Chrome to browse the whole catalog.

See SKILL.md for the agent-facing usage guide and references/ for the full theme / layout / animation catalogs.