chore: release v1.15.2

chore: release v1.15.1
chore: release v1.15.0
2026-07-12 05:51:44 +08:00 · 2026-01-23 12:02:37 -06:00 · 2026-01-22 16:21:11 -06:00 · 2026-01-22 11:47:56 -06:00 · 2026-01-22 01:24:52 -06:00 · 2026-01-21 21:42:55 -06:00
160 changed files with 8377 additions and 1131 deletions
@@ -6,7 +6,7 @@
  },
  "metadata": {
    "description": "Skills shared by Baoyu for improving daily work efficiency",
-    "version": "1.6.0"
+    "version": "1.15.2"
  },
  "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"
      ]
    },
    {
@@ -30,7 +31,8 @@
      "source": "./",
      "strict": false,
      "skills": [
-        "./skills/baoyu-danger-gemini-web"
+        "./skills/baoyu-danger-gemini-web",
+        "./skills/baoyu-image-gen"
      ]
    },
    {
@@ -40,7 +42,8 @@
      "strict": false,
      "skills": [
        "./skills/baoyu-danger-x-to-markdown",
-        "./skills/baoyu-compress-image"
+        "./skills/baoyu-compress-image",
+        "./skills/baoyu-url-to-markdown"
      ]
    }
  ]
@@ -1,183 +1,315 @@
 ---
 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: Universal release workflow. Auto-detects version files and changelogs. Supports Node.js, Python, Rust, Claude Plugin, and generic projects. Use when user says "release", "发布", "new version", "bump version", "push", "推送".
 ---

 # Release Skills

-Automate the release process for baoyu-skills plugin: analyze changes, update changelogs, bump version, commit, and tag.
+Universal release workflow supporting any project type with multi-language changelog.

-## When to Use
+## Quick Start

-Trigger this skill when user requests:
- "release", "发布", "create release", "new version"
- "bump version", "update version"
- "prepare release"
+Just run `/release-skills` - auto-detects your project configuration.

-## Workflow
+## Supported Projects

-### Step 1: Analyze Changes Since Last Tag
-
-```bash
-# Get the latest version tag
-LAST_TAG=$(git tag --sort=-v:refname | head -1)
-
-# Show changes since last tag
-git log ${LAST_TAG}..HEAD --oneline
-git diff ${LAST_TAG}..HEAD --stat
-```
-
-Categorize changes by type based on commit messages and file changes:
-
-| Type | Prefix | Description |
-|------|--------|-------------|
-| feat | `feat:` | New features, new skills |
-| fix | `fix:` | Bug fixes |
-| docs | `docs:` | Documentation only |
-| refactor | `refactor:` | Code refactoring |
-| style | `style:` | Formatting, styling |
-| chore | `chore:` | Build, tooling, maintenance |
-
-**Breaking Change Detection**: If changes include:
- Removed skills or scripts
- Changed API/interfaces
- Renamed public functions/options
-
-Warn user: "Breaking changes detected. Consider major version bump (--major flag)."
-
-### Step 2: Determine Version Bump
-
-Current version location: `.claude-plugin/marketplace.json` → `metadata.version`
-
-Version rules:
- **Patch** (0.6.1 → 0.6.2): Bug fixes, docs updates, minor improvements
- **Minor** (0.6.x → 0.7.0): New features, new skills, significant enhancements
- **Major** (0.x → 1.0): Breaking changes, only when user explicitly requests with `--major`
-
-Default behavior:
- If changes include `feat:` or new skills → Minor bump
- Otherwise → Patch bump
-
-### Step 3: Check and Update README
-
-Before updating changelogs, check if README files need updates based on changes:
-
-**When to update README**:
- New skills added → Add to skill list
- Skills removed → Remove from skill list
- Skill renamed → Update references
- New features affecting usage → Update usage section
- Breaking changes → Update migration notes
-
-**Files to sync**:
- `README.md` (English)
- `README.zh.md` (Chinese)
-
-If changes include new skills or significant feature changes, update both README files to reflect the new capabilities. Keep both files in sync with the same structure and information.
-
-### Step 4: Update Changelogs
-
-Files to update:
- `CHANGELOG.md` (English)
- `CHANGELOG.zh.md` (Chinese)
-
-Format (insert after header, before previous version):
-
-```markdown
-## {NEW_VERSION} - {YYYY-MM-DD}
-
-### Features
- `skill-name`: description of new feature
-
-### Fixes
- `skill-name`: description of fix
-
-### Documentation
- description of docs changes
-
-### Other
- description of other changes
-```
-
-Only include sections that have changes. Omit empty sections.
-
-For Chinese changelog, translate the content maintaining the same structure.
-
-### Step 5: Update marketplace.json
-
-Update `.claude-plugin/marketplace.json`:
-```json
-{
-  "metadata": {
-    "version": "{NEW_VERSION}"
-  }
-}
-```
-
-### Step 6: Commit Changes
-
-```bash
-git add README.md README.zh.md CHANGELOG.md CHANGELOG.zh.md .claude-plugin/marketplace.json
-git commit -m "chore: release v{NEW_VERSION}"
-```
-
-**Note**: Do NOT add Co-Authored-By line. This is a release commit, not a code contribution.
-
-### Step 7: Create Version Tag
-
-```bash
-git tag v{NEW_VERSION}
-```
-
-**Important**: Do NOT push to remote. User will push manually when ready.
+| Project Type | Version File | Auto-Detected |
+|--------------|--------------|---------------|
+| Node.js | package.json | ✓ |
+| Python | pyproject.toml | ✓ |
+| Rust | Cargo.toml | ✓ |
+| Claude Plugin | marketplace.json | ✓ |
+| Generic | VERSION / version.txt | ✓ |

 ## Options

 | Flag | Description |
 |------|-------------|
-| `--dry-run` | Preview changes without executing. Show what would be updated. |
-| `--major` | Force major version bump (0.x → 1.0 or 1.x → 2.0) |
+| `--dry-run` | Preview changes without executing |
+| `--major` | Force major version bump |
 | `--minor` | Force minor version bump |
 | `--patch` | Force patch version bump |
