chore: release v1.10.0

feat: add video posting support

.claude-plugin/marketplace.json

@@ -6,7 +6,7 @@
   },
   "metadata": {
     "description": "Skills shared by Baoyu for improving daily work efficiency",
-    "version": "1.6.0"
+    "version": "1.10.0"
   },
   "plugins": [
     {
@@ -21,7 +21,8 @@
         "./skills/baoyu-article-illustrator",
         "./skills/baoyu-cover-image",
         "./skills/baoyu-slide-deck",
-        "./skills/baoyu-comic"
+        "./skills/baoyu-comic",
+        "./skills/baoyu-infographic"
       ]
     },
     {

.claude/skills/release-skills/SKILL.md

@@ -1,18 +1,32 @@
 ---
 name: release-skills
-description: Release workflow for baoyu-skills plugin. This skill should be used when the user wants to create a new release version. It analyzes changes since the last version tag, updates changelogs (EN/CN), bumps the version in marketplace.json, commits changes, and creates a version tag. Supports dry-run mode and breaking change detection.
+description: Release workflow for baoyu-skills plugin. Use when user says "release", "发布", "push", "推送", "new version", "新版本", "bump version", "更新版本", or wants to publish changes to remote. Analyzes changes since last tag, updates CHANGELOG (EN/CN), bumps marketplace.json version, commits, and creates version tag. MUST be used before any git push with uncommitted skill changes.
 ---
 
 # Release Skills
 
 Automate the release process for baoyu-skills plugin: analyze changes, update changelogs, bump version, commit, and tag.
 
+## CRITICAL: Mandatory Release Checklist
+
+**NEVER skip these steps when releasing:**
+
+1. ✅ Update `CHANGELOG.md` (English)
+2. ✅ Update `CHANGELOG.zh.md` (Chinese)
+3. ✅ Update `marketplace.json` version
+4. ✅ Update `README.md` / `README.zh.md` if needed
+5. ✅ Commit all changes together
+6. ✅ Create version tag
+
+**If user says "直接 push" or "just push" - STILL follow all steps above first!**
+
 ## When to Use
 
 Trigger this skill when user requests:
 - "release", "发布", "create release", "new version"
 - "bump version", "update version"
 - "prepare release"
+- "push to remote" (with uncommitted changes)
 
 ## Workflow
 

.gitignore

@@ -144,3 +144,4 @@ tests-data/
 # Skill extensions (user customization)
 .baoyu-skills/
 x-to-markdown/
+xhs-images/

CHANGELOG.md

@@ -2,6 +2,39 @@
 
 English | [中文](./CHANGELOG.zh.md)
 
+## 1.10.0 - 2026-01-21
+
+### Features
+- `baoyu-post-to-x`: adds video posting support—new `x-video.ts` script for posting text with video files (MP4, MOV, WebM). Supports preview mode and handles video processing timeouts.
+
+## 1.9.0 - 2026-01-20
+
+### Features
+- `baoyu-xhs-images`: adds `chalkboard` style—black chalkboard background with colorful chalk drawings for education and tutorial content.
+- `baoyu-comic`: adds `chalkboard` style—educational chalk drawings on black chalkboard for tutorials, explainers, and knowledge comics.
+
+### Improvements
+- `baoyu-article-illustrator`, `baoyu-cover-image`, `baoyu-infographic`: updates `chalkboard` style with enhanced visual guidelines.
+
+### Breaking Changes
+- `baoyu-xhs-images`: removes `tech` style (use `minimal` or `notion` for technical content).
+
+### Documentation
+- `README.md`, `README.zh.md`: adds style and layout preview galleries for xhs-images (9 styles, 6 layouts).
+
+## 1.8.0 - 2026-01-20
+
+### Features
+- `baoyu-infographic`: new skill for professional infographic generation with 20 layout types (bridge, circular-flow, comparison-table, do-dont, equation, feature-list, fishbone, funnel, grid-cards, iceberg, journey-path, layers-stack, mind-map, nested-circles, priority-quadrants, pyramid, scale-balance, timeline-horizontal, tree-hierarchy, venn) and 17 visual styles. Analyzes content, recommends layout×style combinations, and generates publication-ready infographics.
+
+### Fixes
+- `baoyu-danger-gemini-web`: improves cookie validation by verifying actual Gemini session readiness instead of just checking cookie presence.
+
+## 1.7.0 - 2026-01-19
+
+### Features
+- `baoyu-comic`: adds `shoujo` style—classic shoujo manga style with large sparkling eyes, flowers, sparkles, and soft pink/lavender palette. Best for romance, coming-of-age, friendship, and emotional drama.
+
 ## 1.6.0 - 2026-01-19
 
 ### Features

CHANGELOG.zh.md

@@ -2,6 +2,39 @@
 
 [English](./CHANGELOG.md) | 中文
 
+## 1.10.0 - 2026-01-21
+
+### 新功能
+- `baoyu-post-to-x`：新增视频发布支持——新增 `x-video.ts` 脚本，支持发布带视频的推文（MP4、MOV、WebM 格式）。支持预览模式，自动处理视频上传等待。
+
+## 1.9.0 - 2026-01-20
+
+### 新功能
+- `baoyu-xhs-images`：新增 `chalkboard`（黑板）风格——黑色黑板背景配彩色粉笔绘画，适合教育和教程内容。
+- `baoyu-comic`：新增 `chalkboard`（黑板）风格——黑色黑板上的教育粉笔画，适合教程、讲解和知识漫画。
+
+### 改进
+- `baoyu-article-illustrator`、`baoyu-cover-image`、`baoyu-infographic`：更新 `chalkboard` 风格，增强视觉指南。
+
+### 破坏性变更
+- `baoyu-xhs-images`：移除 `tech` 风格（技术内容改用 `minimal` 或 `notion` 风格）。
+
+### 文档
+- `README.md`、`README.zh.md`：新增 xhs-images 风格和布局预览图库（9 种风格、6 种布局）。
+
+## 1.8.0 - 2026-01-20
+
+### 新功能
+- `baoyu-infographic`：新增专业信息图生成技能，支持 20 种布局类型（bridge 桥接、circular-flow 循环流程、comparison-table 对比表、do-dont 正误对比、equation 公式分解、feature-list 特性列表、fishbone 鱼骨图、funnel 漏斗、grid-cards 网格卡片、iceberg 冰山、journey-path 旅程路径、layers-stack 层级堆叠、mind-map 思维导图、nested-circles 嵌套圆、priority-quadrants 优先象限、pyramid 金字塔、scale-balance 天平、timeline-horizontal 时间线、tree-hierarchy 树状层级、venn 韦恩图）和 17 种视觉风格。智能分析内容、推荐布局×风格组合，生成发布级信息图。
+
+### 修复
+- `baoyu-danger-gemini-web`：改进 cookie 验证逻辑，通过验证实际 Gemini 会话可用性而非仅检查 cookie 存在。
+
+## 1.7.0 - 2026-01-19
+
+### 新功能
+- `baoyu-comic`：新增 `shoujo`（少女漫画）风格——经典少女漫画风格，大眼睛闪亮高光、花朵星星装饰、柔和粉紫色调。适合恋爱、青春成长、友情、情感故事。
+
 ## 1.6.0 - 2026-01-19
 
 ### 新功能

CLAUDE.md

@@ -78,6 +78,16 @@ npx -y bun skills/baoyu-danger-gemini-web/scripts/main.ts --promptfiles system.m
 
 `.claude-plugin/marketplace.json` defines plugin metadata and skill paths. Version follows semver.
 
+## Release Process
+
+**IMPORTANT**: When user requests release/发布/push, ALWAYS use `/release-skills` workflow.
+
+**Never skip**:
+1. `CHANGELOG.md` + `CHANGELOG.zh.md` - Both must be updated
+2. `marketplace.json` version bump
+3. `README.md` + `README.zh.md` if applicable
+4. All files committed together before tag
+
 ## Adding New Skills
 
 **IMPORTANT**: All skills MUST use `baoyu-` prefix to avoid conflicts when users import this plugin.
@@ -231,6 +241,61 @@ Image filenames MUST include meaningful slugs for readability:
 - Handle failures gracefully with retry logic
 - Provide clear progress feedback to user
 
+## Style Maintenance (baoyu-comic)
+
+When adding, updating, or deleting styles for `baoyu-comic`, follow this workflow:
+
+### Adding a New Style
+
+1. **Create style definition**: `skills/baoyu-comic/references/styles/<style-name>.md`
+2. **Update SKILL.md**:
+   - Add style to `--style` options table
+   - Add auto-selection entry if applicable
+3. **Generate showcase image**:
+   ```bash
+   npx -y bun skills/baoyu-danger-gemini-web/scripts/main.ts \
+     --prompt "A single comic book page in <style-name> style showing [appropriate scene]. Features: [style characteristics from style definition]. 3:4 portrait aspect ratio comic page." \
+     --image screenshots/comic-styles/<style-name>.png
+   ```
+4. **Compress to WebP**:
+   ```bash
+   npx -y bun skills/baoyu-compress-image/scripts/main.ts screenshots/comic-styles/<style-name>.png
+   ```
+5. **Update both READMEs** (`README.md` and `README.zh.md`):
+   - Add style to `--style` options
+   - Add row to style description table
+   - Add image to style preview grid
+
+### Updating an Existing Style
+
+1. **Update style definition**: `skills/baoyu-comic/references/styles/<style-name>.md`
+2. **Regenerate showcase image** (if visual characteristics changed):
+   - Follow steps 3-4 from "Adding a New Style"
+3. **Update READMEs** if description changed
+
+### Deleting a Style
+
+1. **Delete style definition**: `skills/baoyu-comic/references/styles/<style-name>.md`
+2. **Delete showcase image**: `screenshots/comic-styles/<style-name>.webp`
+3. **Update SKILL.md**:
+   - Remove from `--style` options
+   - Remove auto-selection entry
+4. **Update both READMEs**:
+   - Remove from `--style` options
+   - Remove from style description table
+   - Remove from style preview grid
+
+### Style Preview Grid Format
+
+READMEs use 3-column tables for style previews:
+
+```markdown
+| | | |
+|:---:|:---:|:---:|
+| ![style1](./screenshots/comic-styles/style1.webp) | ![style2](./screenshots/comic-styles/style2.webp) | ![style3](./screenshots/comic-styles/style3.webp) |
+| style1 | style2 | style3 |
+```
+
 ## Extension Support
 
 Every SKILL.md MUST include an Extension Support section at the end:

README.md

@@ -53,7 +53,7 @@ Simply tell Claude Code:
 
 | Plugin | Description | Skills |
 |--------|-------------|--------|
-| **content-skills** | Content generation and publishing | [xhs-images](#baoyu-xhs-images), [cover-image](#baoyu-cover-image), [slide-deck](#baoyu-slide-deck), [comic](#baoyu-comic), [article-illustrator](#baoyu-article-illustrator), [post-to-x](#baoyu-post-to-x), [post-to-wechat](#baoyu-post-to-wechat) |
+| **content-skills** | Content generation and publishing | [xhs-images](#baoyu-xhs-images), [infographic](#baoyu-infographic), [cover-image](#baoyu-cover-image), [slide-deck](#baoyu-slide-deck), [comic](#baoyu-comic), [article-illustrator](#baoyu-article-illustrator), [post-to-x](#baoyu-post-to-x), [post-to-wechat](#baoyu-post-to-wechat) |
 | **ai-generation-skills** | AI-powered generation backends | [danger-gemini-web](#baoyu-danger-gemini-web) |
 | **utility-skills** | Utility tools for content processing | [danger-x-to-markdown](#baoyu-danger-x-to-markdown), [compress-image](#baoyu-compress-image) |
 
@@ -99,7 +99,18 @@ Xiaohongshu (RedNote) infographic series generator. Breaks down content into 1-1
 /baoyu-xhs-images 今日星座运势
 ```
 
-**Styles** (visual aesthetics): `cute` (default), `fresh`, `tech`, `warm`, `bold`, `minimal`, `retro`, `pop`, `notion`
+**Styles** (visual aesthetics): `cute` (default), `fresh`, `warm`, `bold`, `minimal`, `retro`, `pop`, `notion`, `chalkboard`
+
+**Style Previews**:
+
+| | | |
+|:---:|:---:|:---:|
+| ![cute](./screenshots/xhs-images-styles/cute.webp) | ![fresh](./screenshots/xhs-images-styles/fresh.webp) | ![warm](./screenshots/xhs-images-styles/warm.webp) |
+| cute | fresh | warm |
+| ![bold](./screenshots/xhs-images-styles/bold.webp) | ![minimal](./screenshots/xhs-images-styles/minimal.webp) | ![retro](./screenshots/xhs-images-styles/retro.webp) |
+| bold | minimal | retro |
+| ![pop](./screenshots/xhs-images-styles/pop.webp) | ![notion](./screenshots/xhs-images-styles/notion.webp) | ![chalkboard](./screenshots/xhs-images-styles/chalkboard.webp) |
+| pop | notion | chalkboard |
 
 **Layouts** (information density):
 | Layout | Density | Best for |
@@ -111,6 +122,127 @@ Xiaohongshu (RedNote) infographic series generator. Breaks down content into 1-1
 | `comparison` | 2 sides | Before/after, pros/cons |
 | `flow` | 3-6 steps | Processes, timelines |
 
+**Layout Previews**:
+
+| | | |
+|:---:|:---:|:---:|
+| ![sparse](./screenshots/xhs-images-layouts/sparse.webp) | ![balanced](./screenshots/xhs-images-layouts/balanced.webp) | ![dense](./screenshots/xhs-images-layouts/dense.webp) |
+| sparse | balanced | dense |
+| ![list](./screenshots/xhs-images-layouts/list.webp) | ![comparison](./screenshots/xhs-images-layouts/comparison.webp) | ![flow](./screenshots/xhs-images-layouts/flow.webp) |
+| list | comparison | flow |
+
+#### baoyu-infographic
+
+Generate professional infographics with 20 layout types and 17 visual styles. Analyzes content, recommends layout×style combinations, and generates publication-ready infographics.
+
+```bash
+# Auto-recommend combinations based on content
+/baoyu-infographic path/to/content.md
+
+# Specify layout
+/baoyu-infographic path/to/content.md --layout pyramid
+
+# Specify style (default: craft-handmade)
+/baoyu-infographic path/to/content.md --style technical-schematic
+
+# Specify both
+/baoyu-infographic path/to/content.md --layout funnel --style corporate-memphis
+
+# With aspect ratio
+/baoyu-infographic path/to/content.md --aspect portrait
+```
+
+**Options**:
+| Option | Description |
+|--------|-------------|
+| `--layout <name>` | Information layout (20 options) |
+| `--style <name>` | Visual style (17 options, default: craft-handmade) |
+| `--aspect <ratio>` | landscape (16:9), portrait (9:16), square (1:1) |
+| `--lang <code>` | Output language (en, zh, ja, etc.) |
+
+**Layouts** (information structure):
+
+| Layout | Best For |
+|--------|----------|
+| `bridge` | Problem-solution, gap-crossing |
+| `circular-flow` | Cycles, recurring processes |
+| `comparison-table` | Multi-factor comparisons |
+| `do-dont` | Correct vs incorrect practices |
+| `equation` | Formula breakdown, input-output |
+| `feature-list` | Product features, bullet points |
+| `fishbone` | Root cause analysis |
+| `funnel` | Conversion processes, filtering |
+| `grid-cards` | Multiple topics, overview |
+| `iceberg` | Surface vs hidden aspects |
+| `journey-path` | Customer journey, milestones |
+| `layers-stack` | Technology stack, layers |
+| `mind-map` | Brainstorming, idea mapping |
+| `nested-circles` | Levels of influence, scope |
+| `priority-quadrants` | Eisenhower matrix, 2x2 |
+| `pyramid` | Hierarchy, Maslow's needs |
+| `scale-balance` | Pros vs cons, weighing |
+| `timeline-horizontal` | History, chronological events |
+| `tree-hierarchy` | Org charts, taxonomy |
+| `venn` | Overlapping concepts |
+
+**Layout Previews**:
+
+| | | |
+|:---:|:---:|:---:|
+| ![bridge](./screenshots/infographic-layouts/bridge.webp) | ![circular-flow](./screenshots/infographic-layouts/circular-flow.webp) | ![comparison-table](./screenshots/infographic-layouts/comparison-table.webp) |
+| bridge | circular-flow | comparison-table |
+| ![do-dont](./screenshots/infographic-layouts/do-dont.webp) | ![equation](./screenshots/infographic-layouts/equation.webp) | ![feature-list](./screenshots/infographic-layouts/feature-list.webp) |
+| do-dont | equation | feature-list |
+| ![fishbone](./screenshots/infographic-layouts/fishbone.webp) | ![funnel](./screenshots/infographic-layouts/funnel.webp) | ![grid-cards](./screenshots/infographic-layouts/grid-cards.webp) |
+| fishbone | funnel | grid-cards |
+| ![iceberg](./screenshots/infographic-layouts/iceberg.webp) | ![journey-path](./screenshots/infographic-layouts/journey-path.webp) | ![layers-stack](./screenshots/infographic-layouts/layers-stack.webp) |
+| iceberg | journey-path | layers-stack |
+| ![mind-map](./screenshots/infographic-layouts/mind-map.webp) | ![nested-circles](./screenshots/infographic-layouts/nested-circles.webp) | ![priority-quadrants](./screenshots/infographic-layouts/priority-quadrants.webp) |
+| mind-map | nested-circles | priority-quadrants |
+| ![pyramid](./screenshots/infographic-layouts/pyramid.webp) | ![scale-balance](./screenshots/infographic-layouts/scale-balance.webp) | ![timeline-horizontal](./screenshots/infographic-layouts/timeline-horizontal.webp) |
+| pyramid | scale-balance | timeline-horizontal |
+| ![tree-hierarchy](./screenshots/infographic-layouts/tree-hierarchy.webp) | ![venn](./screenshots/infographic-layouts/venn.webp) | |
+| tree-hierarchy | venn | |
+
+**Styles** (visual aesthetics):
+
+| Style | Description |
+|-------|-------------|
+| `craft-handmade` (Default) | Hand-drawn illustration, paper craft aesthetic |
+| `claymation` | 3D clay figures, playful stop-motion |
+| `kawaii` | Japanese cute, big eyes, pastel colors |
+| `storybook-watercolor` | Soft painted illustrations, whimsical |
+| `chalkboard` | Colorful chalk on black board |
+| `cyberpunk-neon` | Neon glow on dark, futuristic |
+| `bold-graphic` | Comic style, halftone dots, high contrast |
+| `aged-academia` | Vintage science, sepia sketches |
+| `corporate-memphis` | Flat vector people, vibrant fills |
+| `technical-schematic` | Blueprint, isometric 3D, engineering |
+| `origami` | Folded paper forms, geometric |
+| `pixel-art` | Retro 8-bit, nostalgic gaming |
+| `ui-wireframe` | Grayscale boxes, interface mockup |
+| `subway-map` | Transit diagram, colored lines |
+| `ikea-manual` | Minimal line art, assembly style |
+| `knolling` | Organized flat-lay, top-down |
+| `lego-brick` | Toy brick construction, playful |
+
+**Style Previews**:
+
+| | | |
+|:---:|:---:|:---:|
+| ![craft-handmade](./screenshots/infographic-styles/craft-handmade.webp) | ![claymation](./screenshots/infographic-styles/claymation.webp) | ![kawaii](./screenshots/infographic-styles/kawaii.webp) |
+| craft-handmade | claymation | kawaii |
+| ![storybook-watercolor](./screenshots/infographic-styles/storybook-watercolor.webp) | ![chalkboard](./screenshots/infographic-styles/chalkboard.webp) | ![cyberpunk-neon](./screenshots/infographic-styles/cyberpunk-neon.webp) |
+| storybook-watercolor | chalkboard | cyberpunk-neon |
+| ![bold-graphic](./screenshots/infographic-styles/bold-graphic.webp) | ![aged-academia](./screenshots/infographic-styles/aged-academia.webp) | ![corporate-memphis](./screenshots/infographic-styles/corporate-memphis.webp) |
+| bold-graphic | aged-academia | corporate-memphis |
+| ![technical-schematic](./screenshots/infographic-styles/technical-schematic.webp) | ![origami](./screenshots/infographic-styles/origami.webp) | ![pixel-art](./screenshots/infographic-styles/pixel-art.webp) |
+| technical-schematic | origami | pixel-art |
+| ![ui-wireframe](./screenshots/infographic-styles/ui-wireframe.webp) | ![subway-map](./screenshots/infographic-styles/subway-map.webp) | ![ikea-manual](./screenshots/infographic-styles/ikea-manual.webp) |
+| ui-wireframe | subway-map | ikea-manual |
+| ![knolling](./screenshots/infographic-styles/knolling.webp) | ![lego-brick](./screenshots/infographic-styles/lego-brick.webp) | |
+| knolling | lego-brick | |
+
 #### baoyu-cover-image
 
 Generate hand-drawn style cover images for articles with multiple style options.

README.zh.md

@@ -53,7 +53,7 @@ npx add-skill jimliu/baoyu-skills
 
 | 插件 | 说明 | 包含技能 |
 |------|------|----------|
-| **content-skills** | 内容生成和发布 | [xhs-images](#baoyu-xhs-images), [cover-image](#baoyu-cover-image), [slide-deck](#baoyu-slide-deck), [comic](#baoyu-comic), [article-illustrator](#baoyu-article-illustrator), [post-to-x](#baoyu-post-to-x), [post-to-wechat](#baoyu-post-to-wechat) |
+| **content-skills** | 内容生成和发布 | [xhs-images](#baoyu-xhs-images), [infographic](#baoyu-infographic), [cover-image](#baoyu-cover-image), [slide-deck](#baoyu-slide-deck), [comic](#baoyu-comic), [article-illustrator](#baoyu-article-illustrator), [post-to-x](#baoyu-post-to-x), [post-to-wechat](#baoyu-post-to-wechat) |
 | **ai-generation-skills** | AI 生成后端 | [danger-gemini-web](#baoyu-danger-gemini-web) |
 | **utility-skills** | 内容处理工具 | [danger-x-to-markdown](#baoyu-danger-x-to-markdown), [compress-image](#baoyu-compress-image) |
 
@@ -99,7 +99,18 @@ npx add-skill jimliu/baoyu-skills
 /baoyu-xhs-images 今日星座运势
 ```
 
-**风格**（视觉美学）：`cute`（默认）、`fresh`、`tech`、`warm`、`bold`、`minimal`、`retro`、`pop`、`notion`
+**风格**（视觉美学）：`cute`（默认）、`fresh`、`warm`、`bold`、`minimal`、`retro`、`pop`、`notion`、`chalkboard`
+
+**风格预览**：
+
+| | | |
+|:---:|:---:|:---:|
+| ![cute](./screenshots/xhs-images-styles/cute.webp) | ![fresh](./screenshots/xhs-images-styles/fresh.webp) | ![warm](./screenshots/xhs-images-styles/warm.webp) |
+| cute | fresh | warm |
+| ![bold](./screenshots/xhs-images-styles/bold.webp) | ![minimal](./screenshots/xhs-images-styles/minimal.webp) | ![retro](./screenshots/xhs-images-styles/retro.webp) |
+| bold | minimal | retro |
+| ![pop](./screenshots/xhs-images-styles/pop.webp) | ![notion](./screenshots/xhs-images-styles/notion.webp) | ![chalkboard](./screenshots/xhs-images-styles/chalkboard.webp) |
+| pop | notion | chalkboard |
 
 **布局**（信息密度）：
 | 布局 | 密度 | 适用场景 |
@@ -111,6 +122,127 @@ npx add-skill jimliu/baoyu-skills
 | `comparison` | 双栏 | 对比、优劣 |
 | `flow` | 3-6 步 | 流程、时间线 |
 
+**布局预览**：
+
+| | | |
+|:---:|:---:|:---:|
+| ![sparse](./screenshots/xhs-images-layouts/sparse.webp) | ![balanced](./screenshots/xhs-images-layouts/balanced.webp) | ![dense](./screenshots/xhs-images-layouts/dense.webp) |
+| sparse | balanced | dense |
+| ![list](./screenshots/xhs-images-layouts/list.webp) | ![comparison](./screenshots/xhs-images-layouts/comparison.webp) | ![flow](./screenshots/xhs-images-layouts/flow.webp) |
+| list | comparison | flow |
+
+#### baoyu-infographic
+
+专业信息图生成器，支持 20 种布局和 17 种视觉风格。分析内容后推荐布局×风格组合，生成可发布的信息图。
+
+```bash
+# 根据内容自动推荐组合
+/baoyu-infographic path/to/content.md
+
+# 指定布局
+/baoyu-infographic path/to/content.md --layout pyramid
+
+# 指定风格（默认：craft-handmade）
+/baoyu-infographic path/to/content.md --style technical-schematic
+
+# 同时指定布局和风格
+/baoyu-infographic path/to/content.md --layout funnel --style corporate-memphis
+
+# 指定比例
+/baoyu-infographic path/to/content.md --aspect portrait
+```
+
+**选项**：
+| 选项 | 说明 |
+|------|------|
+| `--layout <name>` | 信息布局（20 种选项） |
+| `--style <name>` | 视觉风格（17 种选项，默认：craft-handmade） |
+| `--aspect <ratio>` | landscape (16:9)、portrait (9:16)、square (1:1) |
+| `--lang <code>` | 输出语言（en、zh、ja 等） |
+
+**布局**（信息结构）：
+
+| 布局 | 适用场景 |
+|------|----------|
+| `bridge` | 问题→解决方案、跨越鸿沟 |
+| `circular-flow` | 循环、周期性流程 |
+| `comparison-table` | 多因素对比 |
+| `do-dont` | 正确 vs 错误做法 |
+| `equation` | 公式分解、输入→输出 |
+| `feature-list` | 产品功能、要点列表 |
+| `fishbone` | 根因分析、鱼骨图 |
+| `funnel` | 转化漏斗、筛选过程 |
+| `grid-cards` | 多主题概览、卡片网格 |
+| `iceberg` | 表面 vs 隐藏层面 |
+| `journey-path` | 用户旅程、里程碑 |
+| `layers-stack` | 技术栈、分层结构 |
+| `mind-map` | 头脑风暴、思维导图 |
+| `nested-circles` | 影响层级、范围圈 |
+| `priority-quadrants` | 四象限矩阵、优先级 |
+| `pyramid` | 层级金字塔、马斯洛需求 |
+| `scale-balance` | 利弊权衡、天平对比 |
+| `timeline-horizontal` | 历史、时间线事件 |
+| `tree-hierarchy` | 组织架构、分类树 |
+| `venn` | 重叠概念、韦恩图 |
+
+**布局预览**：
+
+| | | |
+|:---:|:---:|:---:|
+| ![bridge](./screenshots/infographic-layouts/bridge.webp) | ![circular-flow](./screenshots/infographic-layouts/circular-flow.webp) | ![comparison-table](./screenshots/infographic-layouts/comparison-table.webp) |
+| bridge | circular-flow | comparison-table |
+| ![do-dont](./screenshots/infographic-layouts/do-dont.webp) | ![equation](./screenshots/infographic-layouts/equation.webp) | ![feature-list](./screenshots/infographic-layouts/feature-list.webp) |
+| do-dont | equation | feature-list |
+| ![fishbone](./screenshots/infographic-layouts/fishbone.webp) | ![funnel](./screenshots/infographic-layouts/funnel.webp) | ![grid-cards](./screenshots/infographic-layouts/grid-cards.webp) |
+| fishbone | funnel | grid-cards |
+| ![iceberg](./screenshots/infographic-layouts/iceberg.webp) | ![journey-path](./screenshots/infographic-layouts/journey-path.webp) | ![layers-stack](./screenshots/infographic-layouts/layers-stack.webp) |
+| iceberg | journey-path | layers-stack |
+| ![mind-map](./screenshots/infographic-layouts/mind-map.webp) | ![nested-circles](./screenshots/infographic-layouts/nested-circles.webp) | ![priority-quadrants](./screenshots/infographic-layouts/priority-quadrants.webp) |
+| mind-map | nested-circles | priority-quadrants |
+| ![pyramid](./screenshots/infographic-layouts/pyramid.webp) | ![scale-balance](./screenshots/infographic-layouts/scale-balance.webp) | ![timeline-horizontal](./screenshots/infographic-layouts/timeline-horizontal.webp) |
+| pyramid | scale-balance | timeline-horizontal |
+| ![tree-hierarchy](./screenshots/infographic-layouts/tree-hierarchy.webp) | ![venn](./screenshots/infographic-layouts/venn.webp) | |
+| tree-hierarchy | venn | |
+
+**风格**（视觉美学）：
+
+| 风格 | 描述 |
+|------|------|
+| `craft-handmade`（默认） | 手绘插画、纸艺风格 |
+| `claymation` | 3D 黏土人物、定格动画感 |
+| `kawaii` | 日系可爱、大眼睛、粉彩色 |
+| `storybook-watercolor` | 柔和水彩、童话绘本 |
+| `chalkboard` | 彩色粉笔、黑板风格 |
+| `cyberpunk-neon` | 霓虹灯光、暗色未来感 |
+| `bold-graphic` | 漫画风格、网点、高对比 |
+| `aged-academia` | 复古科学、泛黄素描 |
+| `corporate-memphis` | 扁平矢量人物、鲜艳填充 |
+| `technical-schematic` | 蓝图、等距 3D、工程图 |
+| `origami` | 折纸形态、几何感 |
+| `pixel-art` | 复古 8-bit、怀旧游戏 |
+| `ui-wireframe` | 灰度框图、界面原型 |
+| `subway-map` | 地铁图、彩色线路 |
+| `ikea-manual` | 极简线条、组装说明风 |
+| `knolling` | 整齐平铺、俯视图 |
+| `lego-brick` | 乐高积木、童趣拼搭 |
+
+**风格预览**：
+
+| | | |
+|:---:|:---:|:---:|
+| ![craft-handmade](./screenshots/infographic-styles/craft-handmade.webp) | ![claymation](./screenshots/infographic-styles/claymation.webp) | ![kawaii](./screenshots/infographic-styles/kawaii.webp) |
+| craft-handmade | claymation | kawaii |
+| ![storybook-watercolor](./screenshots/infographic-styles/storybook-watercolor.webp) | ![chalkboard](./screenshots/infographic-styles/chalkboard.webp) | ![cyberpunk-neon](./screenshots/infographic-styles/cyberpunk-neon.webp) |
+| storybook-watercolor | chalkboard | cyberpunk-neon |
+| ![bold-graphic](./screenshots/infographic-styles/bold-graphic.webp) | ![aged-academia](./screenshots/infographic-styles/aged-academia.webp) | ![corporate-memphis](./screenshots/infographic-styles/corporate-memphis.webp) |
+| bold-graphic | aged-academia | corporate-memphis |
+| ![technical-schematic](./screenshots/infographic-styles/technical-schematic.webp) | ![origami](./screenshots/infographic-styles/origami.webp) | ![pixel-art](./screenshots/infographic-styles/pixel-art.webp) |
+| technical-schematic | origami | pixel-art |
+| ![ui-wireframe](./screenshots/infographic-styles/ui-wireframe.webp) | ![subway-map](./screenshots/infographic-styles/subway-map.webp) | ![ikea-manual](./screenshots/infographic-styles/ikea-manual.webp) |
+| ui-wireframe | subway-map | ikea-manual |
+| ![knolling](./screenshots/infographic-styles/knolling.webp) | ![lego-brick](./screenshots/infographic-styles/lego-brick.webp) | |
+| knolling | lego-brick | |
+
 #### baoyu-cover-image
 
 为文章生成手绘风格封面图，支持多种风格选项。

skills/baoyu-article-illustrator/references/styles/chalkboard.md

@@ -1,56 +1,60 @@
 # chalkboard
 
-Classic classroom chalkboard style for educational content
+Black chalkboard background with colorful chalk drawing style
 
 ## Design Aesthetic
 
-Classic classroom chalkboard aesthetic with hand-drawn chalk illustrations. Nostalgic educational feel with imperfect, sketchy lines. Colorful chalk creates visual hierarchy while maintaining authentic chalkboard warmth.
+Classic classroom chalkboard aesthetic with hand-drawn chalk illustrations. Nostalgic educational feel with imperfect, sketchy lines that capture the warmth of traditional teaching. Colorful chalk creates visual hierarchy while maintaining the authentic chalkboard experience.
 
 ## Background
 
 - Color: Chalkboard Black (#1A1A1A) or Dark Green-Black (#1C2B1C)
-- Texture: Realistic chalkboard texture with dust and eraser marks
+- Texture: Realistic chalkboard texture with subtle scratches, dust particles, and faint eraser marks
+
+## Typography
+
+Hand-drawn chalk lettering style with visible chalk texture. Imperfect baseline adds authenticity. White or bright colored chalk for emphasis.
 
 ## Color Palette
 
 | Role | Color | Hex | Usage |
 |------|-------|-----|-------|
 | Background | Chalkboard Black | #1A1A1A | Primary background |
-| Alt Background | Green-Black | #1C2B1C | Traditional green |
+| Alt Background | Green-Black | #1C2B1C | Traditional green board |
-| Primary | Chalk White | #F5F5F5 | Main elements |
+| Primary Text | Chalk White | #F5F5F5 | Main text, outlines |
-| Accent 1 | Chalk Yellow | #FFE566 | Highlights |
+| Accent 1 | Chalk Yellow | #FFE566 | Highlights, emphasis |
 | Accent 2 | Chalk Pink | #FF9999 | Secondary highlights |
 | Accent 3 | Chalk Blue | #66B3FF | Diagrams, links |
-| Accent 4 | Chalk Green | #90EE90 | Success, growth |
+| Accent 4 | Chalk Green | #90EE90 | Success, nature |
 | Accent 5 | Chalk Orange | #FFB366 | Warnings, energy |
 
 ## Visual Elements
 
-- Hand-drawn chalk illustrations
+- Hand-drawn chalk illustrations with sketchy, imperfect lines
-- Chalk dust effects
+- Chalk dust effects around text and key elements
-- Doodles: stars, arrows, underlines
+- Doodles: stars, arrows, underlines, circles, checkmarks
-- Mathematical formulas
+- Mathematical formulas and simple diagrams
-- Eraser smudges and chalk residue
+- Eraser smudges and chalk residue textures
-- Stick figures and icons
+- Wooden frame border optional
-- Connection lines with hand feel
+- Stick figures and simple icons
-- Checkmarks and annotations
+- Connection lines with hand-drawn feel
 
 ## Style Rules
 
 ### Do
 
-- Maintain chalk texture on all elements
+- Maintain authentic chalk texture on all elements
-- Use imperfect hand-drawn quality
+- Use imperfect, hand-drawn quality throughout
-- Add chalk dust and smudge effects
+- Add subtle chalk dust and smudge effects
-- Create hierarchy with color
+- Create visual hierarchy with color variety
-- Include playful annotations
+- Include playful doodles and annotations
 
 ### Don't
 
 - Use perfect geometric shapes
-- Create clean digital lines
+- Create clean digital-looking lines
 - Add photorealistic elements
-- Use gradients or gloss
+- Use gradients or glossy effects
 - Make it look computerized
 
 ## Best For

skills/baoyu-comic/SKILL.md

@@ -18,7 +18,7 @@ Create original knowledge comics with multiple visual styles.
 
 | Option | Values |
 |--------|--------|
-| `--style` | classic (default), dramatic, warm, sepia, vibrant, ohmsha, realistic, wuxia, or custom description |
+| `--style` | classic (default), dramatic, warm, sepia, vibrant, ohmsha, realistic, wuxia, shoujo, or custom description |
 | `--layout` | standard (default), cinematic, dense, splash, mixed, webtoon |
 | `--aspect` | 3:4 (default, portrait), 4:3 (landscape), 16:9 (widescreen) |
 | `--lang` | auto (default), zh, en, ja, etc. |
@@ -38,6 +38,7 @@ Style × Layout × Aspect can be freely combined. Custom styles can be described
 | Conflict, breakthrough | dramatic | splash |
 | Wine, food, business, lifestyle, professional | realistic | cinematic |
 | Martial arts, wuxia, xianxia, Chinese historical | wuxia | splash |
+| Romance, love, school life, friendship, emotional | shoujo | standard |
 | Biography, balanced | classic | mixed |
 
 ## Script Directory

skills/baoyu-comic/references/styles/chalkboard.md

@@ -0,0 +1,61 @@
+# chalkboard
+
+Black chalkboard background with colorful chalk drawing style
+
+## Design Aesthetic
+
+Classic classroom chalkboard aesthetic with hand-drawn chalk illustrations. Nostalgic educational feel with imperfect, sketchy lines that capture the warmth of traditional teaching. Colorful chalk creates visual hierarchy while maintaining the authentic chalkboard experience.
+
+## Background
+
+- Color: Chalkboard Black (#1A1A1A) or Dark Green-Black (#1C2B1C)
+- Texture: Realistic chalkboard texture with subtle scratches, dust particles, and faint eraser marks
+
+## Typography
+
+Hand-drawn chalk lettering style with visible chalk texture. Imperfect baseline adds authenticity. White or bright colored chalk for emphasis.
+
+## Color Palette
+
+| Role | Color | Hex | Usage |
+|------|-------|-----|-------|
+| Background | Chalkboard Black | #1A1A1A | Primary background |
+| Alt Background | Green-Black | #1C2B1C | Traditional green board |
+| Primary Text | Chalk White | #F5F5F5 | Main text, outlines |
+| Accent 1 | Chalk Yellow | #FFE566 | Highlights, emphasis |
+| Accent 2 | Chalk Pink | #FF9999 | Secondary highlights |
+| Accent 3 | Chalk Blue | #66B3FF | Diagrams, links |
+| Accent 4 | Chalk Green | #90EE90 | Success, nature |
+| Accent 5 | Chalk Orange | #FFB366 | Warnings, energy |
+
+## Visual Elements
+
+- Hand-drawn chalk illustrations with sketchy, imperfect lines
+- Chalk dust effects around text and key elements
+- Doodles: stars, arrows, underlines, circles, checkmarks
+- Mathematical formulas and simple diagrams
+- Eraser smudges and chalk residue textures
+- Wooden frame border optional
+- Stick figures and simple icons
+- Connection lines with hand-drawn feel
+
+## Style Rules
+
+### Do
+
+- Maintain authentic chalk texture on all elements
+- Use imperfect, hand-drawn quality throughout
+- Add subtle chalk dust and smudge effects
+- Create visual hierarchy with color variety
+- Include playful doodles and annotations
+
+### Don't
+
+- Use perfect geometric shapes
+- Create clean digital-looking lines
+- Add photorealistic elements
+- Use gradients or glossy effects
+
+## Best For
+
+Educational content, tutorials, classroom themes, teaching materials, workshops, informal learning sessions, knowledge sharing

skills/baoyu-comic/references/styles/shoujo.md

@@ -0,0 +1,45 @@
+# shoujo
+
+Classic shoujo manga style with romantic, emotional aesthetics
+
+## Style Guidelines
+
+### Line Work
+- 1-1.5px, delicate and flowing
+- Elegant curves, graceful strokes
+- Fine details on eyes, hair, and clothing
+
+### Character Design
+- Large, sparkling eyes with multiple highlights
+- Slender figures, elegant proportions
+- Expressive poses, dramatic gestures
+- Detailed hair with flowing strands
+- Fashionable clothing with intricate folds
+
+### Background Treatment
+- Decorative elements: flowers, sparkles, bubbles, feathers
+- Soft focus, dreamy atmospheres
+- Screen tones for emotional emphasis
+- Abstract backgrounds during emotional moments
+
+### Special Effects
+- Screentone gradients for mood
+- Sparkle and glow effects
+- Floating petals, stars, hearts
+- Speed lines for dramatic moments
+- Light halos around characters
+
+## Color Palette
+
+- Primary: Soft pink (#FFB6C1), lavender (#E6E6FA), rose (#FF69B4)
+- Accent: Pearl white (#FFFAF0), gold highlights (#FFD700)
+- Skin: Porcelain (#FFF5EE), soft blush (#FFE4E1)
+- Background: Pastel gradients, soft cream (#FFF8DC)
+
+## Mood
+
+Romance, emotion, beauty, youth, dreams
+
+## Best For
+
+Romance, coming-of-age, friendship stories, emotional drama, school life

skills/baoyu-cover-image/references/styles/chalkboard.md

@@ -2,25 +2,60 @@
 
 Black chalkboard background with colorful chalk drawing style
 
-## Color Palette
+## Design Aesthetic
 
-- Primary: Chalk White (#F5F5F5), Chalk Yellow (#FFE566), Chalk Pink (#FF9999)
+Classic classroom chalkboard aesthetic with hand-drawn chalk illustrations. Nostalgic educational feel with imperfect, sketchy lines that capture the warmth of traditional teaching. Colorful chalk creates visual hierarchy while maintaining the authentic chalkboard experience.
-- Background: Chalkboard Black (#1A1A1A), Dark Green-Black (#1C2B1C)
-- Accents: Chalk Blue (#66B3FF), Chalk Green (#90EE90), Chalk Orange (#FFB366)
 
-## Visual Elements
+## Background
 
-- Chalkboard texture with subtle dust and smudges
+- Color: Chalkboard Black (#1A1A1A) or Dark Green-Black (#1C2B1C)
-- Hand-drawn chalk illustrations with sketchy lines
+- Texture: Realistic chalkboard texture with subtle scratches, dust particles, and faint eraser marks
-- Chalk dust effects around text and drawings
-- Imperfect lines with visible texture
-- Doodles, arrows, underlines, stars
-- Eraser marks and chalk residue
 
 ## Typography
 
-- Hand-drawn chalk lettering, slightly uneven, with chalk texture
+Hand-drawn chalk lettering style with visible chalk texture. Imperfect baseline adds authenticity. White or bright colored chalk for emphasis.
+
+## Color Palette
+
+| Role | Color | Hex | Usage |
+|------|-------|-----|-------|
+| Background | Chalkboard Black | #1A1A1A | Primary background |
+| Alt Background | Green-Black | #1C2B1C | Traditional green board |
+| Primary Text | Chalk White | #F5F5F5 | Main text, outlines |
+| Accent 1 | Chalk Yellow | #FFE566 | Highlights, emphasis |
+| Accent 2 | Chalk Pink | #FF9999 | Secondary highlights |
+| Accent 3 | Chalk Blue | #66B3FF | Diagrams, links |
+| Accent 4 | Chalk Green | #90EE90 | Success, nature |
+| Accent 5 | Chalk Orange | #FFB366 | Warnings, energy |
+
+## Visual Elements
+
+- Hand-drawn chalk illustrations with sketchy, imperfect lines
+- Chalk dust effects around text and key elements
+- Doodles: stars, arrows, underlines, circles, checkmarks
+- Mathematical formulas and simple diagrams
+- Eraser smudges and chalk residue textures
+- Wooden frame border optional
+- Stick figures and simple icons
+- Connection lines with hand-drawn feel
+
+## Style Rules
+
+### Do
+
+- Maintain authentic chalk texture on all elements
+- Use imperfect, hand-drawn quality throughout
+- Add subtle chalk dust and smudge effects
+- Create visual hierarchy with color variety
+- Include playful doodles and annotations
+
+### Don't
+
+- Use perfect geometric shapes
+- Create clean digital-looking lines
+- Add photorealistic elements
+- Use gradients or glossy effects
 
 ## Best For
 
-Educational content, tutorials, classroom themes, back-to-school, teaching materials
+Educational content, tutorials, classroom themes, teaching materials, workshops, informal learning sessions, knowledge sharing

skills/baoyu-danger-gemini-web/scripts/gemini-webapi/utils/load-browser-cookies.ts

@@ -4,8 +4,9 @@ import { mkdir } from 'node:fs/promises';
 import net from 'node:net';
 import process from 'node:process';
 
+import { Endpoint, Headers } from '../constants.js';
 import { logger } from './logger.js';
-import { fetch_with_timeout, sleep } from './http.js';
+import { cookie_header, fetch_with_timeout, sleep } from './http.js';
 import { read_cookie_file, type CookieMap, write_cookie_file } from './cookie-file.js';
 import { resolveGeminiWebChromeProfileDir, resolveGeminiWebCookiePath } from './paths.js';
 
@@ -177,6 +178,30 @@ async function launch_chrome(profileDir: string, port: number): Promise<ChildPro
   return spawn(chrome, args, { stdio: 'ignore' });
 }
 
+async function is_gemini_session_ready(cookies: CookieMap, verbose: boolean): Promise<boolean> {
+  if (!cookies['__Secure-1PSID']) return false;
+
+  try {
+    const res = await fetch_with_timeout(Endpoint.INIT, {
+      method: 'GET',
+      headers: { ...Headers.GEMINI, Cookie: cookie_header(cookies) },
+      redirect: 'follow',
+      timeout_ms: 30_000,
+    });
+
+    if (!res.ok) {
+      if (verbose) logger.debug(`Gemini init check failed: ${res.status} ${res.statusText}`);
+      return false;
+    }
+
+    const text = await res.text();
+    return /\"SNlM0e\":\"(.*?)\"/.test(text);
+  } catch (e) {
+    if (verbose) logger.debug(`Gemini init check error: ${e instanceof Error ? e.message : String(e)}`);
+    return false;
+  }
+}
+
 async function fetch_google_cookies_via_cdp(
   profileDir: string,
   timeoutMs: number,
@@ -200,7 +225,7 @@ async function fetch_google_cookies_via_cdp(
     await cdp.send('Network.enable', {}, { sessionId });
 
     if (verbose) {
-      logger.info('Chrome opened. If needed, complete Google login in the window. Waiting for cookies...');
+      logger.info('Chrome opened. If needed, complete Google login in the window. Waiting for a valid Gemini session...');
     }
 
     const start = Date.now();
@@ -219,14 +244,14 @@ async function fetch_google_cookies_via_cdp(
       }
 
       last = m;
-      if (m['__Secure-1PSID'] && (m['__Secure-1PSIDTS'] || Date.now() - start > 10_000)) {
+      if (await is_gemini_session_ready(m, verbose)) {
         return m;
       }
 
       await sleep(1000);
     }
 
-    throw new Error(`Timed out waiting for Google cookies. Last keys: ${Object.keys(last).join(', ')}`);
+    throw new Error(`Timed out waiting for a valid Gemini session. Last keys: ${Object.keys(last).join(', ')}`);
   } finally {
     if (cdp) {
       try {

skills/baoyu-infographic/SKILL.md

@@ -0,0 +1,491 @@
+---
+name: baoyu-infographic
+description: Generate professional infographics with 20 layout types and 17 visual styles. Analyzes content, recommends layout×style combinations, and generates publication-ready infographics. Use when user asks to create "infographic", "信息图", or "visual summary".
+---
+
+# Infographic Generator
+
+Generate professional infographics with two dimensions: layout (information structure) and style (visual aesthetics).
+
+## Usage
+
+```bash
+# Auto-recommend combinations based on content
+/baoyu-infographic path/to/content.md
+
+# Specify layout
+/baoyu-infographic path/to/content.md --layout hierarchical-layers
+
+# Specify style (default: craft-handmade)
+/baoyu-infographic path/to/content.md --style technical-schematic
+
+# Specify both
+/baoyu-infographic path/to/content.md --layout funnel --style corporate-memphis
+
+# With aspect ratio
+/baoyu-infographic path/to/content.md --aspect portrait
+
+# Direct content input
+/baoyu-infographic
+[paste content]
+
+# Direct input with options
+/baoyu-infographic --layout linear-progression --style aged-academia
+[paste content]
+```
+
+## Options
+
+| Option | Description |
+|--------|-------------|
+| `--layout <name>` | Information layout (20 options, see Layout Gallery) |
+| `--style <name>` | Visual style (17 options, default: craft-handmade) |
+| `--aspect <ratio>` | landscape (16:9), portrait (9:16), square (1:1) |
+| `--lang <code>` | Output language (en, zh, ja, etc.) |
+
+## Two Dimensions
+
+| Dimension | Controls | Count |
+|-----------|----------|-------|
+| **Layout** | Information structure: hierarchy, flow, relationships | 20 types |
+| **Style** | Visual aesthetics: colors, textures, artistic treatment | 17 types |
+
+Layout × Style can be freely combined. Example: `--layout hierarchical-layers --style craft-handmade` creates a hierarchy with playful hand-drawn aesthetics.
+
+## Layout Gallery
+
+| Layout | Best For |
+|--------|----------|
+| `linear-progression` | Timelines, step-by-step processes, tutorials |
+| `binary-comparison` | A vs B, before-after, pros-cons |
+| `comparison-matrix` | Multi-factor comparisons |
+| `hierarchical-layers` | Pyramids, concentric circles, priority levels |
+| `tree-branching` | Categories, taxonomies |
+| `hub-spoke` | Central concept with related items |
+| `structural-breakdown` | Exploded views, cross-sections, part labeling |
+| `bento-grid` | Multiple topics, overview (default) |
+| `iceberg` | Surface vs hidden aspects |
+| `bridge` | Problem-solution, gap-crossing |
+| `funnel` | Conversion processes, filtering |
+| `isometric-map` | Spatial relationships, locations |
+| `dashboard` | Metrics, KPIs, data display |
+| `periodic-table` | Categorized collections |
+| `comic-strip` | Narratives, sequences |
+| `story-mountain` | Plot structure, tension arcs |
+| `jigsaw` | Interconnected parts |
+| `venn-diagram` | Overlapping concepts |
+| `winding-roadmap` | Journey, milestones |
+| `circular-flow` | Cycles, recurring processes |
+
+Detailed layout definitions: `references/layouts/<layout>.md`
+
+## Style Gallery
+
+| Style | Description |
+|-------|-------------|
+| `craft-handmade` (Default) | Hand-drawn illustration, paper craft aesthetic |
+| `claymation` | 3D clay figures, playful stop-motion |
+| `kawaii` | Japanese cute, big eyes, pastel colors |
+| `storybook-watercolor` | Soft painted illustrations, whimsical |
+| `chalkboard` | Colorful chalk on black board |
+| `cyberpunk-neon` | Neon glow on dark, futuristic |
+| `bold-graphic` | Comic style, halftone dots, high contrast |
+| `aged-academia` | Vintage science, sepia sketches |
+| `corporate-memphis` | Flat vector people, vibrant fills |
+| `technical-schematic` | Blueprint, isometric 3D, engineering |
+| `origami` | Folded paper forms, geometric |
+| `pixel-art` | Retro 8-bit, nostalgic gaming |
+| `ui-wireframe` | Grayscale boxes, interface mockup |
+| `subway-map` | Transit diagram, colored lines |
+| `ikea-manual` | Minimal line art, assembly style |
+| `knolling` | Organized flat-lay, top-down |
+| `lego-brick` | Toy brick construction, playful |
+
+Detailed style definitions: `references/styles/<style>.md`
+
+## Recommended Combinations
+
+Based on content analysis, the system recommends 3-5 layout×style combinations:
+
+| Content Type | Recommended Combination |
+|--------------|------------------------|
+| Timeline/History | `linear-progression` + `craft-handmade` |
+| Step-by-step Process | `linear-progression` + `ikea-manual` |
+| Comparison (A vs B) | `binary-comparison` + `corporate-memphis` |
+| Hierarchy/Levels | `hierarchical-layers` + `craft-handmade` |
+| Relationships/Overlap | `venn-diagram` + `craft-handmade` |
+| Conversion/Sales | `funnel` + `corporate-memphis` |
+| Recurring Process | `circular-flow` + `craft-handmade` |
+| Technical/System | `structural-breakdown` + `technical-schematic` |
+| Data/Metrics | `dashboard` + `corporate-memphis` |
+| Educational/Overview | `bento-grid` + `chalkboard` |
+| Journey/Roadmap | `winding-roadmap` + `storybook-watercolor` |
+| Categories/Types | `periodic-table` + `bold-graphic` |
+
+**Default combination**: `bento-grid` + `craft-handmade`
+
+## File Structure
+
+Each session creates an independent directory:
+
+```
+infographic/{topic-slug}/
+├── source-{slug}.{ext}             # Source files
+├── analysis.md                     # Deep content analysis
+├── structured-content.md           # Instructional content structure
+├── prompts/
+│   └── infographic.md              # Generated prompt
+└── infographic.png                 # Output image
+```
+
+**Slug Generation**:
+1. Extract main topic from content (2-4 words, kebab-case)
+2. Example: "Machine Learning Basics" → `ml-basics`
+
+**Conflict Resolution**:
+If `infographic/{topic-slug}/` already exists:
+- Append timestamp: `{topic-slug}-YYYYMMDD-HHMMSS`
+- Example: `ml-basics` exists → `ml-basics-20260120-103052`
+
+## Instructional Design Approach
+
+This skill applies a **world-class instructional designer** mindset to infographic creation:
+
+1. **Deep Understanding**: Read and comprehend the source material thoroughly
+2. **Learning Objectives**: Identify what the viewer should understand after seeing the infographic
+3. **Information Architecture**: Structure content for maximum clarity and retention
+4. **Visual Storytelling**: Use visuals to communicate complex ideas accessibly
+5. **Verbatim Data**: Preserve all source data exactly as written—no summarization or rephrasing of facts
+
+## Workflow
+
+### Step 1: Analyze Content → `analysis.md`
+
+Read source content and perform deep instructional analysis.
+
+**Actions**:
+1. **Save source content** (if not already a file):
+   - If user provides a file path: use as-is
+   - If user pastes content: save to `source.md` in target directory
+
+2. **Deep reading**:
+   - Read the entire document thoroughly
+   - Develop deep understanding before proceeding
+   - Identify the core message and purpose
+
+3. **Content analysis**:
+   | Aspect | Questions to Answer |
+   |--------|---------------------|
+   | **Main Topic** | What is this content fundamentally about? |
+   | **Data Type** | Timeline? Hierarchy? Comparison? Process? Relationships? |
+   | **Complexity** | Simple (3-5 points) or complex (6-10+ points)? |
+   | **Tone** | Technical, educational, playful, serious, persuasive? |
+   | **Audience** | Who is the intended viewer? What do they already know? |
+
+4. **Language detection**:
+   - Detect **source language** from content
+   - Detect **user language** from conversation
+   - Note if source_language ≠ user_language (will ask in Step 4)
+
+5. **Extract design instructions** from user input:
+   - Style preferences (colors, mood, aesthetic)
+   - Layout preferences (structure, organization)
+   - Any specific visual requirements
+   - Separate these from content—they go in the Design Instructions section
+
+6. **Save to `analysis.md`**
+
+**Analysis Output Format**:
+```yaml
+---
+title: "[Main topic title]"
+topic: "[Category: educational/technical/business/etc.]"
+data_type: "[timeline/hierarchy/comparison/process/etc.]"
+complexity: "[simple/moderate/complex]"
+source_language: "[detected language]"
+user_language: "[user's language]"
+---
+
+## Main Topic
+[1-2 sentence summary of what this content is about]
+
+## Learning Objectives
+After viewing this infographic, the viewer should understand:
+1. [Primary objective]
+2. [Secondary objective]
+3. [Tertiary objective if applicable]
+
+## Target Audience
+- **Knowledge Level**: [Beginner/Intermediate/Expert]
+- **Context**: [Why they're viewing this]
+- **Expectations**: [What they hope to learn]
+
+## Content Type Analysis
+- **Data Structure**: [How information relates to itself]
+- **Key Relationships**: [What connects to what]
+- **Visual Opportunities**: [What can be shown rather than told]
+
+## Design Instructions (from user input)
+[Any style, color, layout, or visual preferences extracted from user's steering prompt]
+```
+
+### Step 2: Generate Structured Content → `structured-content.md`
+
+Transform analyzed content into a structured format for the infographic designer.
+
+**Instructional Design Process**:
+
+1. **Create high-level outline**:
+   - Title that captures the essence
+   - List all main learning objectives
+   - Identify the logical flow
+
+2. **Flesh out each section**:
+   - For each learning objective, create a section
+   - Mix conceptual explanations with practical elements
+   - Preserve all source data **verbatim**—do not summarize or rephrase
+
+3. **Structure for visual communication**:
+   - Identify what becomes a headline
+   - Identify what becomes supporting text
+   - Identify what becomes a visual element
+   - Identify data points, statistics, or quotes
+
+**Critical Rules**:
+| Rule | Requirement |
+|------|-------------|
+| **Output format** | Markdown only |
+| **Tone** | Expert trainer: knowledgeable, clear, encouraging |
+| **No new information** | Do not add anything not in the source |
+| **Verbatim data** | All statistics, quotes, and facts copied exactly |
+
+**Structured Content Format**:
+```markdown
+# [Infographic Title]
+
+## Overview
+[Brief description of what this infographic conveys]
+
+## Learning Objectives
+The viewer will understand:
+1. [Objective 1]
+2. [Objective 2]
+3. [Objective 3]
+
+---
+
+## Section 1: [Section Title]
+
+**Key Concept**: [One-sentence summary]
+
+**Content**:
+- [Point 1 - verbatim from source]
+- [Point 2 - verbatim from source]
+- [Point 3 - verbatim from source]
+
+**Visual Element**: [What to show visually]
+
+**Text Labels**:
+- Headline: "[Exact text for headline]"
+- Subhead: "[Exact text for subhead]"
+- Labels: "[Label 1]", "[Label 2]", ...
+
+---
+
+## Section 2: [Section Title]
+[Continue pattern...]
+
+---
+
+## Data Points (Verbatim)
+[All statistics, numbers, quotes exactly as they appear in source]
+- "[Exact quote or statistic 1]"
+- "[Exact quote or statistic 2]"
+
+---
+
+## Design Instructions
+[Extracted from user's steering prompt]
+- Style: [preferences]
+- Colors: [preferences]
+- Layout: [preferences]
+- Other: [any other visual requirements]
+```
+
+### Step 3: Generate Layout×Style Recommendations
+
+Based on analysis and structured content, recommend 3-5 combinations.
+
+**Selection Criteria**:
+| Factor | How to Match |
+|--------|--------------|
+| **Data structure** | Timeline→linear-progression, Hierarchy→hierarchical-layers, etc. |
+| **Content tone** | Technical→technical-schematic, Playful→kawaii, etc. |
+| **Audience** | Business→corporate-memphis, Educational→chalkboard, etc. |
+| **Complexity** | Simple→sparse layouts, Complex→dense layouts |
+| **User preferences** | Honor any design instructions from Step 1 |
+
+**Format each recommendation**:
+```
+[Layout] + [Style]: [Brief rationale based on content analysis]
+```
+
+### Step 4: Confirm Options
+
+**IMPORTANT**: Present ALL options in a single confirmation step using AskUserQuestion.
+
+**Questions to ask**:
+
+| Question | When to Ask |
+|----------|-------------|
+| Combination | Always (required) |
+| Aspect ratio | Always |
+| Language | Only if `source_language ≠ user_language` |
+
+**AskUserQuestion format**:
+
+**Question 1 (Combination)** - always:
+- Option A (Recommended): [layout] + [style] - [brief rationale]
+- Option B: [layout] + [style] - [brief rationale]
+- Option C: [layout] + [style] - [brief rationale]
+- Custom: Specify your own layout and/or style
+
+**Question 2 (Aspect)** - always:
+- landscape (16:9, Recommended) - standard presentation
+- portrait (9:16) - mobile/social media
+- square (1:1) - social media posts
+
+**Question 3 (Language)** - only if source ≠ user language:
+- [Source language] (matches content)
+- [User language] (your preference)
+
+**Language handling**:
+- If source language = user language: Just inform user
+- If different: Ask which language to use for all text
+
+### Step 5: Generate Prompt → `prompts/infographic.md`
+
+Create the image generation prompt.
+
+**Process**:
+1. Read layout definition from `references/layouts/<layout>.md`
+2. Read style definition from `references/styles/<style>.md`
+3. Read base prompt template from `references/base-prompt.md`
+4. Combine with structured content from Step 2
+5. **All text in prompt uses confirmed language**
+
+**Prompt Structure**:
+```markdown
+Topic: [main topic from analysis]
+Layout: [selected layout]
+Style: [selected style]
+Aspect: [confirmed ratio]
+Language: [confirmed language]
+
+## Layout Guidelines
+[From layout definition file]
+
+## Style Guidelines
+[From style definition file]
+
+## Content to Visualize
+
+### Learning Objectives
+[From structured-content.md]
+
+### Sections
+[From structured-content.md - each section with its visual elements]
+
+### Data Points (Verbatim)
+[All exact statistics, quotes, and facts from source]
+
+## Text Labels (in [language])
+[All text that appears in the infographic, organized by section]
+
+## Design Instructions
+[Any specific visual requirements from user's steering prompt]
+```
+
+### Step 6: Generate Image
+
+**Image Generation Skill Selection**:
+1. Check available image generation skills
+2. If multiple skills available, ask user to choose
+
+**Generation**:
+Call selected image generation skill with:
+- Prompt file path: `prompts/infographic.md`
+- Output path: `infographic.png`
+- Aspect ratio parameter if supported
+
+**Error handling**:
+- On failure, auto-retry once before reporting error
+- If retry fails, inform user with error details
+
+### Step 7: Output Summary
+
+```
+Infographic Generated!
+
+Topic: [topic from analysis]
+Layout: [layout name]
+Style: [style name]
+Aspect: [aspect ratio]
+Language: [confirmed language]
+Location: [output directory path]
+
+Learning Objectives Covered:
+1. [Objective 1] ✓
+2. [Objective 2] ✓
+3. [Objective 3] ✓
+
+Files:
+✓ analysis.md
+✓ structured-content.md
+✓ prompts/infographic.md
+✓ infographic.png
+
+Preview the image to verify it matches your expectations.
+```
+
+## Quality Checklist
+
+Before generating the final image, verify:
+
+- [ ] All source data preserved verbatim (no summarization)
+- [ ] Learning objectives clearly represented
+- [ ] Layout matches information structure
+- [ ] Style matches content tone and audience
+- [ ] All text labels in correct language
+- [ ] Design instructions from user honored
+- [ ] Visual hierarchy supports comprehension
+
+## References
+
+Detailed templates and guidelines in `references/` directory:
+- `analysis-framework.md` - Instructional design analysis methodology
+- `structured-content-template.md` - Structured content format and examples
+- `base-prompt.md` - Base prompt template for image generation
+- `layouts/<layout>.md` - Detailed layout definitions (20 files)
+- `styles/<style>.md` - Detailed style definitions (17 files)
+
+## Notes
+
+- Layout determines information architecture; style determines visual treatment
+- Default style `craft-handmade` works well with most layouts
+- Technical content benefits from `technical-schematic` or `ui-wireframe`
+- Educational content works well with `chalkboard`, `storybook-watercolor`
+- Business content pairs with `corporate-memphis`, `dashboard`
+- All text in the infographic uses the confirmed language
+- **Never add information not present in the source document**
+- **Statistics and quotes must be copied exactly—no paraphrasing**
+
+## Extension Support
+
+Custom styles and configurations via EXTEND.md.
+
+**Check paths** (priority order):
+1. `.baoyu-skills/baoyu-infographic/EXTEND.md` (project)
+2. `~/.baoyu-skills/baoyu-infographic/EXTEND.md` (user)
+
+If found, load before Step 1. Extension content overrides defaults.

skills/baoyu-infographic/references/analysis-framework.md

@@ -0,0 +1,181 @@
+# Infographic Content Analysis Framework
+
+Deep analysis framework applying instructional design principles to infographic creation.
+
+## Purpose
+
+Before creating an infographic, thoroughly analyze the source material to:
+- Understand the content at a deep level
+- Identify clear learning objectives for the viewer
+- Structure information for maximum clarity and retention
+- Match content to optimal layout×style combinations
+- Preserve all source data verbatim
+
+## Instructional Design Mindset
+
+Approach content analysis as a **world-class instructional designer**:
+
+| Principle | Application |
+|-----------|-------------|
+| **Deep Understanding** | Read the entire document before analyzing any part |
+| **Learner-Centered** | Focus on what the viewer needs to understand |
+| **Visual Storytelling** | Use visuals to communicate, not just decorate |
+| **Cognitive Load** | Simplify complex ideas without losing accuracy |
+| **Data Integrity** | Never alter, summarize, or paraphrase source facts |
+
+## Analysis Dimensions
+
+### 1. Content Type Classification
+
+| Type | Characteristics | Best Layout | Best Style |
+|------|-----------------|-------------|------------|
+| **Timeline/History** | Sequential events, dates, progression | linear-progression | craft-handmade, aged-academia |
+| **Process/Tutorial** | Step-by-step instructions, how-to | linear-progression, winding-roadmap | ikea-manual, technical-schematic |
+| **Comparison** | A vs B, pros/cons, before-after | binary-comparison, comparison-matrix | corporate-memphis, bold-graphic |
+| **Hierarchy** | Levels, priorities, pyramids | hierarchical-layers, tree-branching | craft-handmade, corporate-memphis |
+| **Relationships** | Connections, overlaps, influences | venn-diagram, hub-spoke, jigsaw | craft-handmade, subway-map |
+| **Data/Metrics** | Statistics, KPIs, measurements | dashboard, periodic-table | corporate-memphis, technical-schematic |
+| **Cycle/Loop** | Recurring processes, feedback loops | circular-flow | craft-handmade, technical-schematic |
+| **System/Structure** | Components, architecture, anatomy | structural-breakdown, bento-grid | technical-schematic, ikea-manual |
+| **Journey/Narrative** | Stories, user flows, milestones | winding-roadmap, story-mountain | storybook-watercolor, comic-strip |
+| **Overview/Summary** | Multiple topics, feature highlights | bento-grid, periodic-table | chalkboard, bold-graphic |
+
+### 2. Learning Objective Identification
+
+Every infographic should have 1-3 clear learning objectives.
+
+**Good Learning Objectives**:
+- Specific and measurable
+- Focus on what the viewer will understand, not just see
+- Written from the viewer's perspective
+
+**Format**: "After viewing this infographic, the viewer will understand..."
+
+| Content Aspect | Objective Type |
+|----------------|----------------|
+| Core concept | "...what [topic] is and why it matters" |
+| Process | "...how to [accomplish something]" |
+| Comparison | "...the key differences between [A] and [B]" |
+| Relationships | "...how [elements] connect to each other" |
+| Data | "...the significance of [key statistics]" |
+
+### 3. Audience Analysis
+
+| Factor | Questions | Impact |
+|--------|-----------|--------|
+| **Knowledge Level** | What do they already know? | Determines complexity depth |
+| **Context** | Why are they viewing this? | Determines emphasis points |
+| **Expectations** | What do they hope to learn? | Determines success criteria |
+| **Visual Preferences** | Professional, playful, technical? | Influences style choice |
+
+### 4. Complexity Assessment
+
+| Level | Indicators | Layout Recommendation |
+|-------|------------|----------------------|
+| **Simple** (3-5 points) | Few main concepts, clear relationships | sparse layouts, single focus |
+| **Moderate** (6-8 points) | Multiple concepts, some relationships | balanced layouts, clear sections |
+| **Complex** (9+ points) | Many concepts, intricate relationships | dense layouts, multiple sections |
+
+### 5. Visual Opportunity Mapping
+
+Identify what can be shown rather than told:
+
+| Content Element | Visual Treatment |
+|-----------------|------------------|
+| Numbers/Statistics | Large, highlighted numerals |
+| Comparisons | Side-by-side, split screen |
+| Processes | Arrows, numbered steps, flow |
+| Hierarchies | Pyramids, layers, size differences |
+| Relationships | Lines, connections, overlapping shapes |
+| Categories | Color coding, grouping, sections |
+| Timelines | Horizontal/vertical progression |
+| Quotes | Callout boxes, quotation marks |
+
+### 6. Data Verbatim Extraction
+
+**Critical**: All factual information must be preserved exactly as written in the source.
+
+| Data Type | Handling Rule |
+|-----------|---------------|
+| **Statistics** | Copy exactly: "73%" not "about 70%" |
+| **Quotes** | Copy word-for-word with attribution |
+| **Names** | Preserve exact spelling |
+| **Dates** | Keep original format |
+| **Technical Terms** | Do not simplify or substitute |
+| **Lists** | Preserve order and wording |
+
+**Never**:
+- Round numbers
+- Paraphrase quotes
+- Substitute simpler words
+- Add implied information
+- Remove context that affects meaning
+
+## Output Format
+
+Save analysis results to `analysis.md`:
+
+```yaml
+---
+title: "[Main topic title]"
+topic: "[educational/technical/business/creative/etc.]"
+data_type: "[timeline/hierarchy/comparison/process/etc.]"
+complexity: "[simple/moderate/complex]"
+point_count: [number of main points]
+source_language: "[detected language]"
+user_language: "[user's language]"
+---
+
+## Main Topic
+[1-2 sentence summary of what this content is about]
+
+## Learning Objectives
+After viewing this infographic, the viewer should understand:
+1. [Primary objective]
+2. [Secondary objective]
+3. [Tertiary objective if applicable]
+
+## Target Audience
+- **Knowledge Level**: [Beginner/Intermediate/Expert]
+- **Context**: [Why they're viewing this]
+- **Expectations**: [What they hope to learn]
+
+## Content Type Analysis
+- **Data Structure**: [How information relates to itself]
+- **Key Relationships**: [What connects to what]
+- **Visual Opportunities**: [What can be shown rather than told]
+
+## Key Data Points (Verbatim)
+[All statistics, quotes, and critical facts exactly as they appear in source]
+- "[Exact data point 1]"
+- "[Exact data point 2]"
+- "[Exact quote with attribution]"
+
+## Layout × Style Signals
+- Content type: [type] → suggests [layout]
+- Tone: [tone] → suggests [style]
+- Audience: [audience] → suggests [style]
+- Complexity: [level] → suggests [layout density]
+
+## Design Instructions (from user input)
+[Any style, color, layout, or visual preferences extracted from user's steering prompt]
+
+## Recommended Combinations
+1. **[Layout] + [Style]** (Recommended): [Brief rationale]
+2. **[Layout] + [Style]**: [Brief rationale]
+3. **[Layout] + [Style]**: [Brief rationale]
+```
+
+## Analysis Checklist
+
+Before proceeding to structured content generation:
+
+- [ ] Have I read the entire source document?
+- [ ] Can I summarize the main topic in 1-2 sentences?
+- [ ] Have I identified 1-3 clear learning objectives?
+- [ ] Do I understand the target audience?
+- [ ] Have I classified the content type correctly?
+- [ ] Have I extracted all data points verbatim?
+- [ ] Have I identified visual opportunities?
+- [ ] Have I extracted design instructions from user input?
+- [ ] Have I recommended 3 layout×style combinations?

skills/baoyu-infographic/references/base-prompt.md

@@ -0,0 +1,43 @@
+Create a professional infographic following these specifications:
+
+## Image Specifications
+
+- **Type**: Infographic
+- **Layout**: {{LAYOUT}}
+- **Style**: {{STYLE}}
+- **Aspect Ratio**: {{ASPECT_RATIO}}
+- **Language**: {{LANGUAGE}}
+
+## Core Principles
+
+- Follow the layout structure precisely for information architecture
+- Apply style aesthetics consistently throughout
+- If content involves sensitive or copyrighted figures, create stylistically similar alternatives
+- Keep information concise, highlight keywords and core concepts
+- Use ample whitespace for visual clarity
+- Maintain clear visual hierarchy
+
+## Text Requirements
+
+- All text must match the specified style treatment
+- Main titles should be prominent and readable
+- Key concepts should be visually emphasized
+- Labels should be clear and appropriately sized
+- Use the specified language for all text content
+
+## Layout Guidelines
+
+{{LAYOUT_GUIDELINES}}
+
+## Style Guidelines
+
+{{STYLE_GUIDELINES}}
+
+---
+
+Generate the infographic based on the content below:
+
+{{CONTENT}}
+
+Text labels (in {{LANGUAGE}}):
+{{TEXT_LABELS}}

skills/baoyu-infographic/references/layouts/bento-grid.md

@@ -0,0 +1,41 @@
+# bento-grid
+
+Modular grid layout with varied cell sizes, like a bento box.
+
+## Structure
+
+- Grid of rectangular cells
+- Mixed cell sizes (1x1, 2x1, 1x2, 2x2)
+- No strict symmetry required
+- Hero cell for main point
+- Supporting cells around it
+
+## Best For
+
+- Multiple topic overview
+- Feature highlights
+- Dashboard summaries
+- Portfolio displays
+- Mixed content types
+
+## Visual Elements
+
+- Clear cell boundaries
+- Varied cell backgrounds
+- Icons or illustrations per cell
+- Consistent padding/margins
+- Visual hierarchy through size
+
+## Text Placement
+
+- Main title at top
+- Cell titles within each cell
+- Brief content per cell
+- Minimal text, maximum visual
+- CTA or summary in prominent cell
+
+## Recommended Pairings
+
+- `cartoon-hand-drawn`: Friendly overviews (default)
+- `corporate-memphis`: Business summaries
+- `pixel-art`: Retro feature grids

skills/baoyu-infographic/references/layouts/binary-comparison.md

@@ -0,0 +1,48 @@
+# binary-comparison
+
+Side-by-side comparison of two items, states, or concepts.
+
+## Structure
+
+- Vertical divider splitting image in half
+- Left side: Item A / Before / Pro
+- Right side: Item B / After / Con
+- Mirrored layout for easy comparison
+- Clear visual distinction between sides
+
+## Variants
+
+| Variant | Focus | Visual Emphasis |
+|---------|-------|-----------------|
+| **Before-After** | Transformation over time | Temporal change, improvement |
+| **A vs B** | Feature comparison | Direct contrast, differences |
+| **Pro-Con** | Advantages/disadvantages | Balanced evaluation |
+
+## Best For
+
+- Before/after transformations
+- Product or option comparisons
+- Pros and cons analysis
+- Old vs new comparisons
+- Two perspectives on a topic
+
+## Visual Elements
+
+- Strong vertical dividing line or gradient
+- Contrasting colors per side
+- Matching element positions for comparison
+- VS symbol or divider decoration
+- Transformation arrow for before-after
+
+## Text Placement
+
+- Main title centered at top
+- Side labels (A/B, Before/After)
+- Corresponding points aligned horizontally
+- Summary at bottom if needed
+
+## Recommended Pairings
+
+- `corporate-memphis`: Business comparisons
+- `bold-graphic`: High-contrast dramatic comparisons
+- `craft-handmade`: Friendly explainers

skills/baoyu-infographic/references/layouts/bridge.md

@@ -0,0 +1,41 @@
+# bridge
+
+Gap-crossing structure connecting problem to solution or current to future state.
+
+## Structure
+
+- Left side: current state/problem
+- Right side: desired state/solution
+- Bridge element spanning the gap
+- Gap representing challenge/obstacle
+- Bridge elements as steps/methods
+
+## Best For
+
+- Problem to solution journeys
+- Current vs future state
+- Gap analysis
+- Transformation bridges
+- Strategic initiatives
+
+## Visual Elements
+
+- Two distinct platforms/sides
+- Visible gap or chasm
+- Bridge structure with supports
+- Icons representing each side
+- Stepping stones or bridge planks
+
+## Text Placement
+
+- Title at top
+- Left label (From/Problem/Current)
+- Right label (To/Solution/Future)
+- Bridge elements labeled
+- Gap description below
+
+## Recommended Pairings
+
+- `cartoon-hand-drawn`: Friendly journeys
+- `corporate-memphis`: Business transformations
+- `isometric-3d`: Technical transitions

skills/baoyu-infographic/references/layouts/circular-flow.md

@@ -0,0 +1,41 @@
+# circular-flow
+
+Cyclic process showing continuous or recurring steps.
+
+## Structure
+
+- Circular arrangement
+- Steps around the circle
+- Arrows showing direction
+- No clear start/end (continuous)
+- Center can hold main concept
+
+## Best For
+
+- Recurring processes
+- Feedback loops
+- Lifecycle stages
+- Continuous improvement
+- Natural cycles
+
+## Visual Elements
+
+- Circle or ring shape
+- Directional arrows
+- Step nodes evenly spaced
+- Icons per step
+- Optional center element
+
+## Text Placement
+
+- Title at top
+- Step labels at each node
+- Brief descriptions near nodes
+- Center concept if applicable
+- Cycle name
+
+## Recommended Pairings
+
+- `cartoon-hand-drawn`: Friendly cycles
+- `corporate-memphis`: Business processes
+- `subway-map`: Transit-style cycles

skills/baoyu-infographic/references/layouts/comic-strip.md

@@ -0,0 +1,41 @@
+# comic-strip
+
+Sequential narrative panels telling a story or explaining a concept.
+
+## Structure
+
+- Multiple panels in sequence
+- Left-to-right, top-to-bottom reading
+- Characters or subjects in scenes
+- Speech/thought bubbles
+- Panel borders clearly defined
+
+## Best For
+
+- Storytelling explanations
+- User journey narratives
+- Scenario illustrations
+- Step sequences with context
+- Before/during/after stories
+
+## Visual Elements
+
+- Panel frames
+- Speech and thought bubbles
+- Sound effects (optional)
+- Characters with expressions
+- Scene backgrounds
+
+## Text Placement
+
+- Title at top
+- Dialogue in speech bubbles
+- Narration in caption boxes
+- Sound effects integrated
+- Panel numbers if needed
+
+## Recommended Pairings
+
+- `graphic-novel`: Dramatic narratives
+- `kawaii`: Cute character stories
+- `cartoon-hand-drawn`: Friendly explanations

skills/baoyu-infographic/references/layouts/comparison-matrix.md

@@ -0,0 +1,41 @@
+# comparison-matrix
+
+Grid-based multi-factor comparison across multiple items.
+
+## Structure
+
+- Table/grid layout
+- Rows: items being compared
+- Columns: comparison criteria
+- Cells: scores, checks, or values
+- Header row and column clearly marked
+
+## Best For
+
+- Product feature comparisons
+- Tool/software evaluations
+- Multi-criteria decisions
+- Specification sheets
+- Rating comparisons
+
+## Visual Elements
+
+- Clear grid lines or cell boundaries
+- Checkmarks, X marks, or scores in cells
+- Color coding for quick scanning
+- Icons for criteria categories
+- Highlight for recommended option
+
+## Text Placement
+
+- Title at top
+- Item names in first column
+- Criteria in header row
+- Brief values in cells
+- Legend if using symbols
+
+## Recommended Pairings
+
+- `corporate-memphis`: Business tool comparisons
+- `ui-wireframe`: Technical feature matrices
+- `blueprint`: Specification comparisons

skills/baoyu-infographic/references/layouts/dashboard.md

@@ -0,0 +1,41 @@
+# dashboard
+
+Multi-metric display with charts, numbers, and KPI indicators.
+
+## Structure
+
+- Multiple data widgets
+- Charts, graphs, numbers
+- Grid or modular layout
+- Key metrics prominent
+- Status indicators
+
+## Best For
+
+- KPI summaries
+- Performance metrics
+- Analytics overviews
+- Status reports
+- Data snapshots
+
+## Visual Elements
+
+- Chart types (bar, line, pie, gauge)
+- Big numbers for KPIs
+- Trend arrows (up/down)
+- Color-coded status (green/red)
+- Clean data visualization
+
+## Text Placement
+
+- Title at top
+- Widget titles above each section
+- Metric labels and values
+- Units clearly shown
+- Time period indicated
+
+## Recommended Pairings
+
+- `corporate-memphis`: Business dashboards
+- `ui-wireframe`: Technical dashboards
+- `cyberpunk-neon`: Futuristic displays

skills/baoyu-infographic/references/layouts/funnel.md

@@ -0,0 +1,41 @@
+# funnel
+
+Narrowing stages showing conversion, filtering, or refinement process.
+
+## Structure
+
+- Wide top (input/start)
+- Narrow bottom (output/result)
+- Horizontal layers for stages
+- Progressive narrowing
+- 3-6 stages typically
+
+## Best For
+
+- Sales/marketing funnels
+- Conversion processes
+- Filtering/selection
+- Recruitment pipelines
+- Decision processes
+
+## Visual Elements
+
+- Funnel shape clearly defined
+- Distinct colors per stage
+- Width indicates volume/quantity
+- Stage icons or symbols
+- Numbers/percentages per stage
+
+## Text Placement
+
+- Title at top
+- Stage names inside or beside
+- Metrics/numbers per stage
+- Input label at top
+- Output label at bottom
+
+## Recommended Pairings
+
+- `corporate-memphis`: Marketing funnels
+- `isometric-3d`: Technical pipelines
+- `cartoon-hand-drawn`: Educational funnels

skills/baoyu-infographic/references/layouts/hierarchical-layers.md

@@ -0,0 +1,48 @@
+# hierarchical-layers
+
+Nested layers showing levels of importance, influence, or proximity.
+
+## Structure
+
+- Multiple layers from core to periphery
+- Core/top: most important/central
+- Outer/bottom: decreasing importance
+- 3-7 levels typically
+- Clear boundaries between levels
+
+## Variants
+
+| Variant | Shape | Visual Emphasis |
+|---------|-------|-----------------|
+| **Pyramid** | Triangle, vertical | Top-down hierarchy, quantity |
+| **Concentric** | Rings, radial | Center-out influence, proximity |
+
+## Best For
+
+- Maslow's hierarchy style concepts
+- Priority and importance levels
+- Spheres of influence
+- Organizational structures
+- Stakeholder analysis
+
+## Visual Elements
+
+- Distinct color per level
+- Icons or illustrations per tier
+- Size indicates importance/quantity
+- Labels inside or beside layers
+- Decorative apex/center element
+
+## Text Placement
+
+- Title at top or side
+- Level names inside each tier
+- Brief descriptions outside
+- Quantities or percentages if relevant
+- Legend for color meanings
+
+## Recommended Pairings
+
+- `craft-handmade`: Playful layered concepts
+- `corporate-memphis`: Business hierarchies
+- `technical-schematic`: Technical 3D pyramids

skills/baoyu-infographic/references/layouts/hub-spoke.md

@@ -0,0 +1,41 @@
+# hub-spoke
+
+Central concept with radiating connections to related items.
+
+## Structure
+
+- Central hub (main concept)
+- Spokes radiating outward
+- Nodes at spoke ends (related concepts)
+- Even or weighted distribution
+- Optional secondary connections
+
+## Best For
+
+- Central theme with components
+- Product features around core
+- Team roles around project
+- Ecosystem mapping
+- Mind maps
+
+## Visual Elements
+
+- Prominent central hub
+- Clear spoke lines
+- Consistent node styling
+- Icons representing each spoke item
+- Optional grouping colors
+
+## Text Placement
+
+- Title at top
+- Core concept in center hub
+- Spoke item labels at nodes
+- Brief descriptions near nodes
+- Connection labels on spokes if needed
+
+## Recommended Pairings
+
+- `cartoon-hand-drawn`: Friendly concept maps
+- `corporate-memphis`: Business ecosystems
+- `subway-map`: Network-style connections

skills/baoyu-infographic/references/layouts/iceberg.md

@@ -0,0 +1,41 @@
+# iceberg
+
+Surface vs hidden depths, visible vs underlying factors.
+
+## Structure
+
+- Waterline dividing visible/hidden
+- Tip above water (obvious/surface)
+- Larger mass below (hidden/deep)
+- Proportional to emphasize hidden depth
+- Optional layers within underwater section
+
+## Best For
+
+- Surface vs root causes
+- Visible vs invisible work
+- Symptoms vs underlying issues
+- Public vs private aspects
+- Known vs unknown factors
+
+## Visual Elements
+
+- Clear water/surface line
+- Above: smaller, brighter
+- Below: larger, darker/deeper
+- Wave or water texture
+- Gradient showing depth
+
+## Text Placement
+
+- Title at top
+- Surface items above waterline
+- Hidden items below, larger
+- Waterline label optional
+- Depth indicators for layers
+
+## Recommended Pairings
+
+- `cartoon-hand-drawn`: Friendly metaphor
+- `storybook-watercolor`: Artistic depth
+- `graphic-novel`: Dramatic revelation

skills/baoyu-infographic/references/layouts/isometric-map.md

@@ -0,0 +1,41 @@
+# isometric-map
+
+3D-style spatial layout showing locations, relationships, or journey through space.
+
+## Structure
+
+- Isometric 3D perspective
+- Locations as buildings/landmarks
+- Paths connecting locations
+- Spatial relationships visible
+- Bird's eye view angle
+
+## Best For
+
+- Office/campus layouts
+- City/ecosystem maps
+- User journey maps
+- System architecture
+- Process landscapes
+
+## Visual Elements
+
+- Consistent isometric angle (30°)
+- 3D buildings or objects
+- Pathways and roads
+- Labels floating above
+- Mini scenes at locations
+
+## Text Placement
+
+- Title at top corner
+- Location labels above objects
+- Path labels along routes
+- Legend for symbols
+- Scale indicator if relevant
+
+## Recommended Pairings
+
+- `isometric-3d`: Clean technical maps
+- `pixel-art`: Retro game-style maps
+- `lego-brick`: Playful location maps

skills/baoyu-infographic/references/layouts/jigsaw.md

@@ -0,0 +1,41 @@
+# jigsaw
+
+Interlocking puzzle pieces showing how parts fit together.
+
+## Structure
+
+- Puzzle pieces that interlock
+- Each piece represents a component
+- Connections show relationships
+- Can be assembled or exploded view
+- Missing piece highlights gaps
+
+## Best For
+
+- Component relationships
+- Team/skill fit
+- Strategy pieces
+- Integration concepts
+- Completeness assessments
+
+## Visual Elements
+
+- Classic puzzle piece shapes
+- Distinct colors per piece
+- Interlocking edges visible
+- Icons or labels per piece
+- Optional missing piece
+
+## Text Placement
+
+- Title at top
+- Piece labels inside or beside
+- Connection descriptions
+- Missing piece explanation
+- Assembly context
+
+## Recommended Pairings
+
+- `cartoon-hand-drawn`: Friendly integration concepts
+- `paper-cutout`: Tactile puzzle feel
+- `corporate-memphis`: Business strategy pieces

skills/baoyu-infographic/references/layouts/linear-progression.md

@@ -0,0 +1,48 @@
+# linear-progression
+
+Sequential progression showing steps, timeline, or chronological events.
+
+## Structure
+
+- Linear arrangement (horizontal or vertical)
+- Nodes/markers at key points
+- Connecting line or path between nodes
+- Clear start and end points
+- Directional flow indicators
+
+## Variants
+
+| Variant | Focus | Visual Emphasis |
+|---------|-------|-----------------|
+| **Timeline** | Chronological events, dates | Time markers, period labels |
+| **Process** | Action steps, numbered sequence | Step numbers, action icons |
+
+## Best For
+
+- Step-by-step tutorials and how-tos
+- Historical timelines and evolution
+- Project milestones and roadmaps
+- Workflow documentation
+- Onboarding processes
+
+## Visual Elements
+
+- Numbered steps or date markers
+- Arrows or connectors showing direction
+- Icons representing each step/event
+- Consistent node spacing
+- Progress indicators optional
+
+## Text Placement
+
+- Title at top
+- Step/event titles at each node
+- Brief descriptions below nodes
+- Dates or numbers clearly visible
+
+## Recommended Pairings
+
+- `craft-handmade`: Friendly tutorials and timelines
+- `ikea-manual`: Clean assembly instructions
+- `corporate-memphis`: Business process flows
+- `aged-academia`: Historical discoveries

skills/baoyu-infographic/references/layouts/periodic-table.md

@@ -0,0 +1,41 @@
+# periodic-table
+
+Grid of categorized elements with consistent cell formatting.
+
+## Structure
+
+- Rectangular grid
+- Each cell is one element
+- Color-coded categories
+- Consistent cell format
+- Optional grouping gaps
+
+## Best For
+
+- Categorized collections
+- Tool/resource catalogs
+- Skill matrices
+- Element collections
+- Reference guides
+
+## Visual Elements
+
+- Uniform cell sizes
+- Category colors
+- Symbol/abbreviation prominent
+- Small icon per cell
+- Category legend
+
+## Text Placement
+
+- Title at top
+- Cell: symbol, name, brief info
+- Category names in legend
+- Optional row/column headers
+- Footnotes for special cases
+
+## Recommended Pairings
+
+- `pop-art`: Vibrant element grids
+- `pixel-art`: Retro collection displays
+- `corporate-memphis`: Business tool catalogs

skills/baoyu-infographic/references/layouts/story-mountain.md

@@ -0,0 +1,41 @@
+# story-mountain
+
+Plot structure visualization showing rising action, climax, and resolution.
+
+## Structure
+
+- Mountain/arc shape
+- Rising slope (build-up)
+- Peak (climax)
+- Falling slope (resolution)
+- Start and end at base level
+
+## Best For
+
+- Narrative structures
+- Project lifecycles
+- Tension/release patterns
+- Emotional journeys
+- Campaign arcs
+
+## Visual Elements
+
+- Mountain or arc curve
+- Points along the path
+- Climax visually emphasized
+- Slope steepness meaningful
+- Base camps or milestones
+
+## Text Placement
+
+- Title at top
+- Stage labels along path
+- Climax prominently labeled
+- Brief descriptions at points
+- Start/end clearly marked
+
+## Recommended Pairings
+
+- `storybook-watercolor`: Narrative journeys
+- `cartoon-hand-drawn`: Educational plot diagrams
+- `graphic-novel`: Dramatic story arcs

skills/baoyu-infographic/references/layouts/structural-breakdown.md

@@ -0,0 +1,48 @@
+# structural-breakdown
+
+Internal structure visualization with labeled parts or layers.
+
+## Structure
+
+- Central subject (object, system, body)
+- Parts or layers clearly shown
+- Labels with callout lines
+- Exploded or cutaway view
+- Optional zoomed detail sections
+
+## Variants
+
+| Variant | View Type | Visual Emphasis |
+|---------|-----------|-----------------|
+| **Exploded** | Parts separated outward | Component relationships |
+| **Cross-section** | Sliced/cutaway view | Internal layers, composition |
+
+## Best For
+
+- Product part breakdowns
+- Anatomy explanations
+- System components
+- Device teardowns
+- Material composition
+
+## Visual Elements
+
+- Main subject clearly rendered
+- Callout lines with dots/arrows
+- Label boxes at endpoints
+- Numbered parts optionally
+- Layer boundaries or separation
+
+## Text Placement
+
+- Title at top
+- Part/layer labels at callouts
+- Brief descriptions in boxes
+- Legend for numbered systems
+- Depth/thickness if relevant
+
+## Recommended Pairings
+
+- `technical-schematic`: Technical schematics
+- `aged-academia`: Classic anatomical style
+- `craft-handmade`: Friendly breakdowns

skills/baoyu-infographic/references/layouts/tree-branching.md

@@ -0,0 +1,41 @@
+# tree-branching
+
+Hierarchical structure branching from root to leaves, showing categories and subcategories.
+
+## Structure
+
+- Root/trunk at top or left
+- Branches splitting into sub-branches
+- Leaves as terminal nodes
+- Clear parent-child relationships
+- Balanced or organic branching
+
+## Best For
+
+- Taxonomies and classifications
+- Decision trees
+- Organizational charts
+- File/folder structures
+- Family trees
+
+## Visual Elements
+
+- Connecting lines showing relationships
+- Nodes at branch points
+- Icons or labels at each node
+- Color coding by branch
+- Visual weight decreasing toward leaves
+
+## Text Placement
+
+- Title at top
+- Root concept prominently labeled
+- Branch and leaf labels
+- Optional descriptions at key nodes
+- Legend for categories
+
+## Recommended Pairings
+
+- `cartoon-hand-drawn`: Friendly taxonomies
+- `da-vinci-notebook`: Scientific classifications
+- `origami`: Geometric tree structures

skills/baoyu-infographic/references/layouts/venn-diagram.md

@@ -0,0 +1,41 @@
+# venn-diagram
+
+Overlapping circles showing relationships, commonalities, and differences.
+
+## Structure
+
+- 2-3 overlapping circles
+- Each circle is a category/concept
+- Overlaps show shared elements
+- Center shows common to all
+- Unique areas for exclusives
+
+## Best For
+
+- Concept relationships
+- Skill overlaps
+- Market segments
+- Comparative analysis
+- Finding common ground
+
+## Visual Elements
+
+- Translucent circle fills
+- Clear overlap regions
+- Distinct colors per circle
+- Icons in regions
+- Boundary labels
+
+## Text Placement
+
+- Title at top
+- Circle labels outside or on edge
+- Items in appropriate regions
+- Overlap region labels
+- Legend if needed
+
+## Recommended Pairings
+
+- `cartoon-hand-drawn`: Friendly concept overlaps
+- `corporate-memphis`: Business segment analysis
+- `pop-art`: High-contrast comparisons

skills/baoyu-infographic/references/layouts/winding-roadmap.md

@@ -0,0 +1,41 @@
+# winding-roadmap
+
+Curved path showing journey with milestones and checkpoints.
+
+## Structure
+
+- S-curve or winding path
+- Milestones along the path
+- Start and destination points
+- Side elements (obstacles, helpers)
+- Progress indicators
+
+## Best For
+
+- Project roadmaps
+- Career paths
+- Customer journeys
+- Learning paths
+- Strategy timelines
+
+## Visual Elements
+
+- Curving road or river
+- Milestone markers/flags
+- Scene elements along path
+- Vehicle/character on journey
+- Destination landmark
+
+## Text Placement
+
+- Title at top
+- Milestone labels at each point
+- Path section names
+- Destination description
+- Optional timeline indicators
+
+## Recommended Pairings
+
+- `storybook-watercolor`: Whimsical journeys
+- `cartoon-hand-drawn`: Friendly roadmaps
+- `isometric-3d`: Technical project paths

skills/baoyu-infographic/references/structured-content-template.md

@@ -0,0 +1,244 @@
+# Structured Content Template
+
+Template for generating structured infographic content that informs the visual designer.
+
+## Purpose
+
+This document bridges content analysis and visual design:
+- Transforms source material into designer-ready format
+- Organizes learning objectives into visual sections
+- Preserves all source data verbatim
+- Separates content from design instructions
+
+## Instructional Design Process
+
+### Phase 1: High-Level Outline
+
+1. **Title**: Capture the essence in a compelling headline
+2. **Overview**: Brief description (1-2 sentences)
+3. **Learning Objectives**: List what the viewer will understand
+
+### Phase 2: Section Development
+
+For each learning objective:
+
+1. **Key Concept**: One-sentence summary of the section
+2. **Content**: Points extracted verbatim from source
+3. **Visual Element**: What should be shown visually
+4. **Text Labels**: Exact text for headlines, subheads, labels
+
+### Phase 3: Data Integrity Check
+
+Verify all source data is:
+- Copied exactly (no paraphrasing)
+- Attributed correctly (for quotes)
+- Formatted consistently
+
+## Critical Rules
+
+| Rule | Requirement | Example |
+|------|-------------|---------|
+| **Output format** | Markdown only | Use proper headers, lists, code blocks |
+| **Tone** | Expert trainer | Knowledgeable, clear, encouraging |
+| **No new information** | Only source content | Don't add examples not in source |
+| **Verbatim data** | Exact copies | "73% increase" not "significant increase" |
+
+## Structured Content Format
+
+```markdown
+# [Infographic Title]
+
+## Overview
+[Brief description of what this infographic conveys - 1-2 sentences]
+
+## Learning Objectives
+The viewer will understand:
+1. [Primary objective]
+2. [Secondary objective]
+3. [Tertiary objective if applicable]
+
+---
+
+## Section 1: [Section Title]
+
+**Key Concept**: [One-sentence summary of this section]
+
+**Content**:
+- [Point 1 - verbatim from source]
+- [Point 2 - verbatim from source]
+- [Point 3 - verbatim from source]
+
+**Visual Element**: [Description of what to show visually]
+- Type: [icon/chart/illustration/diagram/photo]
+- Subject: [what it depicts]
+- Treatment: [how it should be presented]
+
+**Text Labels**:
+- Headline: "[Exact text for headline]"
+- Subhead: "[Exact text for subhead]"
+- Labels: "[Label 1]", "[Label 2]", "[Label 3]"
+
+---
+
+## Section 2: [Section Title]
+
+**Key Concept**: [One-sentence summary]
+
+**Content**:
+- [Point 1]
+- [Point 2]
+
+**Visual Element**: [Description]
+
+**Text Labels**:
+- Headline: "[text]"
+- Labels: "[Label 1]", "[Label 2]"
+
+---
+
+[Continue for each section...]
+
+---
+
+## Data Points (Verbatim)
+
+All statistics, numbers, and quotes exactly as they appear in source:
+
+### Statistics
+- "[Exact statistic 1]"
+- "[Exact statistic 2]"
+- "[Exact statistic 3]"
+
+### Quotes
+- "[Exact quote]" — [Attribution]
+
+### Key Terms
+- **[Term 1]**: [Definition from source]
+- **[Term 2]**: [Definition from source]
+
+---
+
+## Design Instructions
+
+Extracted from user's steering prompt:
+
+### Style Preferences
+- [Any color preferences]
+- [Any mood/aesthetic preferences]
+- [Any artistic style preferences]
+
+### Layout Preferences
+- [Any structure preferences]
+- [Any organization preferences]
+
+### Other Requirements
+- [Any other visual requirements from user]
+- [Target platform if specified]
+- [Brand guidelines if any]
+```
+
+## Section Types by Content
+
+### For Process/Steps
+
+```markdown
+## Section N: Step N - [Step Title]
+
+**Key Concept**: [What this step accomplishes]
+
+**Content**:
+- Action: [What to do]
+- Details: [How to do it]
+- Note: [Important consideration]
+
+**Visual Element**:
+- Type: numbered step icon
+- Subject: [visual representing the action]
+- Arrow: leads to next step
+
+**Text Labels**:
+- Headline: "Step N: [Title]"
+- Action: "[Imperative verb + object]"
+```
+
+### For Comparison
+
+```markdown
+## Section N: [Item A] vs [Item B]
+
+**Key Concept**: [What distinguishes them]
+
+**Content**:
+| Aspect | [Item A] | [Item B] |
+|--------|----------|----------|
+| [Factor 1] | [Value] | [Value] |
+| [Factor 2] | [Value] | [Value] |
+
+**Visual Element**:
+- Type: split comparison
+- Left: [Item A representation]
+- Right: [Item B representation]
+
+**Text Labels**:
+- Headline: "[Item A] vs [Item B]"
+- Left label: "[Item A name]"
+- Right label: "[Item B name]"
+```
+
+### For Hierarchy
+
+```markdown
+## Section N: [Level Name]
+
+**Key Concept**: [What this level represents]
+
+**Content**:
+- Position: [Top/Middle/Bottom]
+- Priority: [Importance level]
+- Contains: [Elements at this level]
+
+**Visual Element**:
+- Type: layer/tier
+- Size: [relative to other levels]
+- Position: [where in hierarchy]
+
+**Text Labels**:
+- Level title: "[Name]"
+- Description: "[Brief description]"
+```
+
+### For Data/Statistics
+
+```markdown
+## Section N: [Metric Name]
+
+**Key Concept**: [What this data shows]
+
+**Content**:
+- Value: [Exact number/percentage]
+- Context: [What it means]
+- Comparison: [Benchmark if any]
+
+**Visual Element**:
+- Type: [chart/number highlight/gauge]
+- Emphasis: [how to draw attention]
+
+**Text Labels**:
+- Main number: "[Exact value]"
+- Label: "[Metric name]"
+- Context: "[Brief context]"
+```
+
+## Quality Checklist
+
+Before finalizing structured content:
+
+- [ ] Title captures the main message
+- [ ] Learning objectives are clear and measurable
+- [ ] Each section maps to an objective
+- [ ] All content is verbatim from source
+- [ ] Visual elements are clearly described
+- [ ] Text labels are specified exactly
+- [ ] Data points are collected and verified
+- [ ] Design instructions are separated
+- [ ] No new information has been added

skills/baoyu-infographic/references/styles/aged-academia.md

@@ -0,0 +1,36 @@
+# aged-academia
+
+Historical scientific illustration with aged paper aesthetic.
+
+## Color Palette
+
+- Primary: Sepia brown (#704214), aged ink, muted earth tones
+- Background: Parchment (#F4E4BC), yellowed paper texture
+- Accents: Faded red annotations, iron gall ink spots
+
+## Variants
+
+| Variant | Focus | Visual Emphasis |
+|---------|-------|-----------------|
+| **Notebook** | Personal sketches, inventions | Cursive notes, margin annotations |
+| **Specimen** | Scientific classification | Numbered diagrams, Latin labels |
+
+## Visual Elements
+
+- Aged paper texture overlay
+- Detailed cross-hatching and line work
+- Scientific illustration precision
+- Study notes and annotations
+- Specimen plate or sketch aesthetic
+- Numbered diagram elements
+
+## Typography
+
+- Handwritten cursive or serif fonts
+- Scientific annotations
+- Small caps for labels
+- Italics for scientific names
+
+## Best For
+
+Scientific education, biology topics, historical explanations, inventions, nature documentation

skills/baoyu-infographic/references/styles/bold-graphic.md

@@ -0,0 +1,36 @@
+# bold-graphic
+
+High-contrast comic style with bold outlines and dramatic visuals.
+
+## Color Palette
+
+- Primary: Bold primaries - red, yellow, blue, black
+- Background: White, halftone patterns, dramatic shadows
+- Accents: Spot colors, neon highlights
+
+## Variants
+
+| Variant | Focus | Visual Emphasis |
+|---------|-------|-----------------|
+| **Graphic-novel** | Dramatic narratives | Action lines, hatching, panels |
+| **Pop-art** | High-energy impact | Halftone dots, Warhol repetition |
+
+## Visual Elements
+
+- Bold black outlines
+- High contrast compositions
+- Halftone dot patterns
+- Comic panel borders optional
+- Action lines and motion
+- Speech bubbles and sound effects
+
+## Typography
+
+- Comic book lettering
+- Impact fonts for emphasis
+- POW/BANG effects for pop-art
+- Caption boxes for narrative
+
+## Best For
+
+Attention-grabbing content, dramatic narratives, pop culture, marketing, high-energy presentations

skills/baoyu-infographic/references/styles/chalkboard.md

@@ -0,0 +1,61 @@
+# chalkboard
+
+Black chalkboard background with colorful chalk drawing style
+
+## Design Aesthetic
+
+Classic classroom chalkboard aesthetic with hand-drawn chalk illustrations. Nostalgic educational feel with imperfect, sketchy lines that capture the warmth of traditional teaching. Colorful chalk creates visual hierarchy while maintaining the authentic chalkboard experience.
+
+## Background
+
+- Color: Chalkboard Black (#1A1A1A) or Dark Green-Black (#1C2B1C)
+- Texture: Realistic chalkboard texture with subtle scratches, dust particles, and faint eraser marks
+
+## Typography
+
+Hand-drawn chalk lettering style with visible chalk texture. Imperfect baseline adds authenticity. White or bright colored chalk for emphasis.
+
+## Color Palette
+
+| Role | Color | Hex | Usage |
+|------|-------|-----|-------|
+| Background | Chalkboard Black | #1A1A1A | Primary background |
+| Alt Background | Green-Black | #1C2B1C | Traditional green board |
+| Primary Text | Chalk White | #F5F5F5 | Main text, outlines |
+| Accent 1 | Chalk Yellow | #FFE566 | Highlights, emphasis |
+| Accent 2 | Chalk Pink | #FF9999 | Secondary highlights |
+| Accent 3 | Chalk Blue | #66B3FF | Diagrams, links |
+| Accent 4 | Chalk Green | #90EE90 | Success, nature |
+| Accent 5 | Chalk Orange | #FFB366 | Warnings, energy |
+
+## Visual Elements
+
+- Hand-drawn chalk illustrations with sketchy, imperfect lines
+- Chalk dust effects around text and key elements
+- Doodles: stars, arrows, underlines, circles, checkmarks
+- Mathematical formulas and simple diagrams
+- Eraser smudges and chalk residue textures
+- Wooden frame border optional
+- Stick figures and simple icons
+- Connection lines with hand-drawn feel
+
+## Style Rules
+
+### Do
+
+- Maintain authentic chalk texture on all elements
+- Use imperfect, hand-drawn quality throughout
+- Add subtle chalk dust and smudge effects
+- Create visual hierarchy with color variety
+- Include playful doodles and annotations
+
+### Don't
+
+- Use perfect geometric shapes
+- Create clean digital-looking lines
+- Add photorealistic elements
+- Use gradients or glossy effects
+
+## Best For
+
+Educational content, tutorials, classroom themes, teaching materials, workshops, informal learning sessions, knowledge sharing

skills/baoyu-infographic/references/styles/claymation.md

@@ -0,0 +1,29 @@
+# claymation
+
+3D clay figure aesthetic with stop-motion charm
+
+## Color Palette
+
+- Primary: Saturated clay colors - bright but slightly muted
+- Background: Neutral studio backdrop, soft gradients
+- Accents: Complementary clay colors, shiny highlights
+
+## Visual Elements
+
+- Clay/plasticine texture on all objects
+- Fingerprint marks and imperfections
+- Rounded, sculpted forms
+- Soft shadows
+- Stop-motion staging
+- Miniature set aesthetic
+
+## Typography
+
+- Extruded clay letters
+- Dimensional, rounded text
+- Playful and chunky
+- Embedded in clay scenes
+
+## Best For
+
+Playful explanations, children's content, stop-motion narratives, friendly processes

skills/baoyu-infographic/references/styles/corporate-memphis.md

@@ -0,0 +1,29 @@
+# corporate-memphis
+
+Flat vector people with vibrant geometric fills
+
+## Color Palette
+
+- Primary: Bright, saturated - purple, orange, teal, yellow
+- Background: White or light pastels
+- Accents: Gradient fills, geometric patterns
+
+## Visual Elements
+
+- Flat vector illustration
+- Disproportionate human figures
+- Abstract body shapes
+- Floating geometric elements
+- No outlines, solid fills
+- Plant and object accents
+
+## Typography
+
+- Clean sans-serif
+- Bold headings
+- Professional but friendly
+- Minimal decoration
+
+## Best For
+
+Business presentations, tech products, marketing materials, corporate training

skills/baoyu-infographic/references/styles/craft-handmade.md

@@ -0,0 +1,36 @@
+# craft-handmade (DEFAULT)
+
+Hand-drawn and paper craft aesthetic with warm, organic feel.
+
+## Color Palette
+
+- Primary: Warm pastels, soft saturated colors, craft paper tones
+- Background: Light cream (#FFF8F0), textured paper (#F5F0E6)
+- Accents: Bold highlights, construction paper colors
+
+## Variants
+
+| Variant | Focus | Visual Emphasis |
+|---------|-------|-----------------|
+| **Hand-drawn** | Cartoon illustration | Simple icons, slightly imperfect lines |
+| **Paper-cutout** | Layered paper craft | Drop shadows, torn edges, texture |
+
+## Visual Elements
+
+- Hand-drawn or cut-paper quality
+- Organic, slightly imperfect shapes
+- Layered depth with shadows (paper variant)
+- Simple cartoon elements and icons
+- Ample whitespace, clean composition
+- Keywords and core concepts highlighted
+
+## Typography
+
+- Hand-drawn or casual font style
+- Clear, readable labels
+- Keywords emphasized with larger/bolder text
+- Cut-out letter style for paper variant
+
+## Best For
+
+Educational content, general explanations, friendly infographics, children's content, playful hierarchies

skills/baoyu-infographic/references/styles/cyberpunk-neon.md

@@ -0,0 +1,29 @@
+# cyberpunk-neon
+
+Neon glow on dark backgrounds, futuristic aesthetic
+
+## Color Palette
+
+- Primary: Neon pink (#FF00FF), cyan (#00FFFF), electric blue
+- Background: Deep black (#0A0A0A), dark purple gradients
+- Accents: Neon glow effects, chrome reflections
+
+## Visual Elements
+
+- Glowing neon outlines
+- Dark atmospheric backgrounds
+- Digital glitch effects
+- Circuit patterns
+- Holographic elements
+- Rain and reflections
+
+## Typography
+
+- Glowing neon text
+- Digital/tech fonts
+- Flickering effects
+- Outlined glow letters
+
+## Best For
+
+Tech futures, gaming content, digital culture, futuristic concepts, night aesthetics

skills/baoyu-infographic/references/styles/ikea-manual.md

@@ -0,0 +1,29 @@
+# ikea-manual
+
+Minimal line art assembly instruction style
+
+## Color Palette
+
+- Primary: Black lines, minimal fills
+- Background: White or cream paper
+- Accents: Red for warnings, blue for highlights
+
+## Visual Elements
+
+- Simple line drawings
+- Numbered step sequences
+- Arrow indicators
+- Exploded assembly views
+- Wordless communication
+- Stick figures for scale
+
+## Typography
+
+- Minimal text
+- Step numbers prominent
+- Universal symbols
+- Simple sans-serif when needed
+
+## Best For
+
+Step-by-step instructions, assembly guides, how-to content, universal communication

skills/baoyu-infographic/references/styles/kawaii.md

@@ -0,0 +1,29 @@
+# kawaii
+
+Japanese cute style with big eyes and pastel colors
+
+## Color Palette
+
+- Primary: Soft pastels - pink (#FFB6C1), mint (#98D8C8), lavender (#E6E6FA)
+- Background: Light pink or cream, sparkle overlays
+- Accents: Bright pops, star and heart shapes
+
+## Visual Elements
+
+- Big sparkly eyes on characters
+- Rounded, soft shapes
+- Blushing cheeks
+- Sparkles and stars scattered
+- Cute animal characters
+- Chibi proportions
+
+## Typography
+
+- Rounded, bubbly fonts
+- Cute decorations on letters
+- Hearts and stars in text
+- Soft, friendly appearance
+
+## Best For
+
+Cute tutorials, children's education, lifestyle content, character-driven explanations