{"id":"4de28301-3c2d-4034-aec0-20be1fe2a478","entityType":"agent","slug":"clawhub-lewislulu-html-ppt","name":"html-ppt — HTML PPT Studio","canonicalUrl":"https://www.xpersona.co/agent/clawhub-lewislulu-html-ppt","canonicalPath":"/agent/clawhub-lewislulu-html-ppt","generatedAt":"2026-10-09T16:49:02.331Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-09T08:53:46.463Z","emptyReason":null},"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... Skill: html-ppt — HTML PPT Studio Owner: lewislulu Summary: HTML PPT Studio — author professional static HTML presentations in many styles, layouts, and animations, all driven by templates. Use when the user asks for... Tags: latest:1.0.0 Version history: v1.0.0 | 2026-04-15T15:49:32.650Z | user Initial release · 36 themes · 31 layouts · 47 animations · 14 full-deck templates Archive index: Archive v1.0.0: 157 files,","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 3.3K downloads reported by the source. Last updated 10/9/2026.","installCommand":"clawhub skill install s1756zq2zg5j6dtwgwr9hs89bh84xf8p:html-ppt","sourceUrl":"https://clawhub.ai/lewislulu/html-ppt","homepage":"https://clawhub.ai/lewislulu/skills/html-ppt","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/lewislulu/html-ppt","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/lewislulu/skills/html-ppt","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":70,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"HTML PPT Studio — author professional static HTML presentations in many styles, layouts, and animations, all driven by templates. Use when the user asks for... "},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-09T08:53:46.463Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-09T08:53:46.463Z","emptyReason":null},"stars":null,"forks":null,"downloads":3266,"packageName":null,"latestVersion":"1.0.0","tractionLabel":"3.3K downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-09T08:53:46.463Z","emptyReason":null},"lastUpdatedAt":"2026-10-09T08:53:46.463Z","lastCrawledAt":"2026-10-09T08:53:46.463Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-10T08:53:46.463Z","lastVerifiedAt":null,"highlights":[{"version":"1.0.0","createdAt":"2026-04-15T15:49:32.650Z","changelog":"Initial release · 36 themes · 31 layouts · 47 animations · 14 full-deck templates","fileCount":157,"zipByteSize":213043}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s1756zq2zg5j6dtwgwr9hs89bh84xf8p:html-ppt","setupComplexity":"low","setupSteps":["Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.","Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data."],"contract":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-lewislulu-html-ppt/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-lewislulu-html-ppt/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-lewislulu-html-ppt/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-lewislulu-html-ppt/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-lewislulu-html-ppt/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-lewislulu-html-ppt/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-09T16:49:02.330Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-lewislulu-html-ppt/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-lewislulu-html-ppt/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-lewislulu-html-ppt/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-lewislulu-html-ppt/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"high","updatedAt":"2026-10-09T08:53:46.463Z","emptyReason":null},"readme":"Skill: html-ppt — HTML PPT Studio\n\nOwner: lewislulu\n\nSummary: HTML PPT Studio — author professional static HTML presentations in many styles, layouts, and animations, all driven by templates. Use when the user asks for...\n\nTags: latest:1.0.0\n\nVersion history:\n\nv1.0.0 | 2026-04-15T15:49:32.650Z | user\n\nInitial release · 36 themes · 31 layouts · 47 animations · 14 full-deck templates\n\nArchive index:\n\nArchive v1.0.0: 157 files, 213043 bytes\n\nFiles: assets/animations/animations.css (8065b), assets/animations/fx-runtime.js (3186b), assets/animations/fx/_util.js (1943b), assets/animations/fx/chain-react.js (1430b), assets/animations/fx/confetti-cannon.js (1559b), assets/animations/fx/constellation.js (1337b), assets/animations/fx/counter-explosion.js (2345b), assets/animations/fx/data-stream.js (1525b), assets/animations/fx/firework.js (1681b), assets/animations/fx/galaxy-swirl.js (1047b), assets/animations/fx/gradient-blob.js (1398b), assets/animations/fx/knowledge-graph.js (2492b), assets/animations/fx/letter-explode.js (2067b), assets/animations/fx/magnetic-field.js (1283b), assets/animations/fx/matrix-rain.js (1131b), assets/animations/fx/neural-net.js (2693b), assets/animations/fx/orbit-ring.js (1347b), assets/animations/fx/particle-burst.js (1244b), assets/animations/fx/shockwave.js (1376b), assets/animations/fx/sparkle-trail.js (1937b), assets/animations/fx/starfield.js (990b), assets/animations/fx/typewriter-multi.js (2177b), assets/animations/fx/word-cascade.js (1681b), assets/base.css (7786b), assets/fonts.css (889b), assets/runtime.js (6983b), assets/themes/academic-paper.css (1242b), assets/themes/arctic-cool.css (673b), assets/themes/aurora.css (1094b), assets/themes/bauhaus.css (719b), assets/themes/blueprint.css (956b), assets/themes/catppuccin-latte.css (663b), assets/themes/catppuccin-mocha.css (660b), assets/themes/corporate-clean.css (949b), assets/themes/cyberpunk-neon.css (1343b), assets/themes/dracula.css (650b), assets/themes/editorial-serif.css (863b), assets/themes/engineering-whiteprint.css (1347b), assets/themes/glassmorphism.css (1175b), assets/themes/gruvbox-dark.css (635b), assets/themes/japanese-minimal.css (1004b), assets/themes/magazine-bold.css (1116b), assets/themes/memphis-pop.css (967b), assets/themes/midcentury.css (920b), assets/themes/minimal-white.css (760b), assets/themes/neo-brutalism.css (792b), assets/themes/news-broadcast.css (1113b), assets/themes/nord.css (628b), assets/themes/pitch-deck-vc.css (1244b), assets/themes/rainbow-gradient.css (839b), assets/themes/retro-tv.css (1182b), assets/themes/rose-pine.css (634b), assets/themes/sharp-mono.css (739b), assets/themes/soft-pastel.css (665b), assets/themes/solarized-light.css (645b), assets/themes/sunset-warm.css (675b), assets/themes/swiss-grid.css (929b), assets/themes/terminal-green.css (836b), assets/themes/tokyo-night.css (635b), assets/themes/vaporwave.css (1234b), assets/themes/xiaohongshu-white.css (757b), assets/themes/y2k-chrome.css (1352b), docs/readme/_theme-cell.html (2681b), docs/readme/montage-animations.html (4707b), docs/readme/montage-layouts.html (3132b), docs/readme/montage-templates.html (3270b), docs/readme/montage-themes.html (2951b), examples/demo-deck/index.html (8916b), README.md (8601b), references/animations.md (7708b), references/authoring-guide.md (4689b), references/full-decks.md (8158b), references/layouts.md (4043b), references/themes.md (5264b), scripts/new-deck.sh (1354b), scripts/render.sh (1776b), skill-card.md (2276b), SKILL.md (10644b), templates/animation-showcase.html (7681b), templates/deck.html (3293b)\n\nFile v1.0.0:SKILL.md\n\n---\nname: html-ppt\ndescription: 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\".\n---\n\n# html-ppt — HTML PPT Studio\n\nAuthor professional HTML presentations as static files. One theme file = one\nlook. One layout file = one page type. One animation class = one entry effect.\nAll pages share a token-based design system in `assets/base.css`.\n\n## Install\n\n```bash\nnpx skills add https://github.com/lewislulu/html-ppt-skill\n```\n\nOne command, no build. Pure static HTML/CSS/JS with only CDN webfonts.\n\n## What the skill gives you\n\n- **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\n- **14 full-deck templates** (`templates/full-decks//`) — complete multi-slide decks with scoped `.tpl-` 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)\n- **31 layouts** (`templates/single-page/*.html`) with realistic demo data\n- **27 CSS animations** (`assets/animations/animations.css`) via `data-anim`\n- **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\n- **Keyboard runtime** (`assets/runtime.js`) — arrows, T (theme), A (anim), F/S/O\n- **FX runtime** (`assets/animations/fx-runtime.js`) — auto-inits `[data-fx]` on slide enter, cleans up on leave\n- **Showcase decks** for themes / layouts / animations / full-decks gallery\n- **Headless Chrome render script** for PNG export\n\n## When to use\n\nUse when the user asks for any kind of slide-based output or wants to turn\ntext/notes into a presentable deck. Prefer this over building from scratch.\n\n## Before you author anything — ALWAYS ask or recommend\n\n**Do not start writing slides until you understand three things.** Either ask\nthe user directly, or — if they already handed you rich content — propose a\ntasteful default and confirm.\n\n1. **Content & audience.** What's the deck about, how many slides, who's\n watching (engineers / execs / 小红书读者 / 学生 / VC)?\n2. **Style / theme.** Which of the 36 themes fits? If unsure, recommend 2-3\n candidates based on tone:\n - Business / investor pitch → `pitch-deck-vc`, `corporate-clean`, `swiss-grid`\n - Tech sharing / engineering → `tokyo-night`, `dracula`, `catppuccin-mocha`,\n `terminal-green`, `blueprint`\n - 小红书图文 → `xiaohongshu-white`, `soft-pastel`, `rainbow-gradient`,\n `magazine-bold`\n - Academic / report → `academic-paper`, `editorial-serif`, `minimal-white`\n - Edgy / cyber / launch → `cyberpunk-neon`, `vaporwave`, `y2k-chrome`,\n `neo-brutalism`\n3. **Starting point.** One of the 14 full-deck templates, or scratch? Point\n to the closest `templates/full-decks//` and ask if it fits. If the\n user's content suggests something obvious (e.g. \"我要做产品发布会\" →\n `product-launch`), propose it confidently instead of asking blindly.\n\nA good opening message looks like:\n\n> 我可以给你做这份 PPT！先确认三件事：\n> 1. 大致内容 / 页数 / 观众是谁？\n> 2. 风格偏好？我建议从这 3 个主题里选一个：`tokyo-night`（技术分享默认好看）、`xiaohongshu-white`（小红书风）、`corporate-clean`（正式汇报）。\n> 3. 要不要用我现成的 `tech-sharing` 全 deck 模板打底？\n\nOnly after those are clear, scaffold the deck and start writing.\n\n## Quick start\n\n1. **Scaffold a new deck.** From the repo root:\n ```bash\n ./scripts/new-deck.sh my-talk\n open examples/my-talk/index.html\n ```\n2. **Pick a theme.** Open the deck and press `T` to cycle. Or hard-code it:\n ```html\n \n ```\n Catalog in [references/themes.md](references/themes.md).\n3. **Pick layouts.** Copy `
...
` blocks out of\n files in `templates/single-page/` into your deck. Replace the demo data.\n Catalog in [references/layouts.md](references/layouts.md).\n4. **Add animations.** Put `data-anim=\"fade-up\"` (or `class=\"anim-fade-up\"`) on\n any element. On `
    `/grids, use `anim-stagger-list` for sequenced reveals.\n For canvas FX, use `
    ...
    ` and include\n ``.\n Catalog in [references/animations.md](references/animations.md).\n5. **Use a full-deck template.** Copy `templates/full-decks//` into\n `examples/my-talk/` as a starting point. Each folder is self-contained with\n scoped CSS. Catalog in [references/full-decks.md](references/full-decks.md)\n and gallery at `templates/full-decks-index.html`.\n6. **Render to PNG.**\n ```bash\n ./scripts/render.sh templates/theme-showcase.html # one shot\n ./scripts/render.sh examples/my-talk/index.html 12 # 12 slides\n ```\n\n## Authoring rules (important)\n\n- **Always start from a template.** Don't author slides from scratch — copy the\n closest layout from `templates/single-page/` first, then replace content.\n- **Use tokens, not literal colors.** Every color, radius, shadow should come\n from CSS variables defined in `assets/base.css` and overridden by a theme.\n Good: `color: var(--text-1)`. Bad: `color: #111`.\n- **Don't invent new layout files.** Prefer composing existing ones. Only add\n a new `templates/single-page/*.html` if none of the 30 fit.\n- **Respect chrome slots.** `.deck-header`, `.deck-footer`, `.slide-number`\n and the progress bar are provided by `assets/base.css` + `runtime.js`.\n- **Keyboard-first.** Always include ``\n so the deck supports ← → / T / A / F / S / O / hash deep-links.\n- **One `.slide` per logical page.** `runtime.js` makes `.slide.is-active`\n visible; all others are hidden.\n- **Supply notes.** Wrap speaker notes in `
    …
    ` inside\n each slide. Press S to open the overlay.\n\n## Writing guide\n\nSee [references/authoring-guide.md](references/authoring-guide.md) for a\nstep-by-step walkthrough: file structure, naming, how to transform an outline\ninto a deck, how to choose layouts and themes per audience, how to do a\nChinese + English deck, and how to export.\n\n## Catalogs (load when needed)\n\n- [references/themes.md](references/themes.md) — all 36 themes with when-to-use.\n- [references/layouts.md](references/layouts.md) — all 31 layout types.\n- [references/animations.md](references/animations.md) — 27 CSS + 20 canvas FX animations.\n- [references/full-decks.md](references/full-decks.md) — all 14 full-deck templates.\n- [references/authoring-guide.md](references/authoring-guide.md) — full workflow.\n\n## File structure\n\n```\nhtml-ppt/\n├── SKILL.md (this file)\n├── references/ (detailed catalogs, load as needed)\n├── assets/\n│ ├── base.css (tokens + primitives — do not edit per deck)\n│ ├── fonts.css (webfont imports)\n│ ├── runtime.js (keyboard + presenter + overview + theme cycle)\n│ ├── themes/*.css (36 token overrides, one per theme)\n│ └── animations/\n│ ├── animations.css (27 named CSS entry animations)\n│ ├── fx-runtime.js (auto-init [data-fx] on slide enter)\n│ └── fx/*.js (20 canvas FX modules: particles/graph/fireworks…)\n├── templates/\n│ ├── deck.html (minimal 6-slide starter)\n│ ├── theme-showcase.html (36 slides, iframe-isolated per theme)\n│ ├── layout-showcase.html (iframe tour of all 31 layouts)\n│ ├── animation-showcase.html (20 FX + 27 CSS animation slides)\n│ ├── full-decks-index.html (gallery of all 14 full-deck templates)\n│ ├── full-decks// (14 scoped multi-slide deck templates)\n│ └── single-page/*.html (31 layout files with demo data)\n├── scripts/\n│ ├── new-deck.sh (scaffold a deck from deck.html)\n│ └── render.sh (headless Chrome → PNG)\n└── examples/demo-deck/ (complete working deck)\n```\n\n## Rendering to PNG\n\n`scripts/render.sh` wraps headless Chrome at\n`/Applications/Google Chrome.app/Contents/MacOS/Google Chrome`. For multi-slide\ncapture, runtime.js exposes `#/N` deep-links, and render.sh iterates 1..N.\n\n```bash\n./scripts/render.sh templates/single-page/kpi-grid.html # single page\n./scripts/render.sh examples/demo-deck/index.html 8 out-dir # 8 slides, custom dir\n```\n\n## Keyboard cheat sheet\n\n```\n← → Space PgUp PgDn Home End navigate\nF fullscreen\nS speaker notes overlay\nO slide overview grid\nT cycle themes (reads data-themes attr)\nA cycle demo animation on current slide\n#/N in URL deep-link to slide N\n```\n\n## License & author\n\nMIT. Copyright (c) 2026 lewis <sudolewis@gmail.com>.\n\nFile v1.0.0:README.md\n\n# html-ppt — HTML PPT Studio\n\n> A world-class AgentSkill for producing professional HTML presentations in\n> **36 themes**, **14 full-deck templates**, **31 page layouts**, and\n> **47 animations** (27 CSS + 20 canvas FX) — all pure static HTML/CSS/JS, no\n> build step.\n\n**Author:** lewis <sudolewis@gmail.com>\n**License:** MIT\n\n![html-ppt — cover with live previews](docs/readme/hero.gif)\n\n> One command installs **36 themes × 20 canvas FX × 31 layouts × 14 full decks = 101 PPT skills**. Every preview above is a live iframe of a real template file rendering inside the deck — no screenshots, no mock-ups.\n\n## Install (one command)\n\n```bash\nnpx skills add https://github.com/lewislulu/html-ppt-skill\n```\n\nThat registers the skill with your agent runtime. After install, any agent\nthat supports AgentSkills can author presentations by asking things like:\n\n> \"做一份 8 页的技术分享 slides，用 cyberpunk 主题\"\n> \"turn this outline into a pitch deck\"\n> \"做一个小红书图文，9 张，白底柔和风\"\n\n## What's in the box\n\n| | Count | Where |\n|---|---|---|\n| 🎨 **Themes** | **36** | `assets/themes/*.css` |\n| 📑 **Full-deck templates** | **14** | `templates/full-decks//` |\n| 🧩 **Single-page layouts** | **31** | `templates/single-page/*.html` |\n| ✨ **CSS animations** | **27** | `assets/animations/animations.css` |\n| 💥 **Canvas FX animations** | **20** | `assets/animations/fx/*.js` |\n| 🖼️ **Showcase decks** | 4 | `templates/*-showcase.html` |\n| 📸 **Verification screenshots** | 56 | `scripts/verify-output/` |\n\n### 36 Themes\n\n`minimal-white`, `editorial-serif`, `soft-pastel`, `sharp-mono`, `arctic-cool`,\n`sunset-warm`, `catppuccin-latte`, `catppuccin-mocha`, `dracula`, `tokyo-night`,\n`nord`, `solarized-light`, `gruvbox-dark`, `rose-pine`, `neo-brutalism`,\n`glassmorphism`, `bauhaus`, `swiss-grid`, `terminal-green`, `xiaohongshu-white`,\n`rainbow-gradient`, `aurora`, `blueprint`, `memphis-pop`, `cyberpunk-neon`,\n`y2k-chrome`, `retro-tv`, `japanese-minimal`, `vaporwave`, `midcentury`,\n`corporate-clean`, `academic-paper`, `news-broadcast`, `pitch-deck-vc`,\n`magazine-bold`, `engineering-whiteprint`.\n\n![36 themes · 8 of them](docs/readme/themes.png)\n\nEach is a pure CSS-tokens file — swap one `` to reskin the entire deck.\nBrowse them all in `templates/theme-showcase.html` (each slide rendered in an\nisolated iframe so theme ≠ theme is visually guaranteed).\n\n![14 full-deck templates](docs/readme/templates.png)\n\n### 14 Full-deck templates\n\nEight extracted from real-world decks, six generic scenario scaffolds:\n\n**Extracted looks**\n- `xhs-white-editorial` — 小红书白底杂志风\n- `graphify-dark-graph` — 暗底 + 力导向知识图谱\n- `knowledge-arch-blueprint` — 蓝图 / 架构图风\n- `hermes-cyber-terminal` — 终端 cyberpunk\n- `obsidian-claude-gradient` — 紫色渐变卡\n- `testing-safety-alert` — 红 / 琥珀警示风\n- `xhs-pastel-card` — 柔和马卡龙图文\n- `dir-key-nav-minimal` — 方向键极简\n\n**Scenario decks**\n- `pitch-deck`, `product-launch`, `tech-sharing`, `weekly-report`,\n `xhs-post` (9-slide 3:4), `course-module`\n\nEach is a self-contained folder with scoped `.tpl-` CSS so multiple\ndecks can be previewed side-by-side without collisions. Browse the full\ngallery in `templates/full-decks-index.html`.\n\n![31 single-page layouts](docs/readme/layouts.png)\n\n### 31 Single-page layouts\n\ncover · toc · section-divider · bullets · two-column · three-column ·\nbig-quote · stat-highlight · kpi-grid · table · code · diff · terminal ·\nflow-diagram · timeline · roadmap · mindmap · comparison · pros-cons ·\ntodo-checklist · gantt · image-hero · image-grid · chart-bar · chart-line ·\nchart-pie · chart-radar · arch-diagram · process-steps · cta · thanks\n\nEvery layout ships with realistic demo data so you can drop it into a deck\nand immediately see it render.\n\n![31 layouts auto-cycling through real template files](docs/readme/layouts-live.gif)\n\n*The big iframe is loading `templates/single-page/.html` directly and cycling through all 31 layouts every 2.8 seconds.*\n\n![47 animations — 27 CSS + 20 canvas FX](docs/readme/animations.png)\n\n### 27 CSS animations + 20 Canvas FX\n\n**CSS (lightweight)** — directional fades, `rise-in`, `zoom-pop`, `blur-in`,\n`glitch-in`, `typewriter`, `neon-glow`, `shimmer-sweep`, `gradient-flow`,\n`stagger-list`, `counter-up`, `path-draw`, `morph-shape`, `parallax-tilt`,\n`card-flip-3d`, `cube-rotate-3d`, `page-turn-3d`, `perspective-zoom`,\n`marquee-scroll`, `kenburns`, `ripple-reveal`, `spotlight`, …\n\n**Canvas FX (cinematic)** — `particle-burst`, `confetti-cannon`, `firework`,\n`starfield`, `matrix-rain`, `knowledge-graph` (force-directed physics),\n`neural-net` (signal pulses), `constellation`, `orbit-ring`, `galaxy-swirl`,\n`word-cascade`, `letter-explode`, `chain-react`, `magnetic-field`,\n`data-stream`, `gradient-blob`, `sparkle-trail`, `shockwave`,\n`typewriter-multi`, `counter-explosion`. Each is a real hand-rolled canvas\nmodule auto-initialised on slide enter via `fx-runtime.js`.\n\n## Quick start (manual, after install or git clone)\n\n```bash\n# Scaffold a new deck from the base template\n./scripts/new-deck.sh my-talk\n\n# Browse everything\nopen templates/theme-showcase.html # all 36 themes (iframe-isolated)\nopen templates/layout-showcase.html # all 31 layouts\nopen templates/animation-showcase.html # all 47 animations\nopen templates/full-decks-index.html # all 14 full decks\n\n# Render any template to PNG via headless Chrome\n./scripts/render.sh templates/theme-showcase.html\n./scripts/render.sh examples/my-talk/index.html 12\n```\n\n## Keyboard cheat sheet\n\n```\n← → Space PgUp PgDn Home End navigate\nF fullscreen\nS speaker notes overlay\nO slide overview grid\nT cycle themes\nA cycle a demo animation on current slide\n#/N (URL) deep-link to slide N\n```\n\n## Project structure\n\n```\nhtml-ppt-skill/\n├── SKILL.md agent-facing dispatcher\n├── README.md this file\n├── references/ detailed catalogs\n│ ├── themes.md 36 themes with when-to-use\n│ ├── layouts.md 31 layout types\n│ ├── animations.md 27 CSS + 20 FX catalog\n│ ├── full-decks.md 14 full-deck templates\n│ └── authoring-guide.md full workflow\n├── assets/\n│ ├── base.css shared tokens + primitives\n│ ├── fonts.css webfont imports\n│ ├── runtime.js keyboard + presenter + overview\n│ ├── themes/*.css 36 theme token files\n│ └── animations/\n│ ├── animations.css 27 named CSS animations\n│ ├── fx-runtime.js auto-init [data-fx] on slide enter\n│ └── fx/*.js 20 canvas FX modules\n├── templates/\n│ ├── deck.html minimal starter\n│ ├── theme-showcase.html iframe-isolated theme tour\n│ ├── layout-showcase.html all 31 layouts\n│ ├── animation-showcase.html 47 animation slides\n│ ├── full-decks-index.html 14-deck gallery\n│ ├── full-decks// 14 scoped multi-slide decks\n│ └── single-page/*.html 31 layout files with demo data\n├── scripts/\n│ ├── new-deck.sh scaffold\n│ ├── render.sh headless Chrome → PNG\n│ └── verify-output/ 56 self-test screenshots\n└── examples/demo-deck/ complete working deck\n```\n\n## Philosophy\n\n- **Token-driven design system.** All color, radius, shadow, font decisions\n live in `assets/base.css` + the current theme file. Change one variable,\n the whole deck reflows tastefully.\n- **Iframe isolation for previews.** Theme / layout / full-deck showcases all\n use `