-| `--pre <tag>` | (Reserved) Create pre-release version, e.g., `--pre beta` → `0.7.0-beta.1` |
+
+## Workflow
+
+### Step 1: Detect Project Configuration
+
+1. Check for `.releaserc.yml` (optional config override)
+2. Auto-detect version file by scanning (priority order):
+   - `package.json` (Node.js)
+   - `pyproject.toml` (Python)
+   - `Cargo.toml` (Rust)
+   - `marketplace.json` or `.claude-plugin/marketplace.json` (Claude Plugin)
+   - `VERSION` or `version.txt` (Generic)
+3. Scan for changelog files using glob patterns:
+   - `CHANGELOG*.md`
+   - `HISTORY*.md`
+   - `CHANGES*.md`
+4. Identify language of each changelog by filename suffix
+5. Display detected configuration
+
+**Language Detection Rules**:
+
+| Filename Pattern | Language |
+|------------------|----------|
+| `CHANGELOG.md` (no suffix) | en (default) |
+| `CHANGELOG.zh.md` / `CHANGELOG_CN.md` / `CHANGELOG.zh-CN.md` | zh |
+| `CHANGELOG.ja.md` / `CHANGELOG_JP.md` | ja |
+| `CHANGELOG.ko.md` / `CHANGELOG_KR.md` | ko |
+| `CHANGELOG.de.md` / `CHANGELOG_DE.md` | de |
+| `CHANGELOG.fr.md` / `CHANGELOG_FR.md` | fr |
+| `CHANGELOG.es.md` / `CHANGELOG_ES.md` | es |
+| `CHANGELOG.{lang}.md` | Corresponding language code |
+
+**Output Example**:
+```
+Project detected:
+  Version file: package.json (1.2.3)
+  Changelogs:
+    - CHANGELOG.md (en)
+    - CHANGELOG.zh.md (zh)
+    - CHANGELOG.ja.md (ja)
+```
+
+### Step 2: Analyze Changes Since Last Tag
+
+```bash
+LAST_TAG=$(git tag --sort=-v:refname | head -1)
+git log ${LAST_TAG}..HEAD --oneline
+git diff ${LAST_TAG}..HEAD --stat
+```
+
+Categorize by conventional commit types:
+
+| Type | Description |
+|------|-------------|
+| feat | New features |
+| fix | Bug fixes |
+| docs | Documentation |
+| refactor | Code refactoring |
+| perf | Performance improvements |
+| test | Test changes |
+| style | Formatting, styling |
+| chore | Maintenance (skip in changelog) |
+
+**Breaking Change Detection**:
+- Commit message starts with `BREAKING CHANGE`
+- Commit body/footer contains `BREAKING CHANGE:`
+- Removed public APIs, renamed exports, changed interfaces
+
+If breaking changes detected, warn user: "Breaking changes detected. Consider major version bump (--major flag)."
+
+### Step 3: Determine Version Bump
+
+Rules (in priority order):
+1. User flag `--major/--minor/--patch` → Use specified
+2. BREAKING CHANGE detected → Major bump (1.x.x → 2.0.0)
+3. `feat:` commits present → Minor bump (1.2.x → 1.3.0)
+4. Otherwise → Patch bump (1.2.3 → 1.2.4)
+
+Display version change: `1.2.3 → 1.3.0`
+
+### Step 4: Generate Multi-language Changelogs
+
+For each detected changelog file:
+
+1. **Identify language** from filename suffix
+2. **Generate content in that language**:
+   - Section titles in target language
+   - Change descriptions written naturally in target language (not translated)
+   - Date format: YYYY-MM-DD (universal)
+3. **Insert at file head** (preserve existing content)
+
+**Section Title Translations** (built-in):
+
+| Type | en | zh | ja | ko | de | fr | es |
+|------|----|----|----|----|----|----|-----|
+| feat | Features | 新功能 | 新機能 | 새로운 기능 | Funktionen | Fonctionnalités | Características |
+| fix | Fixes | 修复 | 修正 | 수정 | Fehlerbehebungen | Corrections | Correcciones |
+| docs | Documentation | 文档 | ドキュメント | 문서 | Dokumentation | Documentation | Documentación |
+| refactor | Refactor | 重构 | リファクタリング | 리팩토링 | Refactoring | Refactorisation | Refactorización |
+| perf | Performance | 性能优化 | パフォーマンス | 성능 | Leistung | Performance | Rendimiento |
+| breaking | Breaking Changes | 破坏性变更 | 破壊的変更 | 주요 변경사항 | Breaking Changes | Changements majeurs | Cambios importantes |
+
+**Changelog Format**:
+
+```markdown
+## {VERSION} - {YYYY-MM-DD}
+
+### Features
+- Description of new feature
+
+### Fixes
+- Description of fix
+
+### Documentation
+- Description of docs changes
+```
+
+Only include sections that have changes. Omit empty sections.
+
+**Multi-language Example**:
+
+English (CHANGELOG.md):
+```markdown
+## 1.3.0 - 2026-01-22
+
+### Features
+- Add user authentication module
+- Support OAuth2 login
+
+### Fixes
+- Fix memory leak in connection pool
+```
+
+Chinese (CHANGELOG.zh.md):
+```markdown
+## 1.3.0 - 2026-01-22
+
+### 新功能
+- 新增用户认证模块
+- 支持 OAuth2 登录
+
+### 修复
+- 修复连接池内存泄漏问题
+```
+
+Japanese (CHANGELOG.ja.md):
+```markdown
+## 1.3.0 - 2026-01-22
+
+### 新機能
+- ユーザー認証モジュールを追加
+- OAuth2 ログインをサポート
+
+### 修正
+- コネクションプールのメモリリークを修正
+```
+
+### Step 5: Update Version File
+
+1. Read version file (JSON/TOML/text)
+2. Update version number
+3. Write back (preserve formatting)
+
+**Version Paths by File Type**:
+
+| File | Path |
+|------|------|
+| package.json | `$.version` |
+| pyproject.toml | `project.version` |
+| Cargo.toml | `package.version` |
+| marketplace.json | `$.metadata.version` |
+| VERSION / version.txt | Direct content |
+
+### Step 6: Commit and Tag
+
+```bash
+git add <all modified files>
+git commit -m "chore: release v{VERSION}"
+git tag v{VERSION}
+```
+
+**Note**: Do NOT add Co-Authored-By line. This is a release commit, not a code contribution.
+
+**Important**: Do NOT push to remote. User will push manually when ready.
+
+**Post-Release Output**:
+```
+Release v1.3.0 created locally.
+
+To publish:
+  git push origin main
+  git push origin v1.3.0
+```
+
+## Configuration (.releaserc.yml)
+
+Optional config file in project root to override defaults:
+
+```yaml
+# .releaserc.yml - Optional configuration
+
+# Version file (auto-detected if not specified)
+version:
+  file: package.json
+  path: $.version  # JSONPath for JSON, dotted path for TOML
+
+# Changelog files (auto-detected if not specified)
+changelog:
+  files:
+    - path: CHANGELOG.md
+      lang: en
+    - path: CHANGELOG.zh.md
+      lang: zh
+    - path: CHANGELOG.ja.md
+      lang: ja
+
+  # Section mapping (conventional commit type → changelog section)
+  # Use null to skip a type in changelog
+  sections:
+    feat: Features
+    fix: Fixes
+    docs: Documentation
+    refactor: Refactor
+    perf: Performance
+    test: Tests
+    chore: null
+
+# Commit message format
+commit:
+  message: "chore: release v{version}"
+
+# Tag format
+tag:
+  prefix: v  # Results in v1.0.0
+  sign: false
+
+# Additional files to include in release commit
+include:
+  - README.md
+  - package.json
+```

 ## Dry-Run Mode

 When `--dry-run` is specified:
-1. Show all changes since last tag
-2. Show proposed version bump (current → new)
-3. Show draft changelog entries (EN and CN)
-4. Show files that would be modified
-5. Do NOT make any actual changes

-Output format:
 ```
 === DRY RUN MODE ===

-Last tag: v0.6.1
-Proposed version: v0.7.0
+Project detected:
+  Version file: package.json (1.2.3)
+  Changelogs: CHANGELOG.md (en), CHANGELOG.zh.md (zh)
+
+Last tag: v1.2.3
+Proposed version: v1.3.0

 Changes detected:
- feat: new skill baoyu-foo added
- fix: baoyu-bar timeout issue
- docs: updated README
+  feat: add user authentication
+  feat: support oauth2 login
+  fix: memory leak in pool

-Changelog preview (EN):
-## 0.7.0 - 2026-01-17
-### Features
- `baoyu-foo`: new skill for ...
-### Fixes
- `baoyu-bar`: fixed timeout issue
+Changelog preview (en):
+  ## 1.3.0 - 2026-01-22
+  ### Features
+  - Add user authentication module
+  - Support OAuth2 login
+  ### Fixes
+  - Fix memory leak in connection pool

-README updates needed: Yes/No
-(If yes, show proposed changes)
+Changelog preview (zh):
+  ## 1.3.0 - 2026-01-22
+  ### 新功能
+  - 新增用户认证模块
+  - 支持 OAuth2 登录
+  ### 修复
+  - 修复连接池内存泄漏问题

 Files to modify:
- README.md (if updates needed)
- README.zh.md (if updates needed)
- CHANGELOG.md
- CHANGELOG.zh.md
- .claude-plugin/marketplace.json
+  - package.json
+  - CHANGELOG.md
+  - CHANGELOG.zh.md

 No changes made. Run without --dry-run to execute.
 ```
@@ -188,16 +320,16 @@ No changes made. Run without --dry-run to execute.
 /release-skills              # Auto-detect version bump
 /release-skills --dry-run    # Preview only
 /release-skills --minor      # Force minor bump
+/release-skills --patch      # Force patch bump
 /release-skills --major      # Force major bump (with confirmation)
 ```

-## Post-Release Reminder
+## When to Use

-After successful release, remind user:
-```
-Release v{NEW_VERSION} created locally.
+Trigger this skill when user requests:
+- "release", "发布", "create release", "new version", "新版本"
+- "bump version", "update version", "更新版本"
+- "prepare release"
+- "push to remote" (with uncommitted changes)

