# Task: Build `html-ppt` AgentSkill
You are a world-class PPT/presentation designer. Build an AgentSkill named **`html-ppt`** (a.k.a. "HTML PPT Studio") that lets an agent produce professional HTML presentations in many styles, layouts, and animations — all driven by templates.
## Deliverables
A single skill directory at the current repo root (`~/clawspace/html-ppt-skill`), structured per the AgentSkills spec (consult the `skill-creator` skill at `~/Library/pnpm/global/5/.pnpm/openclaw@2026.4.1_@napi-rs+canvas@0.1.97/node_modules/openclaw/skills/skill-creator/SKILL.md` FIRST and follow it).
Must produce:
```
html-ppt/
SKILL.md # concise dispatcher + usage rules
references/
themes.md # every theme catalog + when to use
layouts.md # every page-layout catalog
animations.md # every animation catalog with names
authoring-guide.md # how the agent authors a new deck
assets/
themes/ # one CSS file per theme (see list below)
layouts/ # one HTML partial per layout type
animations/ # CSS/JS snippets per animation
fonts.css # shared webfont imports
base.css # reset + shared tokens
runtime.js # keyboard nav, presenter mode, theme switcher
templates/
deck.html # main multi-slide deck template (reveal-like, keyboard nav)
theme-showcase.html # single deck that demos EVERY theme (slide per theme)
animation-showcase.html # single deck that demos EVERY animation (named)
layout-showcase.html # single deck that demos EVERY layout type
single-page/ # one-slide templates per layout, with demo data
cover.html
toc.html
section-divider.html
bullets.html
two-column.html
three-column.html
big-quote.html
stat-highlight.html
kpi-grid.html
table.html
code.html
diff.html
terminal.html
flow-diagram.html
timeline.html
roadmap.html
mindmap.html
comparison.html
pros-cons.html
todo-checklist.html
gantt.html
image-hero.html
image-grid.html
chart-bar.html
chart-line.html
chart-pie.html
chart-radar.html
arch-diagram.html
process-steps.html
cta.html
thanks.html
scripts/
render.sh # headless chrome render a template to PNGs (uses /Applications/Google Chrome.app)
new-deck.sh # scaffold new deck from templates/deck.html
examples/
demo-deck/ # a complete working deck using several layouts + a chosen theme
README.md # repo-level overview (separate from SKILL.md)
LICENSE # MIT, author: lewis
```
## Requirement detail
### 1. Themes (give each a clear name + description)
Cover AT LEAST these, each a separate CSS file in `assets/themes/`:
- `minimal-white` — 极简白，克制高级
- `editorial-serif` — 杂志风衬线，高级
- `soft-pastel` — 柔和马卡龙
- `sharp-mono` — 锐利黑白高对比
- `arctic-cool` — 冷色调（蓝/青/石板灰）
- `sunset-warm` — 暖色调（橘/珊瑚/琥珀）
- `catppuccin-latte` — catppuccin 浅
- `catppuccin-mocha` — catppuccin 深
- `dracula` — dracula 深色
- `tokyo-night`
- `nord`
- `solarized-light`
- `gruvbox-dark`
- `rose-pine`
- `neo-brutalism` — 厚描边、硬阴影、明黄
- `glassmorphism` — 毛玻璃
- `bauhaus` — 几何+原色
- `swiss-grid` — 瑞士网格、Helvetica 感
- `terminal-green` — 绿屏终端
- `xiaohongshu-white` — 小红书白底高级感
- `rainbow-gradient` — 彩虹渐变点缀（白底）
- `aurora` — 极光渐变
- `blueprint` — 蓝图工程
- `memphis-pop` — 孟菲斯波普
Each theme defines CSS custom properties (color tokens, fonts, radii, shadows, accent gradients) consumed by `base.css` and every layout. Switching themes = swap one `` or one `data-theme` attribute.
### 2. Layouts / page types
Must cover: cover, table of contents, section divider, bullets, two-column, three-column, big quote, stat highlight, KPI grid, table (data), code block (syntax-highlighted, use highlight.js via CDN), diff view, terminal/console, flowchart, timeline, roadmap, mindmap, comparison, pros/cons, TODO checklist, gantt, image hero, image grid, chart (bar/line/pie/radar — use chart.js via CDN), architecture diagram, process steps, CTA, thanks. One file per layout in `templates/single-page/` with realistic demo data so it's usable standalone.
Extract typography/spacing/alignment patterns from the existing decks at `/Volumes/luluDrive/作品素材/视频/**/*.html` (especially `20260409-升级版知识库/presentation.html`, `20260413-graphify/ppt/graphify.html`, `20260414-hermes-agent/ppt/*.html`, and the 小红书图文 folders). Do NOT copy content; extract typographic rhythm, spacing, gradient treatments, card patterns, footer patterns.
### 3. Animations (each named, listed in `references/animations.md`)
Provide CSS + (where needed) minimal JS (no heavy deps). Each animation should be applied by adding a class like `data-anim="rise-in"` or `class="anim-rise-in"`. At least:
- `fade-up`, `fade-down`, `fade-left`, `fade-right`
- `rise-in`, `drop-in`, `zoom-pop`, `blur-in`, `glitch-in`
- `typewriter`
- `neon-glow`, `shimmer-sweep`, `gradient-flow`
- `stagger-list` (children appear one by one)
- `counter-up` (numbers tick up)
- `path-draw` (SVG line draw)
- `parallax-tilt` (3D on hover/enter)
- `card-flip-3d`
- `cube-rotate-3d`
- `page-turn-3d`
- `perspective-zoom`
- `marquee-scroll`
- `kenburns`
- `confetti-burst` (on slide enter)
- `spotlight` (radial reveal)
- `morph-shape` (SVG morph)
- `ripple-reveal`
Give each a one-line description + recommended use case.
### 4. Runtime
`assets/runtime.js` must support:
- ← → / space / PgUp PgDn / Home End navigation
- `F` fullscreen, `S` speaker notes overlay, `O` slide overview grid
- `T` cycle themes (reads all theme CSS file names from a data attr)
- `A` cycle a demo animation on current slide
- URL hash `#/3` deep-link to slide 3
- Progress bar
- Works with zero build — pure static HTML/CSS/JS, CDN deps OK
### 5. Showcase decks
- `templates/theme-showcase.html` — one deck, one slide per theme, switchable via `T`. Each slide shows the theme name + a sample layout using that theme so user can eyeball it.
- `templates/animation-showcase.html` — one slide per animation, each auto-plays on enter, with the animation name and description visible.
- `templates/layout-showcase.html` — one slide per layout type with filled demo data.
### 6. Demo data
Everything should render with built-in demo data (fake KPIs, sample code, sample chart data, sample flow) so the user can open any template and immediately see it working.
### 7. SKILL.md rules
- Frontmatter: `name: html-ppt`, strong `description` with trigger keywords (presentation, PPT, slides, keynote, deck, 演讲稿, 幻灯片, reveal, html presentation, 小红书图文).
- Short body: when to use, how to start (`scripts/new-deck.sh `), how to pick a theme, how to pick layouts, how to add animations, how to render to PNG (`scripts/render.sh `).
- Link into `references/*.md` for detail; keep SKILL.md under ~200 lines.
### 8. render.sh
Use headless Chrome:
```
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless=new --disable-gpu --hide-scrollbars --window-size=1920,1080 --screenshot=out.png "file://$PWD/$1"
```
Support multi-slide capture by navigating `#/N` or by extracting each `.slide` region.
### 9. Author & License
`LICENSE` = MIT, Copyright (c) 2026 lewis . `README.md` header shows author lewis .
## Process
1. FIRST read `~/Library/pnpm/global/5/.pnpm/openclaw@2026.4.1_@napi-rs+canvas@0.1.97/node_modules/openclaw/skills/skill-creator/SKILL.md` and follow its conventions.
2. Survey the source decks under `/Volumes/luluDrive/作品素材/视频/` (read-only, just for inspiration). Take notes on typography, spacing, card styles.
3. Build the skill directory described above. Prefer small, composable CSS token files. Keep each theme CSS short (< 200 lines) — just token overrides.
4. Make sure every template renders correctly in Chrome (you can test with `scripts/render.sh` on a few samples).
5. Write a concise SKILL.md + rich references/*.md.
6. Init git (already initialized in this dir), commit everything as author `lewis `, with a good message.
7. DO NOT push or create the GitHub repo — the user's orchestrator will handle that.
## Constraints
- Pure static HTML/CSS/JS. CDN deps allowed: highlight.js, chart.js, a webfont loader. No build step.
- Target browser: Chrome / Chromium 120+.
- Chinese + English content both supported (import Noto Sans SC).
- Keep each file focused; avoid giant monoliths.
- Be opinionated and tasteful. You're a senior designer.
When COMPLETELY finished, run:
```
openclaw system event --text "Done: html-ppt skill built — $(ls templates/single-page | wc -l | tr -d ' ') layouts, $(ls assets/themes | wc -l | tr -d ' ') themes" --mode now
```