diff --git a/README.md b/README.md index ecb717b..4c3abdb 100644 --- a/README.md +++ b/README.md @@ -1,33 +1,180 @@ # html-ppt — HTML PPT Studio -Author: **lewis** <sudolewis@gmail.com> -License: MIT +> A world-class AgentSkill for producing professional HTML presentations in +> **36 themes**, **14 full-deck templates**, **31 page layouts**, and +> **47 animations** (27 CSS + 20 canvas FX) — all pure static HTML/CSS/JS, no +> build step. -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. +**Author:** lewis <sudolewis@gmail.com> +**License:** MIT -- 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 +## Install (one command) ```bash -# scaffold a new deck -./scripts/new-deck.sh my-talk - -# render a template to PNG -./scripts/render.sh templates/theme-showcase.html +npx skills add https://github.com/lewislulu/html-ppt-skill ``` -Open `templates/theme-showcase.html` / `templates/layout-showcase.html` / -`templates/animation-showcase.html` in Chrome to browse the whole catalog. +That registers the skill with your agent runtime. After install, any agent +that supports AgentSkills can author presentations by asking things like: -See `SKILL.md` for the agent-facing usage guide and `references/` for the -full theme / layout / animation catalogs. +> "做一份 8 页的技术分享 slides，用 cyberpunk 主题" +> "turn this outline into a pitch deck" +> "做一个小红书图文，9 张，白底柔和风" + +## What's in the box + +| | Count | Where | +|---|---|---| +| 🎨 **Themes** | **36** | `assets/themes/*.css` | +| 📑 **Full-deck templates** | **14** | `templates/full-decks//` | +| 🧩 **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`. + +Each is a pure CSS-tokens file — swap one `` 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 + +Eight extracted from real-world decks, six generic scenario scaffolds: + +**Extracted looks** +- `xhs-white-editorial` — 小红书白底杂志风 +- `graphify-dark-graph` — 暗底 + 力导向知识图谱 +- `knowledge-arch-blueprint` — 蓝图 / 架构图风 +- `hermes-cyber-terminal` — 终端 cyberpunk +- `obsidian-claude-gradient` — 紫色渐变卡 +- `testing-safety-alert` — 红 / 琥珀警示风 +- `xhs-pastel-card` — 柔和马卡龙图文 +- `dir-key-nav-minimal` — 方向键极简 + +**Scenario decks** +- `pitch-deck`, `product-launch`, `tech-sharing`, `weekly-report`, + `xhs-post` (9-slide 3:4), `course-module` + +Each is a self-contained folder with scoped `.tpl-` 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 + +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. + +### 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) + +```bash +# 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 speaker notes overlay +O slide overview grid +T cycle themes +A cycle a demo animation on current slide +#/N (URL) deep-link to slide N +``` + +## 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// 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 + +- **Token-driven design system.** All color, radius, shadow, font decisions + live in `assets/base.css` + the current theme file. Change one variable, + the whole deck reflows tastefully. +- **Iframe isolation for previews.** Theme / layout / full-deck showcases all + use `