-To publish:
-  git push origin main
-  git push origin v{NEW_VERSION}
-```
+**Important**: If user says "just push" or "直接 push" with uncommitted changes, STILL follow all steps above first.
@@ -6,6 +6,7 @@ yarn-debug.log*
 yarn-error.log*
 lerna-debug.log*

+
 # Diagnostic reports (https://nodejs.org/api/report.html)
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

@@ -144,3 +145,7 @@ tests-data/
 # Skill extensions (user customization)
 .baoyu-skills/
 x-to-markdown/
+xhs-images/
+url-to-markdown/
+cover-image/
+slide-deck/
@@ -2,6 +2,87 @@

 English | [中文](./CHANGELOG.zh.md)

+## 1.15.2 - 2026-01-23
+
+### Documentation
+- `release-skills`: comprehensive SKILL.md rewrite—adds multi-language changelog support, .releaserc.yml configuration, dry-run mode, language detection rules, and section title translations for 7 languages.
+
+## 1.15.1 - 2026-01-22
+
+### Refactor
+- `baoyu-xhs-images`: restructures reference documents into modular architecture—reorganizes scattered files into `config/` (settings), `elements/` (visual building blocks), `presets/` (style definitions), and `workflows/` (process guides) directories for improved maintainability.
+
+## 1.15.0 - 2026-01-22
+
+### Features
+- `baoyu-xhs-images`: adds user preferences support via EXTEND.md—configure watermark (content, position, opacity), preferred style, preferred layout, and custom styles. New Step 0 checks for preferences at project (`.baoyu-skills/`) or user (`~/.baoyu-skills/`) level with first-time setup flow.
+
+### Documentation
+- `baoyu-xhs-images`: adds three reference documents—`preferences-schema.md` (YAML schema), `watermark-guide.md` (position and opacity guide), `first-time-setup.md` (setup flow).
+
+## 1.14.0 - 2026-01-22
+
+### Fixes
+- `baoyu-post-to-x`: improves video ready detection for more reliable video posting.
+
+### Documentation
+- `baoyu-slide-deck`: comprehensive SKILL.md enhancement—adds slide count guidance (recommended 8-25, max 30), audience guidelines table with audience-specific principles, style selection principles with content-type recommendations, layout selection tips with common mistakes to avoid, visual hierarchy principles, content density guidelines (McKinsey-style high-density principles), color selection guide, typography principles with font recommendations (English and Chinese fonts with multilingual pairing), and visual elements reference (backgrounds, typography treatments, geometric accents).
+
+## 1.13.0 - 2026-01-21
+
+### Features
+- `baoyu-url-to-markdown`: new utility skill for fetching any URL via Chrome CDP and converting to clean markdown. Supports two capture modes—auto (immediate capture on page load) and wait (user-controlled capture for login-required pages).
+
+### Improvements
+- `baoyu-xhs-images`: updates style recommendations—replaces `tech` references with `notion` and `chalkboard` for technical and educational content.
+
+## 1.12.0 - 2026-01-21
+
+### Refactor
+- `baoyu-post-to-x`: extracts shared utilities to `x-utils.ts`—consolidates Chrome detection, CDP connection, clipboard operations, and helper functions from `x-article.ts`, `x-browser.ts`, `x-quote.ts`, and `x-video.ts` into a single reusable module.
+
+## 1.11.0 - 2026-01-21
+
+### Features
+- `baoyu-image-gen`: new AI SDK-based image generation skill using official OpenAI and Google APIs. Supports text-to-image, reference images (Google multimodal), aspect ratios, and quality presets (`normal`, `2k`). Auto-detects provider based on available API keys.
+- `baoyu-slide-deck`: adds Layout Gallery with 24 layout types—10 slide-specific layouts (`title-hero`, `quote-callout`, `key-stat`, `split-screen`, `icon-grid`, `two-columns`, `three-columns`, `image-caption`, `agenda`, `bullet-list`) and 14 infographic-derived layouts (`linear-progression`, `binary-comparison`, `comparison-matrix`, `hierarchical-layers`, `hub-spoke`, `bento-grid`, `funnel`, `dashboard`, `venn-diagram`, `circular-flow`, `winding-roadmap`, `tree-branching`, `iceberg`, `bridge`).
+
+### Documentation
+- `README.md`, `README.zh.md`: adds baoyu-image-gen documentation with usage examples, options table, and environment variables; adds Environment Configuration section for API key setup.
+
+## 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
@@ -2,6 +2,87 @@

 [English](./CHANGELOG.md) | 中文

+## 1.15.2 - 2026-01-23
+
+### 文档
+- `release-skills`：SKILL.md 全面重写——新增多语言 changelog 支持、.releaserc.yml 配置文件、dry-run 模式、语言检测规则、7 种语言的章节标题翻译。
+
+## 1.15.1 - 2026-01-22
+
+### 重构
+- `baoyu-xhs-images`：参考文档模块化重构——将分散的文件整理为 `config/`（配置设置）、`elements/`（视觉构建块）、`presets/`（风格预设）、`workflows/`（流程指南）四个目录，提升可维护性。
+
+## 1.15.0 - 2026-01-22
+
+### 新功能
+- `baoyu-xhs-images`：新增用户偏好设置支持（通过 EXTEND.md 配置）——可设置水印（内容、位置、透明度）、首选风格、首选布局和自定义风格。新增 Step 0 检查项目级（`.baoyu-skills/`）或用户级（`~/.baoyu-skills/`）偏好设置，首次使用时引导设置。
+
+### 文档
+- `baoyu-xhs-images`：新增三个参考文档——`preferences-schema.md`（YAML 配置模式）、`watermark-guide.md`（水印位置和透明度指南）、`first-time-setup.md`（首次设置流程）。
+
+## 1.14.0 - 2026-01-22
+
+### 修复
+- `baoyu-post-to-x`：改进视频就绪检测，提升视频发布稳定性。
+
+### 文档
+- `baoyu-slide-deck`：SKILL.md 全面增强——新增幻灯片数量指南（推荐 8-25 张，最多 30 张）、受众指南表格及各受众特定原则、风格选择原则与内容类型推荐、布局选择技巧与常见错误提示、视觉层次原则、内容密度指南（麦肯锡风格高密度原则）、配色选择指南、字体排版原则与字体推荐（中英文字体及多语言搭配方案）、视觉元素参考（背景处理、字体处理、几何装饰）。
+
+## 1.13.0 - 2026-01-21
+
+### 新功能
+- `baoyu-url-to-markdown`：新增 URL 转 Markdown 工具技能，通过 Chrome CDP 抓取任意网页并转换为干净的 Markdown 格式。支持两种抓取模式——自动模式（页面加载后立即抓取）和等待模式（用户控制抓取时机，适用于需要登录的页面）。
+
+### 改进
+- `baoyu-xhs-images`：更新风格推荐——将 `tech` 风格引用替换为 `notion` 和 `chalkboard`，用于技术和教育内容。
+
+## 1.12.0 - 2026-01-21
+
+### 重构
+- `baoyu-post-to-x`：提取公共工具函数到 `x-utils.ts`——将 `x-article.ts`、`x-browser.ts`、`x-quote.ts`、`x-video.ts` 中重复的 Chrome 检测、CDP 连接、剪贴板操作等功能整合为统一的可复用模块。
+
+## 1.11.0 - 2026-01-21
+
+### 新功能
+- `baoyu-image-gen`：新增基于 AI SDK 的图像生成技能，使用官方 OpenAI 和 Google API。支持文生图、参考图（Google 多模态）、宽高比和质量预设（`normal`、`2k`）。根据可用的 API 密钥自动选择服务商。
+- `baoyu-slide-deck`：新增布局库（Layout Gallery），包含 24 种布局类型——10 种幻灯片专用布局（`title-hero` 标题主图、`quote-callout` 引用突出、`key-stat` 关键数据、`split-screen` 分屏、`icon-grid` 图标网格、`two-columns` 双栏、`three-columns` 三栏、`image-caption` 图片说明、`agenda` 议程、`bullet-list` 要点列表）和 14 种信息图衍生布局（`linear-progression` 线性流程、`binary-comparison` 二元对比、`comparison-matrix` 对比矩阵、`hierarchical-layers` 层级、`hub-spoke` 中心辐射、`bento-grid` 便当盒、`funnel` 漏斗、`dashboard` 仪表盘、`venn-diagram` 韦恩图、`circular-flow` 循环流程、`winding-roadmap` 蜿蜒路线图、`tree-branching` 树状分支、`iceberg` 冰山、`bridge` 桥接）。
+
+### 文档
+- `README.md`、`README.zh.md`：新增 baoyu-image-gen 文档，包含用法示例、选项表和环境变量说明；新增环境配置章节，介绍 API 密钥设置方法。
+
+## 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

 ### 新功能
@@ -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:
@@ -14,7 +14,7 @@ Skills shared by Baoyu for improving daily work efficiency with Claude Code.
 ### Quick Install (Recommended)

 ```bash
