diff --git a/BRIEF.md b/BRIEF.md deleted file mode 100644 index 207cf14..0000000 --- a/BRIEF.md +++ /dev/null @@ -1,197 +0,0 @@ -# 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 -``` diff --git a/html-ppt/LICENSE b/LICENSE similarity index 100% rename from html-ppt/LICENSE rename to LICENSE diff --git a/html-ppt/README.md b/README.md similarity index 100% rename from html-ppt/README.md rename to README.md diff --git a/html-ppt/SKILL.md b/SKILL.md similarity index 100% rename from html-ppt/SKILL.md rename to SKILL.md diff --git a/html-ppt/assets/animations/animations.css b/assets/animations/animations.css similarity index 100% rename from html-ppt/assets/animations/animations.css rename to assets/animations/animations.css diff --git a/html-ppt/assets/base.css b/assets/base.css similarity index 100% rename from html-ppt/assets/base.css rename to assets/base.css diff --git a/html-ppt/assets/fonts.css b/assets/fonts.css similarity index 100% rename from html-ppt/assets/fonts.css rename to assets/fonts.css diff --git a/html-ppt/assets/runtime.js b/assets/runtime.js similarity index 100% rename from html-ppt/assets/runtime.js rename to assets/runtime.js diff --git a/html-ppt/assets/themes/arctic-cool.css b/assets/themes/arctic-cool.css similarity index 100% rename from html-ppt/assets/themes/arctic-cool.css rename to assets/themes/arctic-cool.css diff --git a/html-ppt/assets/themes/aurora.css b/assets/themes/aurora.css similarity index 100% rename from html-ppt/assets/themes/aurora.css rename to assets/themes/aurora.css diff --git a/html-ppt/assets/themes/bauhaus.css b/assets/themes/bauhaus.css similarity index 100% rename from html-ppt/assets/themes/bauhaus.css rename to assets/themes/bauhaus.css diff --git a/html-ppt/assets/themes/blueprint.css b/assets/themes/blueprint.css similarity index 100% rename from html-ppt/assets/themes/blueprint.css rename to assets/themes/blueprint.css diff --git a/html-ppt/assets/themes/catppuccin-latte.css b/assets/themes/catppuccin-latte.css similarity index 100% rename from html-ppt/assets/themes/catppuccin-latte.css rename to assets/themes/catppuccin-latte.css diff --git a/html-ppt/assets/themes/catppuccin-mocha.css b/assets/themes/catppuccin-mocha.css similarity index 100% rename from html-ppt/assets/themes/catppuccin-mocha.css rename to assets/themes/catppuccin-mocha.css diff --git a/html-ppt/assets/themes/dracula.css b/assets/themes/dracula.css similarity index 100% rename from html-ppt/assets/themes/dracula.css rename to assets/themes/dracula.css diff --git a/html-ppt/assets/themes/editorial-serif.css b/assets/themes/editorial-serif.css similarity index 100% rename from html-ppt/assets/themes/editorial-serif.css rename to assets/themes/editorial-serif.css diff --git a/html-ppt/assets/themes/glassmorphism.css b/assets/themes/glassmorphism.css similarity index 100% rename from html-ppt/assets/themes/glassmorphism.css rename to assets/themes/glassmorphism.css diff --git a/html-ppt/assets/themes/gruvbox-dark.css b/assets/themes/gruvbox-dark.css similarity index 100% rename from html-ppt/assets/themes/gruvbox-dark.css rename to assets/themes/gruvbox-dark.css diff --git a/html-ppt/assets/themes/memphis-pop.css b/assets/themes/memphis-pop.css similarity index 100% rename from html-ppt/assets/themes/memphis-pop.css rename to assets/themes/memphis-pop.css diff --git a/html-ppt/assets/themes/minimal-white.css b/assets/themes/minimal-white.css similarity index 100% rename from html-ppt/assets/themes/minimal-white.css rename to assets/themes/minimal-white.css diff --git a/html-ppt/assets/themes/neo-brutalism.css b/assets/themes/neo-brutalism.css similarity index 100% rename from html-ppt/assets/themes/neo-brutalism.css rename to assets/themes/neo-brutalism.css diff --git a/html-ppt/assets/themes/nord.css b/assets/themes/nord.css similarity index 100% rename from html-ppt/assets/themes/nord.css rename to assets/themes/nord.css diff --git a/html-ppt/assets/themes/rainbow-gradient.css b/assets/themes/rainbow-gradient.css similarity index 100% rename from html-ppt/assets/themes/rainbow-gradient.css rename to assets/themes/rainbow-gradient.css diff --git a/html-ppt/assets/themes/rose-pine.css b/assets/themes/rose-pine.css similarity index 100% rename from html-ppt/assets/themes/rose-pine.css rename to assets/themes/rose-pine.css diff --git a/html-ppt/assets/themes/sharp-mono.css b/assets/themes/sharp-mono.css similarity index 100% rename from html-ppt/assets/themes/sharp-mono.css rename to assets/themes/sharp-mono.css diff --git a/html-ppt/assets/themes/soft-pastel.css b/assets/themes/soft-pastel.css similarity index 100% rename from html-ppt/assets/themes/soft-pastel.css rename to assets/themes/soft-pastel.css diff --git a/html-ppt/assets/themes/solarized-light.css b/assets/themes/solarized-light.css similarity index 100% rename from html-ppt/assets/themes/solarized-light.css rename to assets/themes/solarized-light.css diff --git a/html-ppt/assets/themes/sunset-warm.css b/assets/themes/sunset-warm.css similarity index 100% rename from html-ppt/assets/themes/sunset-warm.css rename to assets/themes/sunset-warm.css diff --git a/html-ppt/assets/themes/swiss-grid.css b/assets/themes/swiss-grid.css similarity index 100% rename from html-ppt/assets/themes/swiss-grid.css rename to assets/themes/swiss-grid.css diff --git a/html-ppt/assets/themes/terminal-green.css b/assets/themes/terminal-green.css similarity index 100% rename from html-ppt/assets/themes/terminal-green.css rename to assets/themes/terminal-green.css diff --git a/html-ppt/assets/themes/tokyo-night.css b/assets/themes/tokyo-night.css similarity index 100% rename from html-ppt/assets/themes/tokyo-night.css rename to assets/themes/tokyo-night.css diff --git a/html-ppt/assets/themes/xiaohongshu-white.css b/assets/themes/xiaohongshu-white.css similarity index 100% rename from html-ppt/assets/themes/xiaohongshu-white.css rename to assets/themes/xiaohongshu-white.css diff --git a/html-ppt/examples/demo-deck/index.html b/examples/demo-deck/index.html similarity index 100% rename from html-ppt/examples/demo-deck/index.html rename to examples/demo-deck/index.html diff --git a/html-ppt/references/animations.md b/references/animations.md similarity index 100% rename from html-ppt/references/animations.md rename to references/animations.md diff --git a/html-ppt/references/authoring-guide.md b/references/authoring-guide.md similarity index 100% rename from html-ppt/references/authoring-guide.md rename to references/authoring-guide.md diff --git a/html-ppt/references/layouts.md b/references/layouts.md similarity index 100% rename from html-ppt/references/layouts.md rename to references/layouts.md diff --git a/html-ppt/references/themes.md b/references/themes.md similarity index 100% rename from html-ppt/references/themes.md rename to references/themes.md diff --git a/html-ppt/scripts/new-deck.sh b/scripts/new-deck.sh similarity index 100% rename from html-ppt/scripts/new-deck.sh rename to scripts/new-deck.sh diff --git a/html-ppt/scripts/render.sh b/scripts/render.sh similarity index 100% rename from html-ppt/scripts/render.sh rename to scripts/render.sh diff --git a/html-ppt/templates/animation-showcase.html b/templates/animation-showcase.html similarity index 100% rename from html-ppt/templates/animation-showcase.html rename to templates/animation-showcase.html diff --git a/html-ppt/templates/deck.html b/templates/deck.html similarity index 100% rename from html-ppt/templates/deck.html rename to templates/deck.html diff --git a/html-ppt/templates/layout-showcase.html b/templates/layout-showcase.html similarity index 100% rename from html-ppt/templates/layout-showcase.html rename to templates/layout-showcase.html diff --git a/html-ppt/templates/single-page/arch-diagram.html b/templates/single-page/arch-diagram.html similarity index 100% rename from html-ppt/templates/single-page/arch-diagram.html rename to templates/single-page/arch-diagram.html diff --git a/html-ppt/templates/single-page/big-quote.html b/templates/single-page/big-quote.html similarity index 100% rename from html-ppt/templates/single-page/big-quote.html rename to templates/single-page/big-quote.html diff --git a/html-ppt/templates/single-page/bullets.html b/templates/single-page/bullets.html similarity index 100% rename from html-ppt/templates/single-page/bullets.html rename to templates/single-page/bullets.html diff --git a/html-ppt/templates/single-page/chart-bar.html b/templates/single-page/chart-bar.html similarity index 100% rename from html-ppt/templates/single-page/chart-bar.html rename to templates/single-page/chart-bar.html diff --git a/html-ppt/templates/single-page/chart-line.html b/templates/single-page/chart-line.html similarity index 100% rename from html-ppt/templates/single-page/chart-line.html rename to templates/single-page/chart-line.html diff --git a/html-ppt/templates/single-page/chart-pie.html b/templates/single-page/chart-pie.html similarity index 100% rename from html-ppt/templates/single-page/chart-pie.html rename to templates/single-page/chart-pie.html diff --git a/html-ppt/templates/single-page/chart-radar.html b/templates/single-page/chart-radar.html similarity index 100% rename from html-ppt/templates/single-page/chart-radar.html rename to templates/single-page/chart-radar.html diff --git a/html-ppt/templates/single-page/code.html b/templates/single-page/code.html similarity index 100% rename from html-ppt/templates/single-page/code.html rename to templates/single-page/code.html diff --git a/html-ppt/templates/single-page/comparison.html b/templates/single-page/comparison.html similarity index 100% rename from html-ppt/templates/single-page/comparison.html rename to templates/single-page/comparison.html diff --git a/html-ppt/templates/single-page/cover.html b/templates/single-page/cover.html similarity index 100% rename from html-ppt/templates/single-page/cover.html rename to templates/single-page/cover.html diff --git a/html-ppt/templates/single-page/cta.html b/templates/single-page/cta.html similarity index 100% rename from html-ppt/templates/single-page/cta.html rename to templates/single-page/cta.html diff --git a/html-ppt/templates/single-page/diff.html b/templates/single-page/diff.html similarity index 100% rename from html-ppt/templates/single-page/diff.html rename to templates/single-page/diff.html diff --git a/html-ppt/templates/single-page/flow-diagram.html b/templates/single-page/flow-diagram.html similarity index 100% rename from html-ppt/templates/single-page/flow-diagram.html rename to templates/single-page/flow-diagram.html diff --git a/html-ppt/templates/single-page/gantt.html b/templates/single-page/gantt.html similarity index 100% rename from html-ppt/templates/single-page/gantt.html rename to templates/single-page/gantt.html diff --git a/html-ppt/templates/single-page/image-grid.html b/templates/single-page/image-grid.html similarity index 100% rename from html-ppt/templates/single-page/image-grid.html rename to templates/single-page/image-grid.html diff --git a/html-ppt/templates/single-page/image-hero.html b/templates/single-page/image-hero.html similarity index 100% rename from html-ppt/templates/single-page/image-hero.html rename to templates/single-page/image-hero.html diff --git a/html-ppt/templates/single-page/kpi-grid.html b/templates/single-page/kpi-grid.html similarity index 100% rename from html-ppt/templates/single-page/kpi-grid.html rename to templates/single-page/kpi-grid.html diff --git a/html-ppt/templates/single-page/mindmap.html b/templates/single-page/mindmap.html similarity index 100% rename from html-ppt/templates/single-page/mindmap.html rename to templates/single-page/mindmap.html diff --git a/html-ppt/templates/single-page/process-steps.html b/templates/single-page/process-steps.html similarity index 100% rename from html-ppt/templates/single-page/process-steps.html rename to templates/single-page/process-steps.html diff --git a/html-ppt/templates/single-page/pros-cons.html b/templates/single-page/pros-cons.html similarity index 100% rename from html-ppt/templates/single-page/pros-cons.html rename to templates/single-page/pros-cons.html diff --git a/html-ppt/templates/single-page/roadmap.html b/templates/single-page/roadmap.html similarity index 100% rename from html-ppt/templates/single-page/roadmap.html rename to templates/single-page/roadmap.html diff --git a/html-ppt/templates/single-page/section-divider.html b/templates/single-page/section-divider.html similarity index 100% rename from html-ppt/templates/single-page/section-divider.html rename to templates/single-page/section-divider.html diff --git a/html-ppt/templates/single-page/stat-highlight.html b/templates/single-page/stat-highlight.html similarity index 100% rename from html-ppt/templates/single-page/stat-highlight.html rename to templates/single-page/stat-highlight.html diff --git a/html-ppt/templates/single-page/table.html b/templates/single-page/table.html similarity index 100% rename from html-ppt/templates/single-page/table.html rename to templates/single-page/table.html diff --git a/html-ppt/templates/single-page/terminal.html b/templates/single-page/terminal.html similarity index 100% rename from html-ppt/templates/single-page/terminal.html rename to templates/single-page/terminal.html diff --git a/html-ppt/templates/single-page/thanks.html b/templates/single-page/thanks.html similarity index 100% rename from html-ppt/templates/single-page/thanks.html rename to templates/single-page/thanks.html diff --git a/html-ppt/templates/single-page/three-column.html b/templates/single-page/three-column.html similarity index 100% rename from html-ppt/templates/single-page/three-column.html rename to templates/single-page/three-column.html diff --git a/html-ppt/templates/single-page/timeline.html b/templates/single-page/timeline.html similarity index 100% rename from html-ppt/templates/single-page/timeline.html rename to templates/single-page/timeline.html diff --git a/html-ppt/templates/single-page/toc.html b/templates/single-page/toc.html similarity index 100% rename from html-ppt/templates/single-page/toc.html rename to templates/single-page/toc.html diff --git a/html-ppt/templates/single-page/todo-checklist.html b/templates/single-page/todo-checklist.html similarity index 100% rename from html-ppt/templates/single-page/todo-checklist.html rename to templates/single-page/todo-checklist.html diff --git a/html-ppt/templates/single-page/two-column.html b/templates/single-page/two-column.html similarity index 100% rename from html-ppt/templates/single-page/two-column.html rename to templates/single-page/two-column.html diff --git a/html-ppt/templates/theme-showcase.html b/templates/theme-showcase.html similarity index 100% rename from html-ppt/templates/theme-showcase.html rename to templates/theme-showcase.html