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> |
||
|---|---|---|
| .. | ||
| assets | ||
| examples/demo-deck | ||
| references | ||
| scripts | ||
| templates | ||
| LICENSE | ||
| README.md | ||
| SKILL.md | ||
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.