chore: release v1.8.0

.claude-plugin/marketplace.json

@@ -6,7 +6,7 @@
   },
   "metadata": {
     "description": "Skills shared by Baoyu for improving daily work efficiency",
-    "version": "1.7.0"
+    "version": "1.8.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"
       ]
     },
     {

.gitignore

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

CHANGELOG.md

@@ -2,6 +2,14 @@
 
 English | [中文](./CHANGELOG.zh.md)
 
+## 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

CHANGELOG.zh.md

@@ -2,6 +2,14 @@
 
 [English](./CHANGELOG.md) | 中文
 
+## 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
 
 ### 新功能

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) |
 
@@ -111,6 +111,118 @@ Xiaohongshu (RedNote) infographic series generator. Breaks down content into 1-1
 | `comparison` | 2 sides | Before/after, pros/cons |
 | `flow` | 3-6 steps | Processes, timelines |
 
+#### 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) |
 
@@ -111,6 +111,118 @@ npx add-skill jimliu/baoyu-skills
 | `comparison` | 双栏 | 对比、优劣 |
 | `flow` | 3-6 步 | 流程、时间线 |
 
+#### 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-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,29 @@
+# chalkboard
+
+Colorful chalk drawings on dark board
+
+## Color Palette
+
+- Primary: Chalk colors - white, yellow, pink, blue, green
+- Background: Dark green (#2D4A3E) or black chalkboard
+- Accents: Bright chalk highlights, smudge effects
+
+## Visual Elements
+
+- Chalk texture on all elements
+- Dusty, slightly smudged appearance
+- Hand-drawn diagrams and doodles
+- Eraser marks and imperfections
+- Underlines and arrows
+- Chalk dust particles
+
+## Typography
+
+- Handwritten chalk lettering
+- Varied chalk colors for emphasis
+- Boxed and underlined headers
+- Casual, teacherly handwriting
+
+## Best For
+
+Educational content, classroom explanations, tutorials, math and science concepts

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

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

@@ -0,0 +1,29 @@
+# knolling
+
+Organized flat-lay with top-down arrangement
+
+## Color Palette
+
+- Primary: Object's natural colors
+- Background: Solid color - black, white, or colored surface
+- Accents: Shadows, subtle highlights
+
+## Visual Elements
+
+- Top-down camera angle
+- Objects arranged at 90° angles
+- Equal spacing between items
+- Clean organization
+- Symmetry and order
+- No overlapping items
+
+## Typography
+
+- Clean labels
+- Positioned outside objects
+- Connecting lines to items
+- Minimal, catalog-style
+
+## Best For
+
+Product collections, tool inventories, gear layouts, organized overviews

skills/baoyu-infographic/references/styles/lego-brick.md

@@ -0,0 +1,29 @@
+# lego-brick
+
+Toy brick construction with playful aesthetic
+
+## Color Palette
+
+- Primary: Classic LEGO colors - red, blue, yellow, green, white
+- Background: Light gray baseplate or white
+- Accents: Bright primary pops, shiny studs
+
+## Visual Elements
+
+- Visible brick studs
+- Modular construction
+- Minifigure characters
+- Building instruction style
+- Stackable elements
+- Plastic sheen
+
+## Typography
+
+- Blocky, bold fonts
+- LEGO instruction style
+- Step numbers
+- Playful appearance
+
+## Best For
+
+Building concepts, modular systems, playful education, children's content

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

@@ -0,0 +1,29 @@
+# origami
+
+Folded paper forms with geometric precision
+
+## Color Palette
+
+- Primary: Solid origami paper colors - red, blue, green, gold
+- Background: White or soft gray, subtle shadows
+- Accents: Paper fold highlights, crisp shadows
+
+## Visual Elements
+
+- Geometric folded shapes
+- Visible fold lines
+- Cast shadows showing depth
+- Paper texture
+- Angular, faceted forms
+- Low-poly aesthetic
+
+## Typography
+
+- Clean geometric fonts
+- Angular letterforms
+- Folded paper text effect
+- Minimal, precise labels
+
+## Best For
+
+Geometric concepts, transformation topics, Japanese themes, abstract representations

skills/baoyu-infographic/references/styles/pixel-art.md

@@ -0,0 +1,29 @@
+# pixel-art
+
+Retro 8-bit gaming aesthetic
+
+## Color Palette
+
+- Primary: Limited palette - NES/SNES colors
+- Background: Black or dark blue, scanlines optional
+- Accents: Bright pixel highlights, CRT glow
+
+## Visual Elements
+
+- Visible pixel grid
+- Limited color count per sprite
+- 8-bit or 16-bit style
+- Retro game UI elements
+- Pixel-perfect edges
+- Dithering for gradients
+
+## Typography
+
+- Pixel fonts
+- Blocky letterforms
+- Game UI style text
+- Score/stat display style
+
+## Best For
+
+Gaming topics, nostalgia content, developer audiences, retro tech themes

skills/baoyu-infographic/references/styles/storybook-watercolor.md

@@ -0,0 +1,29 @@
+# storybook-watercolor
+
+Soft hand-painted illustration with whimsical charm
+
+## Color Palette
+
+- Primary: Soft watercolor washes - muted blues, greens, warm earth
+- Background: Watercolor paper texture, white or cream
+- Accents: Deeper pigment pools, splatter effects
+
+## Visual Elements
+
+- Visible brushstrokes
+- Soft color bleeds and gradients
+- White space as design element
+- Delicate line work over washes
+- Natural, organic shapes
+- Dreamy, atmospheric quality
+
+## Typography
+
+- Elegant hand-lettering
+- Watercolor-style text
+- Flowing, organic letterforms
+- Integrated with illustrations
+
+## Best For
+
+Storytelling, emotional journeys, nature topics, children's education, artistic presentations

skills/baoyu-infographic/references/styles/subway-map.md

@@ -0,0 +1,29 @@
+# subway-map
+
+Transit diagram style with colored lines and stations
+
+## Color Palette
+
+- Primary: Transit line colors - red, blue, green, yellow, orange
+- Background: White or light gray
+- Accents: Station dots, interchange markers
+
+## Visual Elements
+
+- Colored route lines
+- 45° and 90° angles only
+- Station circle markers
+- Interchange symbols
+- Simplified geography
+- Line thickness hierarchy
+
+## Typography
+
+- Clean sans-serif
+- Station name labels
+- Line number/name badges
+- Horizontal or angled text
+
+## Best For
+
+Journey maps, process flows, network diagrams, route explanations

skills/baoyu-infographic/references/styles/technical-schematic.md

@@ -0,0 +1,36 @@
+# technical-schematic
+
+Technical diagrams with engineering precision and clean geometry.
+
+## Color Palette
+
+- Primary: Blues (#2563EB), teals, grays, white lines
+- Background: Deep blue (#1E3A5F), white, or light gray with grid
+- Accents: Amber highlights (#F59E0B), cyan callouts
+
+## Variants
+
+| Variant | Focus | Visual Emphasis |
+|---------|-------|-----------------|
+| **Blueprint** | Engineering schematics | White on blue, measurements, grid |
+| **Isometric** | 3D spatial representation | 30° angle blocks, clean fills |
+
+## Visual Elements
+
+- Geometric precision throughout
+- Grid pattern or isometric angle
+- Dimension lines and measurements
+- Technical symbols and annotations
+- Clean vector shapes
+- Consistent stroke weights
+
+## Typography
+
+- Technical stencil or clean sans-serif
+- All-caps labels
+- Measurement annotations
+- Floating labels for isometric
+
+## Best For
+
+Technical architecture, system diagrams, engineering specs, product breakdowns, data visualization

skills/baoyu-infographic/references/styles/ui-wireframe.md

@@ -0,0 +1,29 @@
+# ui-wireframe
+
+Grayscale interface mockup style
+
+## Color Palette
+
+- Primary: Grays - light (#E5E5E5), medium (#9CA3AF), dark (#374151)
+- Background: White (#FFFFFF), light gray
+- Accents: Blue for interactive (#3B82F6), red for emphasis
+
+## Visual Elements
+
+- Wireframe boxes and placeholders
+- X marks for image placeholders
+- Simple line icons
+- Grid-based layout
+- Annotation callouts
+- Redline specifications
+
+## Typography
+
+- System fonts
+- Placeholder "Lorem ipsum"
+- UI label style
+- Sans-serif throughout
+
+## Best For
+
+Product designs, UI explanations, app concepts, user flow diagrams