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/FIX-BRIEF.md

9.5 KiB
Raw Blame History

Fix Brief · html-ppt v2

User feedback: current skill is weak. Fix these four problems HARD. Do not hand-wave.

Skill lives at ~/clawspace/html-ppt-skill. Git is already initialized, SKILL.md + assets already exist. This is an iteration, keep what works, replace what's weak.

Problem 1 — Theme showcase shows identical pages

Root cause: templates/theme-showcase.html builds 24 slides but they all inherit one <link id="theme-link">. When you arrow-through, every slide looks the same.

Fix: Each slide in theme-showcase must render its own theme in isolation. Do this with an <iframe srcdoc> per slide, where the iframe loads assets/base.css + the specific theme CSS + a small demo content block. That way slide N = theme N, guaranteed visually different. Rebuild the showcase so pressing → actually shows a new look each time. Do the same for any other "all themes in one deck" pattern.

Verify with headless chrome: render slide 1, slide 5, slide 12, slide 20 to PNG and confirm they look different.

Problem 2 — Did not absorb user's existing deck styles

REQUIRED: deeply survey these decks, extract 6–10 distinct "full deck looks" and turn each into a named full-deck template under templates/full-decks/<name>/index.html with scoped CSS + demo content:

Sources (read-only, DO NOT copy content, extract style):

  • /Volumes/luluDrive/作品素材/视频/20260405-Karpathy-知识库/20260405 演示幻灯片【方向键版】.html
  • /Volumes/luluDrive/作品素材/视频/20260405-Karpathy-知识库/20260405 架构图v2.html
  • /Volumes/luluDrive/作品素材/视频/20260406-obsidian-claude/slides.html
  • /Volumes/luluDrive/作品素材/视频/20260409-升级版知识库/presentation.html
  • /Volumes/luluDrive/作品素材/视频/20260409-升级版知识库/小红书图文/v2-白底版/html源文件/slide_01_cover.html (+ others in same dir)
  • /Volumes/luluDrive/作品素材/视频/20260412-AI测试与安全/html/xhs-ai-testing-safety-v2.html
  • /Volumes/luluDrive/作品素材/视频/20260412-obsidian-skills/html/xhs-obsidian-skills.html
  • /Volumes/luluDrive/作品素材/视频/20260413-graphify/ppt/graphify.html
  • /Volumes/luluDrive/作品素材/视频/20260413-graphify/小红书图文/*.html
  • /Volumes/luluDrive/作品素材/视频/20260414-hermes-agent/ppt/hermes-vs-openclaw.html
  • /Volumes/luluDrive/作品素材/视频/20260414-hermes-agent/ppt/hermes-record.html
  • /Volumes/luluDrive/作品素材/视频/20260414-hermes-agent/小红书图文/*.html

For each, extract: background treatment, gradient usage, font pairing, card style, accent color, hero typography scale, footer pattern. Turn the strongest 8+ into full-deck templates, each a complete multi-slide deck with cover / section / content / code / chart / CTA / thanks. Give each a distinctive name and register it in references/full-decks.md. Suggested names (rename as you see fit after surveying):

  • xhs-white-editorial — 小红书白底杂志风 (from 20260409 v2-白底版 + 20260412 xhs)
  • graphify-dark-graph — 暗底 + 力导向知识图谱 (from 20260413 graphify)
  • knowledge-arch-blueprint — 蓝图/架构图风 (from Karpathy 架构图v2)
  • hermes-cyber-terminal — 终端/cyber (from hermes-record + hermes-vs-openclaw)
  • obsidian-claude-gradient — 紫色渐变卡 (from 20260406)
  • testing-safety-alert — 红/琥珀警示风 (from 20260412-AI测试与安全)
  • xhs-pastel-card — 柔和马卡龙图文 (from several xhs decks)
  • dir-key-nav-minimal — 方向键极简 (from Karpathy 方向键版)

Each full-deck template must be a SELF-CONTAINED folder under templates/full-decks/<name>/ with index.html, style.css (scoped with .tpl-<name> prefix so two templates don't collide), optional script.js, and a README snippet describing the look.

Problem 3 — Animations are too thin, all single-element

Current animations are mostly one-element CSS transitions. User wants multi-element, particle, explosion, knowledge-graph energy. Add a new layer:

Create assets/animations/fx/ with each effect as a self-contained JS module (each has a init(el, opts) function). Each effect must work by adding data-fx="<name>" to a container. Runtime auto-inits on slide enter.

Mandatory effect set (all must be implemented, not stubs):

  • particle-burst — canvas particles exploding from a point
  • confetti-cannon — multi-directional confetti (colored rects + rotation)
  • firework — rocket + explosion particles, loops
  • starfield — scrolling starfield background
  • matrix-rain — Matrix-style falling chars
  • knowledge-graph — canvas force-directed graph (20-40 nodes, labeled edges, animated physics)
  • neural-net — feedforward network with pulse signals traveling along edges
  • constellation — points connected by lines when close (classic particles.js vibe)
  • orbit-ring — concentric orbital dots, each at different speed
  • galaxy-swirl — spiral particle galaxy
  • word-cascade — words from a list rain down + pile up
  • letter-explode — heading letters fly in from random directions
  • chain-react — row of cards trigger each other domino-style
  • magnetic-field — particles following an invisible magnetic curve
  • data-stream — rows of scrolling numeric/hex data (cyber feel)
  • gradient-blob — big blurred blobs morphing with SVG feTurbulence
  • sparkle-trail — cursor trail of sparkles (slide-scoped)
  • shockwave — expanding ring on slide enter
  • typewriter-multi — multi-line typewriter with blinking cursors
  • counter-explosion — stat counter that then bursts particles when it finishes

Plus keep the existing CSS anim set. Document each in references/animations.md with name + use case + how to enable (data-fx="...").

Create templates/animation-showcase.html v2: one slide per effect (CSS + FX), each clearly labeled, auto-plays on enter, with a replay button.

Problem 4 — Not enough themes / templates overall

Add these additional themes (each a CSS token file + verifiable distinct look):

  • cyberpunk-neon — 黑底 + 霓虹粉/青/黄
  • y2k-chrome — Y2K 镜面 + 渐变
  • retro-tv — CRT 扫描线 + 暖黄
  • japanese-minimal — 和风留白 + 朱红
  • vaporwave — 蒸汽波粉紫
  • midcentury — 中世纪现代 (mustard/teal/cream)
  • corporate-clean — 企业 PPT 商务
  • academic-paper — 学术白皮书 (Computer Modern)
  • news-broadcast — 红白新闻图
  • pitch-deck-vc — YC 风格投资路演
  • magazine-bold — 杂志大字封面
  • engineering-whiteprint — 白底蓝线工程图

Plus: add full-deck templates (beyond the 8 extracted above) for common scenarios:

  • pitch-deck (problem → solution → market → traction → team → ask)
  • product-launch
  • tech-sharing (技术分享)
  • weekly-report
  • xhs-post (9-slide 小红书图文, 3:4)
  • course-module (教学模块)

Each in templates/full-decks/<name>/ with scoped CSS.

Integration

  • Update SKILL.md to list every theme, full-deck template, and fx animation with one-liners and trigger intent. Keep SKILL.md tight (<250 lines); long lists go in references/.
  • Update references/themes.md, references/animations.md, and add references/full-decks.md.
  • Update templates/theme-showcase.html, templates/animation-showcase.html, templates/layout-showcase.html to actually demonstrate the richer set. Theme showcase MUST use iframe isolation.
  • Add templates/full-decks-index.html — a gallery deck where each slide is a live thumbnail (iframe) of a full-deck template so user can browse them.
  • Verify with headless Chrome: render 6 representative slides from theme-showcase, 6 from animation-showcase (as PNGs under scripts/verify-output/) and confirm they look visibly different. Include this check in the final commit.

Process

  1. FIRST read the existing skill and figure out what to keep vs replace.
  2. Survey the source decks (read only a handful of bytes per file — use head/grep). Do not try to load all of them at once.
  3. Implement Problem 1 fix (iframe isolation) first and verify with headless chrome before moving on.
  4. Then Problem 3 (FX animations) — each as its own file under assets/animations/fx/<name>.js. Write a tiny fx-runtime.js that scans [data-fx] on slide enter and calls the right init.
  5. Then Problem 2 (full-deck templates extracted from videos) and Problem 4 (more themes + scenario templates).
  6. Update docs + showcases.
  7. Verify: run scripts/render.sh against the three showcases, dump PNGs, eyeball them (save to scripts/verify-output/).
  8. Commit as author lewis <sudolewis@gmail.com> with message fix: v2 — iframe theme isolation, 8 full-deck templates from source decks, 20 FX animations (particles/graph/fireworks), +12 themes.
  9. DO NOT push — orchestrator will push.

When COMPLETELY finished, run:

openclaw system event --text "Done: html-ppt v2 — $(ls templates/full-decks 2>/dev/null | wc -l | tr -d ' ') full decks, $(ls assets/themes | wc -l | tr -d ' ') themes, $(ls assets/animations/fx 2>/dev/null | wc -l | tr -d ' ') FX" --mode now

Rules

  • Be a senior designer. If something looks boring, fix it.
  • Scoped CSS per full-deck template (.tpl-<name> …) so loading many in one page doesn't conflict.
  • Pure static, CDN deps ok (chart.js, highlight.js, canvas-confetti optional but prefer hand-rolled canvas for the FX so they're learnable).
  • Chinese + English both render cleanly (Noto Sans SC / Noto Serif SC imported in assets/fonts.css).
  • Make the theme-showcase actually differ slide by slide. This is the one test I will run first.