[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-648":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":9,"rankLanguage":9,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":22,"topics":25,"createdAt":9,"pushedAt":9,"updatedAt":26,"readmeContent":27,"aiSummary":28,"trendingCount":15,"starSnapshotCount":15,"syncStatus":29,"lastSyncTime":30,"discoverSource":31},648,"html-ppt-skill","lewislulu\u002Fhtml-ppt-skill","lewislulu","HTML PPT Studio — AgentSkill with 24 themes, 31 layouts, 20+ animations for building professional HTML presentations",null,"HTML",5828,546,14,12,0,212,613,1317,636,39.21,"MIT License",false,"main",true,[],"2026-06-12 02:00:16","# html-ppt — HTML PPT Studio\n\n> A world-class AgentSkill for producing professional HTML presentations in\n> **36 themes**, **15 full-deck templates**, **31 page layouts**,\n> **47 animations** (27 CSS + 20 canvas FX), and a **true presenter mode**\n> with pixel-perfect previews + speaker script + timer — all pure static\n> HTML\u002FCSS\u002FJS, no build step.\n\n**Author:** lewis <sudolewis@gmail.com>\n**License:** MIT\n**中文文档:** [README.zh-CN.md](README.zh-CN.md)\n\n![html-ppt — cover with live previews](docs\u002Freadme\u002Fhero.gif)\n\n> One command installs **36 themes × 20 canvas FX × 31 layouts × 15 full decks + presenter mode**. Every preview above is a live iframe of a real template file rendering inside the deck — no screenshots, no mock-ups.\n\n## 🎤 Presenter Mode (new!)\n\nPress `S` on any deck to pop open a dedicated presenter window with four\ndraggable, resizable **magnetic cards**: current slide, next slide preview,\nspeaker script (逐字稿), and timer. Two windows stay in sync via\n`BroadcastChannel`.\n\n![Presenter mode with 4 magnetic cards](docs\u002Freadme\u002Fpresenter-mode.png)\n\n**Why previews are pixel-perfect:** each card is an `\u003Ciframe>` that loads the\nsame deck HTML with a `?preview=N` query param. The runtime detects this and\nrenders only slide N with no chrome — so the preview uses the **same CSS,\ntheme, fonts and viewport** as the audience view. Colors and layout are\nguaranteed identical.\n\n**Smooth (no-reload) navigation:** on slide change, the presenter window\nsends `postMessage({type:'preview-goto', idx:N})` to each iframe. The iframe\njust toggles `.is-active` between slides — **no reload, no flicker**.\n\n**Speaker script rules (3 golden):**\n1. **Prompt signals, not lines to read** — bold the keywords, separate\n   transition sentences into their own paragraphs\n2. **150–300 words per slide** — that's the ~2–3 min\u002Fpage pace\n3. **Write it like you speak** — conversational, not written prose\n\nSee [`references\u002Fpresenter-mode.md`](references\u002Fpresenter-mode.md) for the\nfull authoring guide, or copy the ready-made template at\n`templates\u002Ffull-decks\u002Fpresenter-mode-reveal\u002F` which ships with full 150-300\nword speaker scripts on every slide.\n\n## Install (one command)\n\n```bash\nnpx skills add https:\u002F\u002Fgithub.com\u002Flewislulu\u002Fhtml-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| 🎤 **Presenter mode** | **NEW** | `S` key \u002F `?preview=N` |\n| 🎨 **Themes** | **36** | `assets\u002Fthemes\u002F*.css` |\n| 📑 **Full-deck templates** | **15** | `templates\u002Ffull-decks\u002F\u003Cname>\u002F` |\n| 🧩 **Single-page layouts** | **31** | `templates\u002Fsingle-page\u002F*.html` |\n| ✨ **CSS animations** | **27** | `assets\u002Fanimations\u002Fanimations.css` |\n| 💥 **Canvas FX animations** | **20** | `assets\u002Fanimations\u002Ffx\u002F*.js` |\n| 🖼️ **Showcase decks** | 4 | `templates\u002F*-showcase.html` |\n| 📸 **Verification screenshots** | 56 | `scripts\u002Fverify-output\u002F` |\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\u002Freadme\u002Fthemes.png)\n\nEach is a pure CSS-tokens file — swap one `\u003Clink>` to reskin the entire deck.\nBrowse them all in `templates\u002Ftheme-showcase.html` (each slide rendered in an\nisolated iframe so theme ≠ theme is visually guaranteed).\n\n![14 full-deck templates](docs\u002Freadme\u002Ftemplates.png)\n\n### 15 Full-deck templates\n\nEight extracted from real-world decks, seven generic scenario scaffolds:\n\n**Extracted looks**\n- `xhs-white-editorial` — 小红书白底杂志风\n- `graphify-dark-graph` — 暗底 + 力导向知识图谱\n- `knowledge-arch-blueprint` — 蓝图 \u002F 架构图风\n- `hermes-cyber-terminal` — 终端 cyberpunk\n- `obsidian-claude-gradient` — 紫色渐变卡\n- `testing-safety-alert` — 红 \u002F 琥珀警示风\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  **`presenter-mode-reveal`** 🎤 — complete talk template with full 150-300\n  word speaker scripts on every slide, designed around the `S` key presenter mode\n\nEach is a self-contained folder with scoped `.tpl-\u003Cname>` CSS so multiple\ndecks can be previewed side-by-side without collisions. Browse the full\ngallery in `templates\u002Ffull-decks-index.html`.\n\n![31 single-page layouts](docs\u002Freadme\u002Flayouts.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\u002Freadme\u002Flayouts-live.gif)\n\n*The big iframe is loading `templates\u002Fsingle-page\u002F\u003Cname>.html` directly and cycling through all 31 layouts every 2.8 seconds.*\n\n![47 animations — 27 CSS + 20 canvas FX](docs\u002Freadme\u002Fanimations.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.\u002Fscripts\u002Fnew-deck.sh my-talk\n\n# Browse everything\nopen templates\u002Ftheme-showcase.html         # all 36 themes (iframe-isolated)\nopen templates\u002Flayout-showcase.html        # all 31 layouts\nopen templates\u002Fanimation-showcase.html     # all 47 animations\nopen templates\u002Ffull-decks-index.html       # all 14 full decks\n\n# Render any template to PNG via headless Chrome\n.\u002Fscripts\u002Frender.sh templates\u002Ftheme-showcase.html\n.\u002Fscripts\u002Frender.sh examples\u002Fmy-talk\u002Findex.html 12\n```\n\n## Keyboard cheat sheet\n\n```\n← → Space PgUp PgDn Home End   navigate\nF                               fullscreen\nS                               open presenter window (magnetic cards)\nN                               quick notes drawer (bottom)\nR                               reset timer (in presenter window)\nO                               slide overview grid\nT                               cycle themes (syncs to presenter)\nA                               cycle a demo animation on current slide\n#\u002FN (URL)                       deep-link to slide N\n?preview=N (URL)                preview-only mode (single slide, no chrome)\n```\n\n## Project structure\n\n```\nhtml-ppt-skill\u002F\n├── SKILL.md                      agent-facing dispatcher\n├── README.md                     this file\n├── references\u002F                   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\u002F\n│   ├── base.css                  shared tokens + primitives\n│   ├── fonts.css                 webfont imports\n│   ├── runtime.js                keyboard + presenter + overview\n│   ├── themes\u002F*.css              36 theme token files\n│   └── animations\u002F\n│       ├── animations.css        27 named CSS animations\n│       ├── fx-runtime.js         auto-init [data-fx] on slide enter\n│       └── fx\u002F*.js               20 canvas FX modules\n├── templates\u002F\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\u002F\u003Cname>\u002F        14 scoped multi-slide decks\n│   └── single-page\u002F*.html        31 layout files with demo data\n├── scripts\u002F\n│   ├── new-deck.sh               scaffold\n│   ├── render.sh                 headless Chrome → PNG\n│   └── verify-output\u002F            56 self-test screenshots\n└── examples\u002Fdemo-deck\u002F           complete working deck\n```\n\n## Philosophy\n\n- **Token-driven design system.** All color, radius, shadow, font decisions\n  live in `assets\u002Fbase.css` + the current theme file. Change one variable,\n  the whole deck reflows tastefully.\n- **Iframe isolation for previews.** Theme \u002F layout \u002F full-deck showcases all\n  use `\u003Ciframe>` per slide so each preview is a real, independent render.\n- **Zero build.** Pure static HTML\u002FCSS\u002FJS. CDN only for webfonts, highlight.js\n  and chart.js (optional).\n- **Senior-designer defaults.** Opinionated type scale, spacing rhythm,\n  gradients and card treatments — no \"Corporate PowerPoint 2006\" vibes.\n- **Chinese + English first-class.** Noto Sans SC \u002F Noto Serif SC pre-imported.\n\n## License\n\nMIT © 2026 lewis <sudolewis@gmail.com>.\n","html-ppt 是一个用于创建专业 HTML 演示文稿的工具，提供 36 种主题、15 套全页模板、31 种页面布局以及 47 种动画效果。其核心功能包括丰富的主题和布局选择、多种 CSS 和 Canvas 动画效果，以及独特的演示者模式，支持像素级预览、逐字稿显示及计时器等功能。该工具适用于需要制作高质量演示文稿的各种场景，如技术分享、商业提案或在线课程等。所有内容均为纯静态 HTML\u002FCSS\u002FJS 构建，无需额外编译步骤，易于安装与使用。",2,"2026-06-11 02:38:21","CREATED_QUERY"]