--- name: baoyu-slides description: Research, outline, and generate professional slide decks for Bo Wang. Powered by html-ppt-skill (36 themes, 31 layouts, 20 canvas FX, 14 full-deck templates). Covers deep research, structured slide planning with speaker notes, and multi-format output (HTML-native → self-contained shareable deck with PNG export, Google Slides → editable). Use when Bo asks to "create slides", "build a deck", "make a presentation", "prepare a talk", or shares a topic + audience context. --- # baoyu-slides — Slide Generation Skill Research-first. Think like Claude, design like a web engineer. ## Mental model (read this first) A presentation is NOT a file. It is a **state machine**: ``` container + slides[] + index (current position) + controls (buttons/keyboard/URL) + motion (how transitions feel) ``` Animation is just the surface layer. The real foundation is **state switching**. Don't think "jQuery slideshow". Think `transform`, `transition`, `scroll-snap`, `History API`, `View Transition API`. The goal: turn a one-time file into a reusable, linkable, version-controlled content asset. --- ## Rendering engine **html-ppt-skill** is installed at `~/.openclaw/workspace/skills/html-ppt-skill/`. It provides 36 themes, 31 layouts, 27 CSS animations, 20 canvas FX, and 14 full-deck templates. Use it as the output engine — never build slides from scratch. ## Bo's Voice Files (read before writing any content) - `~/.openclaw/workspace/bo-about-me.md` - `~/.openclaw/workspace/bo-anti-ai-writing-style.md` --- ## Bo's Context (inject into every deck) - **Name:** Bo Wang (@bowang87) - **Role:** Co-creator of scGPT (Nature Methods 2024), researcher at Xaira Therapeutics - **Focus:** Computational biology, AI for drug discovery, virtual cells, single-cell genomics - **Speaking style:** Evidence-based, direct, technically deep but accessible - **Typical venues:** Scientific conferences, university seminars, industry/investor talks, Xaira internal - **Design taste:** Clean, modern, data-forward — no clipart, no WordArt, no gratuitous transitions --- ## Workflow: 5 Phases ### Phase 1 — Clarify (always first, don't skip) Ask Bo these before doing anything: ``` 1. What's the topic / working title? 2. Who's the audience? (scientists, investors, general public, internal team) 3. What's the ONE thing you want them to remember? 4. How many slides? (default: 15–20 for a 30-min talk, 8–10 for a short talk) 5. Any specific papers, figures, or results to include? 6. Any slides already drafted / existing deck to build on? 7. Output format: HTML-native (default, powered by html-ppt-skill) / Google Slides (editable)? ``` If Bo gave you enough context already, skip to Phase 2. **Audience → theme quick-pick** (from html-ppt-skill's 36 themes): | Audience | Recommended themes | |---|---| | Scientific conference / seminar | `academic-paper`, `minimal-white`, `editorial-serif` | | University / academic talk | `academic-paper`, `tokyo-night`, `engineering-whiteprint` | | Investor / VC pitch | `pitch-deck-vc`, `corporate-clean`, `swiss-grid` | | Xaira internal / team | `tokyo-night`, `catppuccin-mocha`, `minimal-white` | | Tech conference / NeurIPS / ICLR | `tokyo-night`, `dracula`, `obsidian-claude-gradient` feel | | General public / science communication | `glassmorphism`, `aurora`, `soft-pastel` | | XHS / social media post | `xiaohongshu-white`, `xhs-pastel-card` template | **Full-deck template quick-pick** (from html-ppt-skill's 14 templates): | Scenario | Template | |---|---| | Scientific / research talk | `tech-sharing` (GitHub-dark, mono, terminal blocks) | | Investor / fundraising | `pitch-deck` (white + blue→purple, traction chart) | | Product / platform launch | `product-launch` (dark hero + feature cards) | | Architecture / system design | `knowledge-arch-blueprint` (cream paper, blueprint grid) | | XHS image-text post | `xhs-post` (3:4 @ 810×1080, pastel) | | Internal weekly/status | `weekly-report` (KPI grid, bar chart) | | Keynote / one-idea-per-slide | `dir-key-nav-minimal` (8-color, maximalist whitespace) | **Format selection guide:** | Format | Use when | |---|---| | **HTML-native via html-ppt-skill** (default) | Full control, shareable file, animations, PNG export | | **Google Slides** | Collaborative editing, hand-off to colleagues | ### Phase 2 — Research Run: `python3 ~/.openclaw/workspace/skills/baoyu-slides/scripts/research.py --topic "" --brief ` The script: 1. Fetches 5+ web sources (key papers, recent news, competitor landscape, data points) 2. Searches arXiv for relevant preprints 3. Checks Bo's own published papers for relevant results 4. Identifies 3–5 key claims Bo can make with authority 5. Flags gaps where data is thin or sources conflict 6. Saves `research-brief.md` with source URLs, key stats, and themes For topics in Bo's domain, also pull from: - CellxGene statistics (current cell counts, tissue coverage) - scGPT paper (Nature Methods 2024) key results - Xaira's public positioning ### Phase 3 — Outline Run: `python3 ~/.openclaw/workspace/skills/baoyu-slides/scripts/outline.py --brief --slides --audience --goal "" --out ` Each slide entry: ```yaml slide: 3 title: "The Perturbation Problem" type: content # title | content | data | comparison | quote | image | transition bullets: - "Current models predict within-distribution perturbations well" - "Combinatorial and novel context generalization fails (Roohani et al. 2023)" - "Root cause: correlation not causation" data_point: "GEARS achieves 0.81 R² on seen gene pairs, drops to 0.47 on unseen" visual: "Scatter plot showing predicted vs actual expression for seen/unseen perturbations" image_prompt: "Scientific visualization: two scatter plots side by side, left (blue, tight correlation) labeled 'Seen perturbations' and right (red, diffuse) labeled 'Unseen perturbations'. Clean white background, academic style." speaker_notes: | "The core challenge in perturbation biology. Models like GEARS (Roohani 2023) show strong performance within their training distribution — but drop sharply on novel gene combinations. This is the retrieval vs. reasoning distinction. We're measuring the wrong thing when we benchmark on held-out genes from the same distribution. The real test is a genuinely novel cellular context." fragments: [] # list of element descriptions that should appear one-by-one on this slide ``` Slide types: - `title` — opening slide, title + subtitle + author affiliation - `content` — 3–4 bullets with one data point - `data` — figure/chart-forward slide, minimal text - `comparison` — two-column before/after or A vs B - `quote` — pull quote from paper or key figure - `transition` — section divider, bold single statement - `image` — full-bleed visual with caption **Slide arc (standard scientific talk):** 1. Title + Author 2. The Problem / Motivation (why this matters) 3. Current State / Prior Work (what exists) 4. Key Insight / Our Approach (the thesis) 5–N. Technical Content (methods, architecture, results) N-2. Results / Validation N-1. Applications / Impact N. Future Work + Conclusion ### Phase 4 — Theme Selection **Pick a theme from html-ppt-skill's catalog — don't hand-roll CSS.** 1. Use the audience → theme table from Phase 1 to narrow to 2–3 candidates. 2. Confirm with Bo or make a confident recommendation. 3. Lock it in by name (e.g. `academic-paper`). All CSS variables are handled by the theme file — no custom `:root` overrides needed. Full theme catalog: `~/.openclaw/workspace/skills/html-ppt-skill/references/themes.md` For FX/animation choices, reference: `~/.openclaw/workspace/skills/html-ppt-skill/references/animations.md` Relevant canvas FX for scientific talks: - `knowledge-graph` — force-directed graph (great for GRN / cell interaction slides) - `neural-net` — pulsing network (AI/model architecture slides) - `data-stream` — flowing data particles - `starfield` — ambient depth for dark-theme covers - `counter-explosion` — big number reveals (results slides) ### Phase 5 — Generate **Always use html-ppt-skill as the rendering engine.** Never build slides from scratch. Skill root: `~/.openclaw/workspace/skills/html-ppt-skill/` #### Option A: HTML-native via html-ppt-skill (default) **Step 1 — Scaffold** ```bash cd ~/.openclaw/workspace/skills/html-ppt-skill ./scripts/new-deck.sh # Creates: examples//index.html (a clean 6-slide starter) ``` **Step 2 — Apply theme** Edit the `` in the scaffolded deck: ```html ``` To allow Bo to cycle themes live, add `data-themes` to ``: ```html ``` **Step 3 — Choose a full-deck template (if applicable)** If a scenario template matches, copy it as the starting point instead of the blank scaffold: ```bash cp -r templates/full-decks/tech-sharing/ examples// ``` Full-deck catalog: `~/.openclaw/workspace/skills/html-ppt-skill/references/full-decks.md` **Step 4 — Fill slides using layout templates** For each slide in the outline, find the best-matching layout from `templates/single-page/`: ```bash ls templates/single-page/ # 31 layouts with realistic demo data ``` Copy the relevant `
` block into the deck and replace demo content with real content. Layout catalog: `~/.openclaw/workspace/skills/html-ppt-skill/references/layouts.md` Key layouts for scientific talks: - `hero-statement.html` — title / section divider - `two-col-text.html` — method vs result, before/after - `kpi-grid.html` — key numbers/metrics (AUROC, R², benchmarks) - `code-block.html` — model architecture, pseudocode - `timeline.html` — training stages, project milestones - `comparison-table.html` — model comparison (scGPT vs Geneformer vs UCE) - `quote-pullout.html` — key insight from a paper - `full-image.html` — UMAP, attention heatmap, scatter plot **Step 5 — Add animations (optional)** CSS entry animations via `data-anim` attribute: ```html
  • ``` Canvas FX via `data-fx` (include `fx-runtime.js`): ```html
    ``` Animation catalog: `~/.openclaw/workspace/skills/html-ppt-skill/references/animations.md` **Step 6 — Add speaker notes** ```html
    Speaker note: explain the perturbation generalization gap here. Mention Roohani 2023 GEARS results as concrete evidence.
    ``` Press `S` to open the notes overlay during presentation. **Step 7 — Export to PNG (for sharing as images)** ```bash cd ~/.openclaw/workspace/skills/html-ppt-skill ./scripts/render.sh examples//index.html # Outputs: examples//slides/slide-01.png … slide-N.png ``` Output deck: `~/.openclaw/workspace/presentations//index.html` Exported PNGs: `~/.openclaw/workspace/presentations//slides/` #### Keyboard cheat sheet (built-in, no setup needed) ``` ← → Space navigate slides F fullscreen S speaker notes overlay O slide overview grid T cycle themes (requires data-themes on body) A cycle demo animation on current slide #/N in URL deep-link to slide N ``` #### Option B: Google Slides (editable/collaborative) - Creates Google Slides deck via gws slides API - Populates each slide: title, body content, speaker notes - Applies clean theme (navy + white) - Returns a shareable Google Slides URL --- ## Image workflow (for slides with visuals) AI is a visual research assistant first, not just an image generator. Run this pipeline per slide: **Step 1 — Visual directions:** ``` Based on this article / slide content, don't generate an image yet. First help me think about what this slide should visually express. 1. Distill the most core expression goal of this page. 2. Give 3–5 different visual metaphor directions. 3. Each direction should say: what it's good for, what it's not good for, what misreadings it might cause. 4. Tell me which direction is most suitable for a cover, and which is more suitable for body content. 5. Output like a creative director running a pre-project visual direction meeting, not a keyword list. ``` **Step 2 — Image search pack:** ``` Based on the selected visual direction, generate a complete image search pack in one shot. - Primary English keywords - Alternative keywords - Words to avoid - Image direction - Aspect ratio - Whether license-free photos work or generated images are needed Output in a format where I can directly paste into a stock site search box. ``` **Step 3 — Final image prompt (if generating):** ``` Translate my selected visual direction into a final output prompt for an image model. Requirements: 1. First describe the theme and main subject clearly. 2. Then describe composition, colors, materials, mood. 3. Clearly state what should NOT appear. 4. If this is a cover image, leave a title text area. 5. Output bilingual prompt (Chinese and English). 6. Style should look like a design criticism magazine cover, not AI tool promotion. ``` --- ## Usage examples ``` # Quick deck "build me a 10-slide deck on virtual cells for a Stanford audience" # Full seminar "I'm giving a 30-min talk at NeurIPS on scGPT — build the slides, include our Nature Methods results and compare to Geneformer" # HTML-native with design system "make me a product-launch-style deck for Xaira's virtual cell platform, clean and modern, HTML format" # Revise existing "revise my Stanford_talk.pptx to be more professional — don't add new claims" ``` --- ## Config Set in `~/.baoyu-skills/baoyu-slides/config.json`: ```json { "default_format": "html-native", "default_theme": "scientific-dark", "bo_affiliation": "Xaira Therapeutics & University of Toronto" } ``` ## Output files All saved to: `~/.openclaw/workspace/presentations//` - `00-clarify.md` — answered context questions - `01-research-brief.md` — sourced research with URLs - `02-slide-outline.yaml` — slide-by-slide plan - `03-theme-selection.md` — chosen theme + rationale - `index.html` — final deck (uses html-ppt-skill assets via relative paths) - `slides/` — PNG exports from render.sh (if requested) - `images/` — any generated or sourced slide images