-npx add-skill jimliu/baoyu-skills
+npx skills add jimliu/baoyu-skills
 ```

 ### Register as Plugin Marketplace
@@ -53,9 +53,9 @@ 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) |
-| **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) |
+| **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 | [image-gen](#baoyu-image-gen), [danger-gemini-web](#baoyu-danger-gemini-web) |
+| **utility-skills** | Utility tools for content processing | [url-to-markdown](#baoyu-url-to-markdown), [danger-x-to-markdown](#baoyu-danger-x-to-markdown), [compress-image](#baoyu-compress-image) |

 ## Update Skills

@@ -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.
@@ -383,6 +515,55 @@ Prerequisites: Google Chrome installed. First run requires QR code login (sessio

 AI-powered generation backends.

+#### baoyu-image-gen
+
+AI SDK-based image generation using official OpenAI and Google APIs. Supports text-to-image, reference images, aspect ratios, and quality presets.
+
+```bash
+# Basic generation (auto-detect provider)
+/baoyu-image-gen --prompt "A cute cat" --image cat.png
+
+# With aspect ratio
+/baoyu-image-gen --prompt "A landscape" --image landscape.png --ar 16:9
+
+# High quality (2k)
+/baoyu-image-gen --prompt "A banner" --image banner.png --quality 2k
+
+# Specific provider
+/baoyu-image-gen --prompt "A cat" --image cat.png --provider openai
+
+# With reference images (Google multimodal only)
+/baoyu-image-gen --prompt "Make it blue" --image out.png --ref source.png
+```
+
+**Options**:
+| Option | Description |
+|--------|-------------|
+| `--prompt`, `-p` | Prompt text |
+| `--promptfiles` | Read prompt from files (concatenated) |
+| `--image` | Output image path (required) |
+| `--provider` | `google` or `openai` (default: google) |
+| `--model`, `-m` | Model ID |
+| `--ar` | Aspect ratio (e.g., `16:9`, `1:1`, `4:3`) |
+| `--size` | Size (e.g., `1024x1024`) |
+| `--quality` | `normal` or `2k` (default: normal) |
+| `--ref` | Reference images (Google multimodal only) |
+
+**Environment Variables** (see [Environment Configuration](#environment-configuration) for setup):
+| Variable | Description | Default |
+|----------|-------------|---------|
+| `OPENAI_API_KEY` | OpenAI API key | - |
+| `GOOGLE_API_KEY` | Google API key | - |
+| `OPENAI_IMAGE_MODEL` | OpenAI model | `gpt-image-1.5` |
+| `GOOGLE_IMAGE_MODEL` | Google model | `gemini-3-pro-image-preview` |
+| `OPENAI_BASE_URL` | Custom OpenAI endpoint | - |
+| `GOOGLE_BASE_URL` | Custom Google endpoint | - |
+
+**Provider Auto-Selection**:
+1. If `--provider` specified → use it
+2. If only one API key available → use that provider
+3. If both available → default to Google
+
 #### baoyu-danger-gemini-web

 Interacts with Gemini Web to generate text and images.
@@ -405,6 +586,35 @@ Interacts with Gemini Web to generate text and images.

 Utility tools for content processing.

+#### baoyu-url-to-markdown
+
+Fetch any URL via Chrome CDP and convert to clean markdown. Supports two capture modes for different scenarios.
+
+```bash
+# Auto mode (default) - capture when page loads
+/baoyu-url-to-markdown https://example.com/article
+
+# Wait mode - for login-required pages
+/baoyu-url-to-markdown https://example.com/private --wait
+
+# Save to specific file
+/baoyu-url-to-markdown https://example.com/article -o output.md
+```
+
+**Capture Modes**:
+| Mode | Description | Best For |
+|------|-------------|----------|
+| Auto (default) | Captures immediately after page load | Public pages, static content |
+| Wait (`--wait`) | Waits for user signal before capture | Login-required, dynamic content |
+
+**Options**:
+| Option | Description |
+|--------|-------------|
+| `<url>` | URL to fetch |
+| `-o <path>` | Output file path |
+| `--wait` | Wait for user signal before capturing |
+| `--timeout <ms>` | Page load timeout (default: 30000) |
+
 #### baoyu-danger-x-to-markdown

 Converts X (Twitter) content to markdown format. Supports tweet threads and X Articles.
@@ -436,6 +646,44 @@ Compress images to reduce file size while maintaining quality.
 /baoyu-compress-image path/to/images/ --quality 80
 ```

+## Environment Configuration
+
+Some skills require API keys or custom configuration. Environment variables can be set in `.env` files:
+
+**Load Priority** (higher priority overrides lower):
+1. CLI environment variables (e.g., `OPENAI_API_KEY=xxx /baoyu-image-gen ...`)
+2. `process.env` (system environment)
+3. `<cwd>/.baoyu-skills/.env` (project-level)
+4. `~/.baoyu-skills/.env` (user-level)
+
+**Setup**:
+
+```bash
+# Create user-level config directory
+mkdir -p ~/.baoyu-skills
+
+# Create .env file
+cat > ~/.baoyu-skills/.env << 'EOF'
+# OpenAI
+OPENAI_API_KEY=sk-xxx
+OPENAI_IMAGE_MODEL=gpt-image-1.5
+# OPENAI_BASE_URL=https://api.openai.com/v1
+
+# Google
+GOOGLE_API_KEY=xxx
+GOOGLE_IMAGE_MODEL=gemini-3-pro-image-preview
+# GOOGLE_BASE_URL=https://generativelanguage.googleapis.com/v1beta
+EOF
+```
+
+**Project-level config** (for team sharing):
+
+```bash
+mkdir -p .baoyu-skills
+# Add .baoyu-skills/.env to .gitignore to avoid committing secrets
+echo ".baoyu-skills/.env" >> .gitignore
+```
+
 ## Customization

 All skills support customization via `EXTEND.md` files. Create an extension file to override default styles, add custom configurations, or define your own presets.
@@ -14,7 +14,7 @@
 ### 快速安装（推荐）

 ```bash
-npx add-skill jimliu/baoyu-skills
+npx skills add jimliu/baoyu-skills
 ```

 ### 注册插件市场
