zhens
/
htmlewislulu-html-ppt-skill
mirror of https://github.com/lewislulu/html-ppt-skill.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
htmlewislulu-html-ppt-skill/BRIEF.md

9.3 KiB
Raw Blame History

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 <sudolewis@gmail.com>

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 <link> 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 <name>), how to pick a theme, how to pick layouts, how to add animations, how to render to PNG (scripts/render.sh <file>).
  • 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 sudolewis@gmail.com. README.md header shows author lewis sudolewis@gmail.com.

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 <sudolewis@gmail.com>, 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