@@ -53,9 +53,9 @@ 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) |
-| **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) |
+| **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 生成后端 | [image-gen](#baoyu-image-gen), [danger-gemini-web](#baoyu-danger-gemini-web) |
+| **utility-skills** | 内容处理工具 | [url-to-markdown](#baoyu-url-to-markdown), [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

 为文章生成手绘风格封面图，支持多种风格选项。
@@ -383,6 +515,55 @@ npx add-skill jimliu/baoyu-skills

 AI 驱动的生成后端。

+#### baoyu-image-gen
+
+基于 AI SDK 的图像生成，使用官方 OpenAI 和 Google API。支持文生图、参考图、宽高比和质量预设。
+
+```bash
+# 基础生成（自动检测服务商）
+/baoyu-image-gen --prompt "一只可爱的猫" --image cat.png
+
+# 指定宽高比
+/baoyu-image-gen --prompt "风景图" --image landscape.png --ar 16:9
+
+# 高质量（2k 分辨率）
+/baoyu-image-gen --prompt "横幅图" --image banner.png --quality 2k
+
+# 指定服务商
+/baoyu-image-gen --prompt "一只猫" --image cat.png --provider openai
+
+# 带参考图（仅 Google 多模态支持）
+/baoyu-image-gen --prompt "把它变成蓝色" --image out.png --ref source.png
+```
+
+**选项**：
+| 选项 | 说明 |
+|------|------|
+| `--prompt`, `-p` | 提示词文本 |
+| `--promptfiles` | 从文件读取提示词（多文件拼接） |
+| `--image` | 输出图片路径（必需） |
+| `--provider` | `google` 或 `openai`（默认：google） |
+| `--model`, `-m` | 模型 ID |
+| `--ar` | 宽高比（如 `16:9`、`1:1`、`4:3`） |
+| `--size` | 尺寸（如 `1024x1024`） |
+| `--quality` | `normal` 或 `2k`（默认：normal） |
+| `--ref` | 参考图片（仅 Google 多模态支持） |
+
+**环境变量**（配置方法见[环境配置](#环境配置)）：
+| 变量 | 说明 | 默认值 |
+|------|------|--------|
+| `OPENAI_API_KEY` | OpenAI API 密钥 | - |
+| `GOOGLE_API_KEY` | Google API 密钥 | - |
+| `OPENAI_IMAGE_MODEL` | OpenAI 模型 | `gpt-image-1.5` |
+| `GOOGLE_IMAGE_MODEL` | Google 模型 | `gemini-3-pro-image-preview` |
+| `OPENAI_BASE_URL` | 自定义 OpenAI 端点 | - |
+| `GOOGLE_BASE_URL` | 自定义 Google 端点 | - |
+
+**服务商自动选择**：
+1. 如果指定了 `--provider` → 使用指定的
+2. 如果只有一个 API 密钥 → 使用对应服务商
+3. 如果两个都有 → 默认使用 Google
+
 #### baoyu-danger-gemini-web

 与 Gemini Web 交互，生成文本和图片。
@@ -405,6 +586,35 @@ AI 驱动的生成后端。

 内容处理工具。

+#### baoyu-url-to-markdown
+
+通过 Chrome CDP 抓取任意 URL 并转换为干净的 Markdown。支持两种抓取模式，适应不同场景。
+
+```bash
+# 自动模式（默认）- 页面加载后立即抓取
+/baoyu-url-to-markdown https://example.com/article
+
+# 等待模式 - 适用于需要登录的页面
+/baoyu-url-to-markdown https://example.com/private --wait
+
+# 保存到指定文件
+/baoyu-url-to-markdown https://example.com/article -o output.md
+```
+
+**抓取模式**：
+| 模式 | 说明 | 适用场景 |
+|------|------|----------|
+| 自动（默认） | 页面加载后立即抓取 | 公开页面、静态内容 |
+| 等待（`--wait`） | 等待用户信号后抓取 | 需登录页面、动态内容 |
+
+**选项**：
+| 选项 | 说明 |
+|------|------|
+| `<url>` | 要抓取的 URL |
+| `-o <path>` | 输出文件路径 |
+| `--wait` | 等待用户信号后抓取 |
+| `--timeout <ms>` | 页面加载超时（默认：30000） |
+
 #### baoyu-danger-x-to-markdown

 将 X (Twitter) 内容转换为 markdown 格式。支持推文串和 X 文章。
@@ -436,6 +646,44 @@ AI 驱动的生成后端。
 /baoyu-compress-image path/to/images/ --quality 80
 ```

+## 环境配置
+
+部分技能需要 API 密钥或自定义配置。环境变量可以在 `.env` 文件中设置：
+
+**加载优先级**（高优先级覆盖低优先级）：
+1. 命令行环境变量（如 `OPENAI_API_KEY=xxx /baoyu-image-gen ...`）
+2. `process.env`（系统环境变量）
+3. `<cwd>/.baoyu-skills/.env`（项目级）
+4. `~/.baoyu-skills/.env`（用户级）
+
+**配置方法**：
+
+```bash
+# 创建用户级配置目录
+mkdir -p ~/.baoyu-skills
+
+# 创建 .env 文件
+cat > ~/.baoyu-skills/.env << 'EOF'
+# OpenAI
+OPENAI_API_KEY=sk-xxx
+OPENAI_IMAGE_MODEL=gpt-image-1.5
+# OPENAI_BASE_URL=https://api.openai.com/v1
+
+# Google
+GOOGLE_API_KEY=xxx
+GOOGLE_IMAGE_MODEL=gemini-3-pro-image-preview
+# GOOGLE_BASE_URL=https://generativelanguage.googleapis.com/v1beta
+EOF
+```
+
+**项目级配置**（团队共享）：
+
+```bash
+mkdir -p .baoyu-skills
+# 将 .baoyu-skills/.env 添加到 .gitignore 避免提交密钥
+echo ".baoyu-skills/.env" >> .gitignore
+```
+
 ## 自定义扩展

 所有技能支持通过 `EXTEND.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 |
-| Primary | Chalk White | #F5F5F5 | Main elements |
-| Accent 1 | Chalk Yellow | #FFE566 | Highlights |
+| 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, growth |
+| Accent 4 | Chalk Green | #90EE90 | Success, nature |
 | Accent 5 | Chalk Orange | #FFB366 | Warnings, energy |

 ## Visual Elements

- Hand-drawn chalk illustrations
- Chalk dust effects
- Doodles: stars, arrows, underlines
- Mathematical formulas
- Eraser smudges and chalk residue
- Stick figures and icons
- Connection lines with hand feel
- Checkmarks and annotations
+- 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 chalk texture on all elements
- Use imperfect hand-drawn quality
- Add chalk dust and smudge effects
- Create hierarchy with color
- Include playful annotations
+- 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 lines
+- Create clean digital-looking lines
 - Add photorealistic elements
- Use gradients or gloss
+- Use gradients or glossy effects
 - Make it look computerized

 ## Best For
@@ -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
@@ -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
@@ -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
@@ -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)
- Background: Chalkboard Black (#1A1A1A), Dark Green-Black (#1C2B1C)
- Accents: Chalk Blue (#66B3FF), Chalk Green (#90EE90), Chalk Orange (#FFB366)
+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.

-## Visual Elements
+## Background

- Chalkboard texture with subtle dust and smudges
- Hand-drawn chalk illustrations with sketchy lines
- Chalk dust effects around text and drawings
- Imperfect lines with visible texture
- Doodles, arrows, underlines, stars
- Eraser marks and chalk residue
+- 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, 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
@@ -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 {
@@ -0,0 +1,219 @@
+---
+name: baoyu-image-gen
+description: AI SDK-based image generation using official OpenAI and Google APIs. Supports text-to-image, reference images, aspect ratios, and quality presets.
+---
+
+# Image Generation (AI SDK)
+
+Official API-based image generation via AI SDK. Supports OpenAI (DALL-E, GPT Image) and Google (Imagen, Gemini multimodal).
+
+## Script Directory
+
+**Important**: All scripts are located in the `scripts/` subdirectory of this skill.
+
+**Agent Execution Instructions**:
+1. Determine this SKILL.md file's directory path as `SKILL_DIR`
+2. Script path = `${SKILL_DIR}/scripts/<script-name>.ts`
+3. Replace all `${SKILL_DIR}` in this document with the actual path
+
+**Script Reference**:
+| Script | Purpose |
+|--------|---------|
+| `scripts/main.ts` | CLI entry point for image generation |
+
+## Quick Start
+
+```bash
+# Basic generation (auto-detect provider)
+npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A cat" --image cat.png
+
+# With aspect ratio
+npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A landscape" --image landscape.png --ar 16:9
+
+# High quality (2k)
+npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A cat" --image cat.png --quality 2k
+
+# Specific provider
+npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A cat" --image cat.png --provider openai
+
+# From prompt files
+npx -y bun ${SKILL_DIR}/scripts/main.ts --promptfiles system.md content.md --image out.png
+
+# With reference images (Google multimodal only)
+npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "Make blue" --image out.png --ref source.png
+```
+
+## Commands
+
+### Basic Image Generation
+
+```bash
+# Generate with prompt
+npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A sunset over mountains" --image sunset.png
+
+# Shorthand
+npx -y bun ${SKILL_DIR}/scripts/main.ts -p "A cute robot" --image robot.png
+```
+
+### Aspect Ratios
+
+```bash
+# Common ratios: 1:1, 16:9, 9:16, 4:3, 3:4, 2.35:1
+npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A portrait" --image portrait.png --ar 3:4
+
+# Or specify exact size
+npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "Banner" --image banner.png --size 1792x1024
+```
+
+### Reference Images (Google Multimodal)
+
+```bash
+# Image editing with reference
+npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "Make it blue" --image blue.png --ref original.png
+
+# Multiple references
+npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "Combine these styles" --image out.png --ref a.png b.png
+```
+
+### Quality Presets
+
+```bash
+# Normal quality (default)
+npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A cat" --image cat.png --quality normal
+
+# High quality (2k resolution)
+npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A cat" --image cat.png --quality 2k
+```
+
+### Output Formats
+
+```bash
+# Plain output (prints saved path)
+npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A cat" --image cat.png
+
+# JSON output
+npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A cat" --image cat.png --json
+```
+
+## Options
+
+| Option | Description |
+|--------|-------------|
+| `--prompt <text>`, `-p` | Prompt text |
+| `--promptfiles <files...>` | Read prompt from files (concatenated) |
+| `--image <path>` | Output image path (required) |
+| `--provider google\|openai` | Force provider (default: google) |
+| `--model <id>`, `-m` | Model ID |
+| `--ar <ratio>` | Aspect ratio (e.g., `16:9`, `1:1`, `4:3`) |
+| `--size <WxH>` | Size (e.g., `1024x1024`) |
+| `--quality normal\|2k` | Quality preset (default: normal) |
+| `--ref <files...>` | Reference images (Google multimodal only) |
+| `--n <count>` | Number of images |
+| `--json` | JSON output |
+| `--help`, `-h` | Show help |
+
+## Environment Variables
+
+| Variable | Description | Default |
+|----------|-------------|---------|
+| `OPENAI_API_KEY` | OpenAI API key | - |
+| `GOOGLE_API_KEY` | Google API key | - |
+| `OPENAI_IMAGE_MODEL` | OpenAI model | `gpt-image-1.5` |
+| `GOOGLE_IMAGE_MODEL` | Google model | `gemini-3-pro-image-preview` |
+| `OPENAI_BASE_URL` | Custom OpenAI endpoint | - |
+| `GOOGLE_BASE_URL` | Custom Google endpoint | - |
+
+**Load Priority**: CLI args > `process.env` > `<cwd>/.baoyu-skills/.env` > `~/.baoyu-skills/.env`
+
+## Provider & Model Strategy
+
+### Auto-Selection
+
+1. If `--provider` specified → use it
+2. If only one API key available → use that provider
+3. If both available → default to Google (multimodal LLMs more versatile)
+
+### API Selection by Model Type
+
+| Model Category | API Function | Example Models |
+|----------------|--------------|----------------|
+| Google Multimodal | `generateText` | `gemini-2.0-flash-exp-image-generation` |
+| Google Imagen | `experimental_generateImage` | `imagen-3.0-generate-002` |
+| OpenAI | `experimental_generateImage` | `gpt-image-1`, `dall-e-3` |
+
+### Available Models
+
+**Google**:
+- `gemini-3-pro-image-preview` - Default, multimodal generation
+- `gemini-2.0-flash-exp-image-generation` - Gemini 2.0 Flash
+- `imagen-3.0-generate-002` - Imagen 3
+
+**OpenAI**:
+- `gpt-image-1.5` - Default, GPT Image 1.5
+- `gpt-image-1` - GPT Image 1
+- `dall-e-3` - DALL-E 3
+
+## Quality Presets
+
+| Preset | OpenAI | Google | Use Case |
+|--------|--------|--------|----------|
+| `normal` | 1024x1024 | Default | Covers, illustrations |
+| `2k` | 2048x2048 | "2048px" in prompt | Infographics, slides |
+
+## Aspect Ratio Handling
+
+- **Multimodal LLMs**: Embedded in prompt (e.g., `"... aspect ratio 16:9"`)
+- **Image-only models**: Uses `aspectRatio` or `size` parameter
+- **Common ratios**: 1:1, 16:9, 9:16, 4:3, 3:4, 2.35:1
+
+## Examples
+
+### Generate Cover Image
+
+```bash
+npx -y bun ${SKILL_DIR}/scripts/main.ts \
+  --prompt "A minimalist tech illustration with blue gradients" \
+  --image cover.png --ar 2.35:1 --quality 2k
+```
+
+### Generate Social Media Post
+
+```bash
+npx -y bun ${SKILL_DIR}/scripts/main.ts \
+  --prompt "Instagram post about coffee" \
+  --image post.png --ar 1:1
+```
+
+### Edit Image with Reference
+
+```bash
+npx -y bun ${SKILL_DIR}/scripts/main.ts \
+  --prompt "Change the background to sunset" \
+  --image edited.png --ref original.png --provider google
+```
+
+### Batch Generation from Prompt File
+
+```bash
+# Create prompt file with detailed instructions
+npx -y bun ${SKILL_DIR}/scripts/main.ts \
+  --promptfiles style-guide.md scene-description.md \
+  --image scene.png
+```
+
+## Error Handling
+
+- **Missing API key**: Clear error with setup instructions
+- **Generation failure**: Auto-retry once, then error
+- **Invalid aspect ratio**: Warning, proceed with default
+- **Reference images with image-only model**: Warning, ignore refs
+
+## Extension Support
+
+Custom configurations via EXTEND.md.
+
+**Check paths** (priority order):
+1. `.baoyu-skills/baoyu-image-gen/EXTEND.md` (project)
+2. `~/.baoyu-skills/baoyu-image-gen/EXTEND.md` (user)
+
+If found, load before workflow. Extension content overrides defaults.
@@ -0,0 +1,576 @@
+import fs from "node:fs";
+import path from "node:path";
+import process from "node:process";
+import { homedir } from "node:os";
+import { mkdir, readFile, writeFile } from "node:fs/promises";
+
+type Provider = "google" | "openai";
+type Quality = "normal" | "2k";
+
+type CliArgs = {
+  prompt: string | null;
+  promptFiles: string[];
+  imagePath: string | null;
+  provider: Provider | null;
+  model: string | null;
+  aspectRatio: string | null;
+  size: string | null;
+  quality: Quality;
+  referenceImages: string[];
+  n: number;
+  json: boolean;
+  help: boolean;
+};
+
+const GOOGLE_MULTIMODAL_MODELS = [
+  "gemini-3-pro-image-preview",
+  "gemini-2.0-flash-exp-image-generation",
+  "gemini-2.5-flash-preview-native-audio-dialog",
+];
+
+const GOOGLE_IMAGEN_MODELS = ["imagen-3.0-generate-002", "imagen-3.0-generate-001"];
+
+const OPENAI_IMAGE_MODELS = ["gpt-image-1.5", "gpt-image-1", "dall-e-3", "dall-e-2"];
+
+function printUsage(): void {
+  console.log(`Usage:
+  npx -y bun scripts/main.ts --prompt "A cat" --image cat.png
+  npx -y bun scripts/main.ts --prompt "A landscape" --image landscape.png --ar 16:9
+  npx -y bun scripts/main.ts --promptfiles system.md content.md --image out.png
+
+Options:
+  -p, --prompt <text>       Prompt text
+  --promptfiles <files...>  Read prompt from files (concatenated)
+  --image <path>            Output image path (required)
+  --provider google|openai  Force provider (auto-detect by default)
+  -m, --model <id>          Model ID
+  --ar <ratio>              Aspect ratio (e.g., 16:9, 1:1, 4:3)
+  --size <WxH>              Size (e.g., 1024x1024)
+  --quality normal|2k       Quality preset (default: normal)
+  --ref <files...>          Reference images (Google multimodal only)
+  --n <count>               Number of images (default: 1)
+  --json                    JSON output
+  -h, --help                Show help
+
+Environment variables:
+  OPENAI_API_KEY            OpenAI API key
+  GOOGLE_API_KEY            Google API key
+  OPENAI_IMAGE_MODEL        Default OpenAI model (gpt-image-1.5)
+  GOOGLE_IMAGE_MODEL        Default Google model (gemini-3-pro-image-preview)
+  OPENAI_BASE_URL           Custom OpenAI endpoint
+  GOOGLE_BASE_URL           Custom Google endpoint
+
+Env file load order: CLI args > process.env > <cwd>/.baoyu-skills/.env > ~/.baoyu-skills/.env`);
+}
+
+function parseArgs(argv: string[]): CliArgs {
+  const out: CliArgs = {
+    prompt: null,
+    promptFiles: [],
+    imagePath: null,
+    provider: null,
+    model: null,
+    aspectRatio: null,
+    size: null,
+    quality: "normal",
+    referenceImages: [],
+    n: 1,
+    json: false,
+    help: false,
+  };
+
+  const positional: string[] = [];
+
+  const takeMany = (i: number): { items: string[]; next: number } => {
+    const items: string[] = [];
+    let j = i + 1;
+    while (j < argv.length) {
+      const v = argv[j]!;
+      if (v.startsWith("-")) break;
+      items.push(v);
+      j++;
+    }
+    return { items, next: j - 1 };
+  };
+
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i]!;
+
+    if (a === "--help" || a === "-h") {
+      out.help = true;
+      continue;
+    }
+
+    if (a === "--json") {
+      out.json = true;
+      continue;
+    }
+
+    if (a === "--prompt" || a === "-p") {
+      const v = argv[++i];
+      if (!v) throw new Error(`Missing value for ${a}`);
+      out.prompt = v;
+      continue;
+    }
+
+    if (a === "--promptfiles") {
+      const { items, next } = takeMany(i);
+      if (items.length === 0) throw new Error("Missing files for --promptfiles");
+      out.promptFiles.push(...items);
+      i = next;
+      continue;
+    }
+
+    if (a === "--image") {
+      const v = argv[++i];
+      if (!v) throw new Error("Missing value for --image");
+      out.imagePath = v;
+      continue;
+    }
+
+    if (a === "--provider") {
+      const v = argv[++i];
+      if (v !== "google" && v !== "openai") throw new Error(`Invalid provider: ${v}`);
+      out.provider = v;
+      continue;
+    }
+
+    if (a === "--model" || a === "-m") {
+      const v = argv[++i];
+      if (!v) throw new Error(`Missing value for ${a}`);
+      out.model = v;
+      continue;
+    }
+
+    if (a === "--ar") {
+      const v = argv[++i];
+      if (!v) throw new Error("Missing value for --ar");
+      out.aspectRatio = v;
+      continue;
+    }
+
+    if (a === "--size") {
+      const v = argv[++i];
+      if (!v) throw new Error("Missing value for --size");
+      out.size = v;
+      continue;
+    }
+
+    if (a === "--quality") {
+      const v = argv[++i];
+      if (v !== "normal" && v !== "2k") throw new Error(`Invalid quality: ${v}`);
+      out.quality = v;
+      continue;
+    }
+
+    if (a === "--ref" || a === "--reference") {
+      const { items, next } = takeMany(i);
+      if (items.length === 0) throw new Error(`Missing files for ${a}`);
+      out.referenceImages.push(...items);
+      i = next;
+      continue;
+    }
+
+    if (a === "--n") {
+      const v = argv[++i];
+      if (!v) throw new Error("Missing value for --n");
+      out.n = parseInt(v, 10);
+      if (isNaN(out.n) || out.n < 1) throw new Error(`Invalid count: ${v}`);
+      continue;
+    }
+
+    if (a.startsWith("-")) {
+      throw new Error(`Unknown option: ${a}`);
+    }
+
+    positional.push(a);
+  }
+
+  if (!out.prompt && out.promptFiles.length === 0 && positional.length > 0) {
+    out.prompt = positional.join(" ");
+  }
+
+  return out;
+}
+
+async function loadEnvFile(p: string): Promise<Record<string, string>> {
+  try {
+    const content = await readFile(p, "utf8");
+    const env: Record<string, string> = {};
+    for (const line of content.split("\n")) {
+      const trimmed = line.trim();
+      if (!trimmed || trimmed.startsWith("#")) continue;
+      const idx = trimmed.indexOf("=");
+      if (idx === -1) continue;
+      const key = trimmed.slice(0, idx).trim();
+      let val = trimmed.slice(idx + 1).trim();
+      if ((val.startsWith('"') && val.endsWith('"')) || (val.startsWith("'") && val.endsWith("'"))) {
+        val = val.slice(1, -1);
+      }
+      env[key] = val;
+    }
+    return env;
+  } catch {
+    return {};
+  }
+}
+
+async function loadEnv(): Promise<void> {
+  const home = homedir();
+  const cwd = process.cwd();
+
+  const homeEnv = await loadEnvFile(path.join(home, ".baoyu-skills", ".env"));
+  const cwdEnv = await loadEnvFile(path.join(cwd, ".baoyu-skills", ".env"));
+
+  for (const [k, v] of Object.entries(homeEnv)) {
+    if (!process.env[k]) process.env[k] = v;
+  }
+  for (const [k, v] of Object.entries(cwdEnv)) {
+    if (!process.env[k]) process.env[k] = v;
+  }
+}
+
+async function readPromptFromFiles(files: string[]): Promise<string> {
+  const parts: string[] = [];
+  for (const f of files) {
+    parts.push(await readFile(f, "utf8"));
+  }
+  return parts.join("\n\n");
+}
+
+async function readPromptFromStdin(): Promise<string | null> {
+  if (process.stdin.isTTY) return null;
+  try {
+    const t = await Bun.stdin.text();
+    const v = t.trim();
+    return v.length > 0 ? v : null;
+  } catch {
+    return null;
+  }
+}
+
+function normalizeOutputImagePath(p: string): string {
+  const full = path.resolve(p);
+  const ext = path.extname(full);
+  if (ext) return full;
+  return `${full}.png`;
+}
+
+function detectProvider(args: CliArgs): Provider {
+  if (args.provider) return args.provider;
+
+  const hasGoogle = !!process.env.GOOGLE_API_KEY;
+  const hasOpenai = !!process.env.OPENAI_API_KEY;
+
+  if (hasGoogle && !hasOpenai) return "google";
+  if (hasOpenai && !hasGoogle) return "openai";
+  if (hasGoogle && hasOpenai) return "google";
+
+  throw new Error(
+    "No API key found. Set GOOGLE_API_KEY or OPENAI_API_KEY.\n" +
+      "Create ~/.baoyu-skills/.env or <cwd>/.baoyu-skills/.env with your keys."
+  );
+}
+
+function getDefaultModel(provider: Provider): string {
+  if (provider === "google") {
+    return process.env.GOOGLE_IMAGE_MODEL || "gemini-3-pro-image-preview";
+  }
+  return process.env.OPENAI_IMAGE_MODEL || "gpt-image-1.5";
+}
+
+function isGoogleMultimodal(model: string): boolean {
+  return GOOGLE_MULTIMODAL_MODELS.some((m) => model.includes(m));
+}
+
+function isGoogleImagen(model: string): boolean {
+  return GOOGLE_IMAGEN_MODELS.some((m) => model.includes(m));
+}
+
+function buildPromptWithAspect(prompt: string, ar: string | null, quality: Quality): string {
+  let result = prompt;
+  if (ar) {
+    result += ` Aspect ratio: ${ar}.`;
+  }
+  if (quality === "2k") {
+    result += " High resolution 2048px.";
+  }
+  return result;
+}
+
+function parseAspectRatio(ar: string): { width: number; height: number } | null {
+  const match = ar.match(/^(\d+(?:\.\d+)?):(\d+(?:\.\d+)?)$/);
+  if (!match) return null;
+  const w = parseFloat(match[1]!);
+  const h = parseFloat(match[2]!);
+  if (w <= 0 || h <= 0) return null;
+  return { width: w, height: h };
+}
+
+function getOpenAISize(ar: string | null, quality: Quality): string {
+  const base = quality === "2k" ? 2048 : 1024;
+
+  if (!ar) return `${base}x${base}`;
+
+  const parsed = parseAspectRatio(ar);
+  if (!parsed) return `${base}x${base}`;
+
+  const ratio = parsed.width / parsed.height;
+
+  if (Math.abs(ratio - 1) < 0.1) return `${base}x${base}`;
+  if (ratio > 1.5) return quality === "2k" ? "2048x1024" : "1792x1024";
+  if (ratio < 0.67) return quality === "2k" ? "1024x2048" : "1024x1792";
+  return `${base}x${base}`;
+}
+
+async function readImageAsBase64(p: string): Promise<{ data: string; mimeType: string }> {
+  const buf = await readFile(p);
+  const ext = path.extname(p).toLowerCase();
+  let mimeType = "image/png";
+  if (ext === ".jpg" || ext === ".jpeg") mimeType = "image/jpeg";
+  else if (ext === ".gif") mimeType = "image/gif";
+  else if (ext === ".webp") mimeType = "image/webp";
+  return { data: buf.toString("base64"), mimeType };
+}
+
+async function generateWithGoogleMultimodal(
+  prompt: string,
+  model: string,
+  args: CliArgs
+): Promise<Uint8Array> {
+  const { generateText } = await import("ai");
+  const { createGoogleGenerativeAI } = await import("@ai-sdk/google");
+
+  const google = createGoogleGenerativeAI({
+    apiKey: process.env.GOOGLE_API_KEY,
+    baseURL: process.env.GOOGLE_BASE_URL,
+  });
+
+  const fullPrompt = buildPromptWithAspect(prompt, args.aspectRatio, args.quality);
+
+  const messages: any[] = [];
+  const content: any[] = [];
+
+  for (const refPath of args.referenceImages) {
+    const { data, mimeType } = await readImageAsBase64(refPath);
+    content.push({ type: "image", image: data, mimeType });
+  }
+  content.push({ type: "text", text: fullPrompt });
+
+  messages.push({ role: "user", content });
+
+  const result = await generateText({
+    model: google(model, { useSearchGrounding: false }),
+    messages,
+    providerOptions: {
+      google: {
+        responseModalities: ["TEXT", "IMAGE"],
+      },
+    },
+  });
+
+  const files = (result as any).files;
+  if (!files || files.length === 0) {
+    const expRes = (result as any).response?.body?.candidates?.[0]?.content?.parts;
+    if (expRes) {
+      for (const part of expRes) {
+        if (part.inlineData?.data) {
+          return Uint8Array.from(Buffer.from(part.inlineData.data, "base64"));
+        }
+      }
+    }
+    throw new Error("No image in response");
+  }
+
+  const img = files[0];
+  if (img.uint8Array) return img.uint8Array;
+  if (img.base64) return Uint8Array.from(Buffer.from(img.base64, "base64"));
+
+  throw new Error("Cannot extract image data");
+}
+
+async function generateWithGoogleImagen(
+  prompt: string,
+  model: string,
+  args: CliArgs
+): Promise<Uint8Array> {
+  const { experimental_generateImage: generateImage } = await import("ai");
+  const { createGoogleGenerativeAI } = await import("@ai-sdk/google");
+
+  const google = createGoogleGenerativeAI({
+    apiKey: process.env.GOOGLE_API_KEY,
+    baseURL: process.env.GOOGLE_BASE_URL,
+  });
+
+  const fullPrompt = buildPromptWithAspect(prompt, args.aspectRatio, args.quality);
+
+  const result = await generateImage({
+    model: google.image(model),
+    prompt: fullPrompt,
+    n: args.n,
+    aspectRatio: args.aspectRatio || undefined,
+  });
+
+  const img = result.images[0];
+  if (!img) throw new Error("No image in response");
+
+  if (img.uint8Array) return img.uint8Array;
+  if (img.base64) return Uint8Array.from(Buffer.from(img.base64, "base64"));
+
+  throw new Error("Cannot extract image data");
+}
+
+async function generateWithOpenAI(
+  prompt: string,
+  model: string,
+  args: CliArgs
+): Promise<Uint8Array> {
+  const baseURL = process.env.OPENAI_BASE_URL || "https://api.openai.com/v1";
+  const apiKey = process.env.OPENAI_API_KEY;
+
+  if (!apiKey) throw new Error("OPENAI_API_KEY is required");
+
+  const size = args.size || getOpenAISize(args.aspectRatio, args.quality);
+
+  const body: Record<string, any> = {
+    model,
+    prompt,
+    size,
+  };
+
+  if (model.includes("dall-e-3")) {
+    body.quality = args.quality === "2k" ? "hd" : "standard";
+  }
+
+  const res = await fetch(`${baseURL}/images/generations`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${apiKey}`,
+    },
+    body: JSON.stringify(body),
+  });
+
+  if (!res.ok) {
+    const err = await res.text();
+    throw new Error(`OpenAI API error: ${err}`);
+  }
+
+  const result = (await res.json()) as { data: Array<{ url?: string; b64_json?: string }> };
+  const img = result.data[0];
+
+  if (img?.b64_json) {
+    return Uint8Array.from(Buffer.from(img.b64_json, "base64"));
+  }
+
+  if (img?.url) {
+    const imgRes = await fetch(img.url);
+    if (!imgRes.ok) throw new Error("Failed to download image");
+    const buf = await imgRes.arrayBuffer();
+    return new Uint8Array(buf);
+  }
+
+  throw new Error("No image in response");
+}
+
+async function generate(
+  provider: Provider,
+  model: string,
+  prompt: string,
+  args: CliArgs
+): Promise<Uint8Array> {
+  if (provider === "google") {
+    if (isGoogleMultimodal(model)) {
+      return generateWithGoogleMultimodal(prompt, model, args);
+    }
+    if (isGoogleImagen(model)) {
+      if (args.referenceImages.length > 0) {
+        console.error("Warning: Reference images not supported with Imagen models, ignoring.");
+      }
+      return generateWithGoogleImagen(prompt, model, args);
+    }
+    return generateWithGoogleMultimodal(prompt, model, args);
+  }
+
+  if (args.referenceImages.length > 0) {
+    console.error("Warning: Reference images not supported with OpenAI, ignoring.");
+  }
+  return generateWithOpenAI(prompt, model, args);
+}
+
+async function main(): Promise<void> {
+  const args = parseArgs(process.argv.slice(2));
+
+  if (args.help) {
+    printUsage();
+    return;
+  }
+
+  await loadEnv();
+
+  let prompt: string | null = args.prompt;
+  if (!prompt && args.promptFiles.length > 0) prompt = await readPromptFromFiles(args.promptFiles);
+  if (!prompt) prompt = await readPromptFromStdin();
+
+  if (!prompt) {
+    console.error("Error: Prompt is required");
+    printUsage();
+    process.exitCode = 1;
+    return;
+  }
+
+  if (!args.imagePath) {
+    console.error("Error: --image is required");
+    printUsage();
+    process.exitCode = 1;
+    return;
+  }
+
+  const provider = detectProvider(args);
+  const model = args.model || getDefaultModel(provider);
+  const outputPath = normalizeOutputImagePath(args.imagePath);
+
+  let imageData: Uint8Array;
+  let retried = false;
+
+  while (true) {
+    try {
+      imageData = await generate(provider, model, prompt, args);
+      break;
+    } catch (e) {
+      if (!retried) {
+        retried = true;
+        console.error("Generation failed, retrying...");
+        continue;
+      }
+      throw e;
+    }
+  }
+
+  const dir = path.dirname(outputPath);
+  await mkdir(dir, { recursive: true });
+  await writeFile(outputPath, imageData);
+
+  if (args.json) {
+    console.log(
+      JSON.stringify(
+        {
+          savedImage: outputPath,
+          provider,
+          model,
+          prompt: prompt.slice(0, 200),
+        },
+        null,
+        2
+      )
+    );
+  } else {
+    console.log(outputPath);
+  }
+}
+
+main().catch((e) => {
+  const msg = e instanceof Error ? e.message : String(e);
+  console.error(msg);
+  process.exit(1);
+});
@@ -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.
@@ -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?
@@ -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}}
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Jim Liu 宝玉	9e2ee0659b	chore: release v1.15.2	2026-01-23 12:02:37 -06:00
Jim Liu 宝玉	94c9309aa6	chore: release v1.15.1	2026-01-22 16:21:11 -06:00
Jim Liu 宝玉	eb92bdb9df	chore: release v1.15.0	2026-01-22 11:47:56 -06:00
Jim Liu 宝玉	e07d33fed0	chore: release v1.14.0	2026-01-22 01:24:52 -06:00
Jim Liu 宝玉	e964feb5e5	Merge pull request #14 from fkysly/fix/video-ready-detection fix(x-video): improve video ready detection	2026-01-21 21:42:55 -06:00
fkysly	7669556736	fix(x-video): improve video ready detection - Type text while video uploads in background instead of waiting - Fix video ready detection by checking tweet button state instead of progressbar presence (X always has progressbar elements for video playback, causing false negatives)	2026-01-22 09:56:02 +08:00
Jim Liu 宝玉	97da7ab4eb	chore: release v1.13.0	2026-01-21 19:40:46 -06:00
Jim Liu 宝玉	235868343c	chore: release v1.12.0	2026-01-21 11:28:41 -06:00
Jim Liu 宝玉	f43dc2be56	Merge pull request #13 from threehotpot-bot/feature/quote-tweet feat: add quote tweet support	2026-01-21 10:39:22 -06:00
Jim Liu 宝玉	776afba5d8	chore: release v1.11.0	2026-01-21 10:16:12 -06:00
threenrm	d793c19a72	fix: use CDP Input.insertText for reliable text insertion The previous document.execCommand('insertText') caused text to be duplicated multiple times. Switch to CDP's Input.insertText for more reliable text input. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>	2026-01-21 18:21:36 +08:00
threenrm	8cc8d25ad1	feat: add quote tweet support Add x-quote.ts script to quote existing tweets with comments. This allows users to share content while giving credit to the original creator. - New script: scripts/x-quote.ts for quote tweet functionality - Uses CDP to navigate through X's native quote UI - Supports preview mode and --submit flag - Updated SKILL.md with documentation Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>	2026-01-21 18:14:54 +08:00
Jim Liu 宝玉	0d677ea171	docs: Update readme, use `npx skills add` to install	2026-01-21 01:59:42 -06:00
Jim Liu 宝玉	e519fcdb27	chore: release v1.10.0	2026-01-21 01:00:42 -06:00
Jim Liu 宝玉	ea14c42716	Merge pull request #11 from fkysly/feature/video-support feat: add video posting support	2026-01-21 00:59:32 -06:00
Jim Liu 宝玉	22d46f32f4	docs(release-skills): add Chinese trigger words to description Adds "发布", "push", "推送", "新版本", "更新版本" to skill description for better auto-detection when user requests release in Chinese. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>	2026-01-20 22:21:28 -06:00
Jim Liu 宝玉	64726e9df1	docs: add mandatory release checklist to prevent missing CHANGELOG - Add CRITICAL checklist to release-skills SKILL.md - Add Release Process section to CLAUDE.md - Ensures CHANGELOG updates are never skipped Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>	2026-01-20 22:20:11 -06:00
Jim Liu 宝玉	3ea311dfed	feat: add chalkboard style and xhs-images previews - Add chalkboard style to baoyu-xhs-images and baoyu-comic - Update chalkboard style for article-illustrator, cover-image, infographic - Remove tech style from baoyu-xhs-images - Add style and layout preview screenshots for xhs-images - Bump version to 1.9.0 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>	2026-01-20 21:52:53 -06:00
fkysly	cdc5a9c41c	feat: add video posting support - Add x-video.ts script for posting videos to X - Video is uploaded first, then text is added (fixes text being cleared issue) - Uses DOM.setFileInputFiles for direct video upload via CDP - Supports MP4, MOV, WebM formats - Waits for video processing before allowing submission - Update SKILL.md with video posting documentation	2026-01-21 10:59:00 +08:00
Jim Liu 宝玉	b30dcca67e	chore: release v1.8.0	2026-01-20 12:30:22 -06:00
Jim Liu 宝玉	d900c768cc	chore: release v1.7.0	2026-01-19 10:06:06 -06:00
Jim Liu 宝玉	a037edcc27	feat(baoyu-comic): add shoujo style Add classic shoujo manga style featuring: - Large sparkling eyes with detailed highlights - Flowers, sparkles, and soft decorative elements - Soft pink/lavender color palette - Best for romance, coming-of-age, friendship, emotional drama Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>	2026-01-19 10:05:44 -06:00