chore: release v1.21.0

chore: release v1.20.0
chore: release v1.19.0
2026-07-12 22:09:48 +08:00 · 2026-01-24 03:33:10 -06:00 · 2026-01-24 02:30:28 -06:00 · 2026-01-24 01:24:41 -06:00 · 2026-01-23 21:08:11 -06:00 · 2026-01-23 16:10:04 -06:00
123 changed files with 12674 additions and 3755 deletions
@@ -6,7 +6,7 @@
  },
  "metadata": {
    "description": "Skills shared by Baoyu for improving daily work efficiency",
-    "version": "1.9.0"
+    "version": "1.21.0"
  },
  "plugins": [
    {
@@ -31,7 +31,8 @@
      "source": "./",
      "strict": false,
      "skills": [
-        "./skills/baoyu-danger-gemini-web"
+        "./skills/baoyu-danger-gemini-web",
+        "./skills/baoyu-image-gen"
      ]
    },
    {
@@ -41,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,337 @@
 ---
 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: Check README Updates
+
+**IMPORTANT**: Before updating version file, check if README needs updates.
+
+1. **Scan for README files**: `README*.md` in project root
+2. **For each skill/feature changed**, check if README documentation matches:
+   - Options/flags documented correctly
+   - Usage examples reflect current syntax
+   - Feature descriptions are accurate
+3. **If README is outdated**:
+   - Update README.md (and README.zh.md if exists) to reflect changes
+   - Include in release commit
+
+**Common README Updates Needed**:
+| Change Type | README Section to Check |
+|-------------|------------------------|
+| New options/flags | Options table, usage examples |
+| Renamed options | Options table, usage examples |
+| New features | Feature description, examples |
+| Breaking changes | Migration notes, deprecation warnings |
+| Restructured internals | Architecture section (if exposed to users) |
+
+### Step 6: 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 7: 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 +342,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

@@ -145,3 +146,9 @@ tests-data/
 .baoyu-skills/
 x-to-markdown/
 xhs-images/
+url-to-markdown/
+cover-image/
+slide-deck/
+infographic/
+illustrations/
+comic/
@@ -2,6 +2,166 @@

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

+## 1.21.0 - 2026-01-24
+
+### Features
+- `baoyu-cover-image`: expands aspect ratio options—adds 4:3, 3:2, 3:4 ratios; changes default from 2.35:1 to 16:9 for better versatility. Aspect ratio is now always confirmed unless explicitly specified via `--aspect` flag.
+- `baoyu-image-gen`: refactors Google provider to support both Gemini multimodal and Imagen models with unified API. Adds `--imageSize` parameter support (1K/2K/4K) for Gemini models.
+
+## 1.20.0 - 2026-01-24
+
+### Features
+- `baoyu-cover-image`: upgrades from Type × Style two-dimension system to **4-dimension system**—adds `--text` dimension (none, title-only, title-subtitle, text-rich) for text density control and `--mood` dimension (subtle, balanced, bold) for emotional intensity. New `--quick` flag skips confirmation and uses auto-selection.
+
+### Documentation
+- `baoyu-cover-image`: adds dimension reference files—`references/dimensions/text.md` (text density levels) and `references/dimensions/mood.md` (mood intensity levels).
+- `baoyu-cover-image`: updates base-prompt, first-time-setup, and preferences-schema to support new 4-dimension system with v2 schema.
+- `README.md`, `README.zh.md`: updates baoyu-cover-image documentation to reflect new 4-dimension system with `--text`, `--mood`, and `--quick` options.
+
+## 1.19.0 - 2026-01-24
+
+### Features
+- `baoyu-comic`: adds partial workflow options—`--storyboard-only`, `--prompts-only`, `--images-only`, and `--regenerate N` for flexible workflow control.
+- `baoyu-image-gen`: adds `--imageSize` parameter for Google providers (1K/2K/4K), changes default quality to 2k.
+- `baoyu-image-gen`: adds `GEMINI_API_KEY` as alias for `GOOGLE_API_KEY`.
+
+### Refactor
+- `baoyu-comic`: extracts detailed workflow to `references/workflow.md`, reduces SKILL.md by ~400 lines while preserving functionality.
+- `baoyu-comic`: extracts content signal analysis to `references/auto-selection.md` and partial workflow docs to `references/partial-workflows.md`.
+- `baoyu-image-gen`: modularizes code—extracts types to `types.ts`, provider implementations to `providers/google.ts` and `providers/openai.ts`.
+
+### Documentation
+- `baoyu-comic`: improves ohmsha preset documentation with explicit default Doraemon character definitions and visual descriptions.
+
+## 1.18.3 - 2026-01-23
+
+### Documentation
+- `baoyu-comic`: improves character reference handling with explicit Strategy A/B selection—Strategy A uses `--ref` parameter for skills that support it, Strategy B embeds character descriptions in prompts for skills that don't. Includes concrete code examples for both approaches.
+
+### Fixes
+- `baoyu-image-gen`: removes unsupported Gemini models (`gemini-2.0-flash-exp-image-generation`, `gemini-2.5-flash-preview-native-audio-dialog`) from multimodal model list.
+
+## 1.18.2 - 2026-01-23
+
+### Refactor
+- Streamline SKILL.md documentation across 7 skills (`baoyu-compress-image`, `baoyu-danger-gemini-web`, `baoyu-danger-x-to-markdown`, `baoyu-image-gen`, `baoyu-post-to-wechat`, `baoyu-post-to-x`, `baoyu-url-to-markdown`) following official best practices—reduces total documentation by ~300 lines while preserving all functionality.
+
+### Documentation
+- `CLAUDE.md`: adds official skill authoring best practices link, skill loading rules, description writing guidelines, and progressive disclosure patterns.
+
+## 1.18.1 - 2026-01-23
+
+### Documentation
+- `baoyu-slide-deck`: adds detailed sub-steps (1.1-1.3) to progress checklist, marks Step 1.3 as required with explicit Bash check command for existing directory detection.
+
+## 1.18.0 - 2026-01-23
+
+### Features
+- `baoyu-slide-deck`: introduces dimension-based style system—replaces monolithic style definitions with modular 4-dimension architecture: **Texture** (clean, grid, organic, pixel, paper), **Mood** (professional, warm, cool, vibrant, dark, neutral), **Typography** (geometric, humanist, handwritten, editorial, technical), and **Density** (minimal, balanced, dense). 16 presets map to specific dimension combinations, with "Custom dimensions" option for full flexibility.
+- `baoyu-slide-deck`: adds two-round confirmation workflow—Round 1 asks style/audience/slides/review preferences, Round 2 (optional) collects custom dimension choices when user selects "Custom dimensions".
+- `baoyu-slide-deck`: adds conditional outline and prompt review—users can skip reviews for faster generation or enable them for more control.
+
+### Documentation
+- `baoyu-slide-deck`: adds dimension reference files—`references/dimensions/texture.md`, `references/dimensions/mood.md`, `references/dimensions/typography.md`, `references/dimensions/density.md`, and `references/dimensions/presets.md` (preset → dimension mapping).
+- `baoyu-slide-deck`: adds design guidelines—`references/design-guidelines.md` with audience principles, visual hierarchy, content density, color selection, typography, and font recommendations.
+- `baoyu-slide-deck`: adds layout reference—`references/layouts.md` with layout options and selection tips.
+- `baoyu-slide-deck`: adds preferences schema—`references/config/preferences-schema.md` for EXTEND.md configuration.
+
+## 1.17.1 - 2026-01-23
+
+### Refactor
+- `baoyu-infographic`: simplifies SKILL.md documentation—removes redundant content, streamlines workflow description, and improves readability.
+- `baoyu-xhs-images`: improves Step 0 (Load Preferences) documentation—adds clearer first-time setup flow with visual tables and explicit path checking instructions.
+
+### Improvements
+- `baoyu-infographic`: enhances `craft-handmade` style with strict hand-drawn enforcement—requires all imagery to maintain cartoon/illustrated aesthetic, no realistic or photographic elements.
+
+## 1.17.0 - 2026-01-23
+
+### Features
+- `baoyu-cover-image`: adds user preferences support via EXTEND.md—configure watermark (content, position, opacity), preferred type/style, default aspect ratio, and custom styles. New Step 0 checks for preferences at project (`.baoyu-skills/`) or user (`~/.baoyu-skills/`) level with first-time setup flow.
+
+### Refactor
+- `baoyu-cover-image`: restructures to Type × Style two-dimension system—adds 6 types (`hero`, `conceptual`, `typography`, `metaphor`, `scene`, `minimal`) that control visual composition, while 20 styles control aesthetics. New `--type` and `--aspect` options, Type × Style compatibility matrix, and structured workflow with progress checklist.
+
+### Documentation
+- `baoyu-cover-image`: adds three reference documents—`references/config/preferences-schema.md` (EXTEND.md YAML schema), `references/config/first-time-setup.md` (setup flow), `references/config/watermark-guide.md` (watermark configuration).
+- `README.md`, `README.zh.md`: updates baoyu-cover-image documentation to reflect new Type × Style system with `--type` and `--aspect` options.
+
+## 1.16.0 - 2026-01-23
+
+### Features
+- `baoyu-article-illustrator`: adds user preferences support via EXTEND.md—configure watermark (content, position, opacity), preferred type/style, and custom styles. New Step 1.1 checks for preferences at project (`.baoyu-skills/`) or user (`~/.baoyu-skills/`) level with first-time setup flow.
+
+### Refactor
+- `baoyu-article-illustrator`: restructures to Type × Style two-dimension system—replaces 20+ single-dimension styles with modular Type (infographic, scene, flowchart, comparison, framework, timeline) × Style (notion, elegant, warm, minimal, blueprint, watercolor, editorial, scientific) architecture. Adds `--type` and `--density` options, Type × Style compatibility matrix, and structured prompt construction templates.
+
+### Documentation
+- `baoyu-article-illustrator`: adds three reference documents—`references/styles.md` (style gallery and compatibility matrix), `references/config/preferences-schema.md` (EXTEND.md YAML schema), `references/config/first-time-setup.md` (setup flow).
+- `README.md`, `README.zh.md`: updates baoyu-article-illustrator documentation to reflect new Type × Style system with `--type` and `--style` options.
+
+## 1.15.3 - 2026-01-23
+
+### Refactor
+- `baoyu-comic`: restructures style system into 3-dimension architecture—replaces 10 monolithic style files with modular `art-styles/` (5 styles: ligne-claire, manga, realistic, ink-brush, chalk), `tones/` (7 moods: neutral, warm, dramatic, romantic, energetic, vintage, action), and `presets/` (3 shortcuts: ohmsha, wuxia, shoujo). New art × tone × layout system enables flexible combinations while presets preserve special rules for specific genres.
+
+### Documentation
+- `release-skills`: adds Step 5 (Check README Updates)—ensures README documentation stays in sync with code changes during releases.
+- `README.md`, `README.zh.md`: updates baoyu-comic documentation to reflect new `--art` and `--tone` options replacing `--style`.
+
+## 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
@@ -2,6 +2,166 @@

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

+## 1.21.0 - 2026-01-24
+
+### 新功能
+- `baoyu-cover-image`：扩展宽高比选项——新增 4:3、3:2、3:4 比例；默认值从 2.35:1 改为 16:9 以提高通用性。现在除非通过 `--aspect` 标志明确指定，否则始终确认宽高比。
+- `baoyu-image-gen`：重构 Google provider 以统一支持 Gemini 多模态和 Imagen 模型。为 Gemini 模型新增 `--imageSize` 参数支持（1K/2K/4K）。
+
+## 1.20.0 - 2026-01-24
+
+### 新功能
+- `baoyu-cover-image`：从类型 × 风格二维系统升级为**四维系统**——新增 `--text` 维度（none 无文字、title-only 仅标题、title-subtitle 标题+副标题、text-rich 丰富文字）控制文字密度，新增 `--mood` 维度（subtle 低调、balanced 平衡、bold 醒目）控制情感强度。新增 `--quick` 标志跳过确认，直接使用自动选择。
+
+### 文档
+- `baoyu-cover-image`：新增维度参考文件——`references/dimensions/text.md`（文字密度级别）和 `references/dimensions/mood.md`（氛围强度级别）。
+- `baoyu-cover-image`：更新 base-prompt、first-time-setup 和 preferences-schema 以支持新的四维系统及 v2 配置模式。
+- `README.md`、`README.zh.md`：更新 baoyu-cover-image 文档，反映新的四维系统及 `--text`、`--mood`、`--quick` 选项。
+
+## 1.19.0 - 2026-01-24
+
+### 新功能
+- `baoyu-comic`：新增部分工作流选项——`--storyboard-only`、`--prompts-only`、`--images-only` 和 `--regenerate N`，实现灵活的工作流控制。
+- `baoyu-image-gen`：新增 `--imageSize` 参数用于 Google 提供商（1K/2K/4K），默认质量改为 2k。
+- `baoyu-image-gen`：新增 `GEMINI_API_KEY` 作为 `GOOGLE_API_KEY` 的别名。
+
+### 重构
+- `baoyu-comic`：将详细工作流提取至 `references/workflow.md`，SKILL.md 减少约 400 行，功能完整保留。
+- `baoyu-comic`：将内容信号分析提取至 `references/auto-selection.md`，部分工作流文档提取至 `references/partial-workflows.md`。
+- `baoyu-image-gen`：代码模块化——类型定义提取至 `types.ts`，provider 实现提取至 `providers/google.ts` 和 `providers/openai.ts`。
+
+### 文档
+- `baoyu-comic`：改进 ohmsha 预设文档，明确默认哆啦A梦角色定义和视觉描述。
+
+## 1.18.3 - 2026-01-23
+
+### 文档
+- `baoyu-comic`：改进角色参考处理流程，新增明确的 Strategy A/B 选择逻辑——Strategy A 使用 `--ref` 参数（适用于支持该参数的技能），Strategy B 将角色描述嵌入提示词（适用于不支持的技能）。包含两种方法的具体代码示例。
+
+### 修复
+- `baoyu-image-gen`：从多模态模型列表中移除不支持的 Gemini 模型（`gemini-2.0-flash-exp-image-generation`、`gemini-2.5-flash-preview-native-audio-dialog`）。
+
+## 1.18.2 - 2026-01-23
+
+### 重构
+- 精简 7 个技能的 SKILL.md 文档（`baoyu-compress-image`、`baoyu-danger-gemini-web`、`baoyu-danger-x-to-markdown`、`baoyu-image-gen`、`baoyu-post-to-wechat`、`baoyu-post-to-x`、`baoyu-url-to-markdown`），遵循官方最佳实践——总文档量减少约 300 行，功能完整保留。
+
+### 文档
+- `CLAUDE.md`：新增官方技能编写最佳实践链接、技能加载规则、描述编写指南和渐进式披露模式。
+
+## 1.18.1 - 2026-01-23
+
+### 文档
+- `baoyu-slide-deck`：进度清单新增详细子步骤（1.1-1.3），标记 Step 1.3 为必须步骤并提供明确的 Bash 检查命令用于检测已存在目录。
+
+## 1.18.0 - 2026-01-23
+
+### 新功能
+- `baoyu-slide-deck`：引入基于维度的风格系统——将单一风格定义重构为模块化四维架构：**纹理** (clean 纯净、grid 网格、organic 有机、pixel 像素、paper 纸张)、**氛围** (professional 专业、warm 温暖、cool 冷静、vibrant 鲜艳、dark 暗色、neutral 中性)、**字体** (geometric 几何、humanist 人文、handwritten 手写、editorial 编辑、technical 技术)、**密度** (minimal 极简、balanced 均衡、dense 密集)。16 种预设映射到特定维度组合，并提供「自定义维度」选项实现完全灵活配置。
+- `baoyu-slide-deck`：新增两轮确认工作流——第一轮询问风格/受众/页数/审核偏好，第二轮（可选）在用户选择「自定义维度」时收集具体维度选择。
+- `baoyu-slide-deck`：新增条件性大纲和提示词审核——用户可跳过审核以加快生成，或启用审核以获得更多控制。
+
+### 文档
+- `baoyu-slide-deck`：新增维度参考文件——`references/dimensions/texture.md`、`references/dimensions/mood.md`、`references/dimensions/typography.md`、`references/dimensions/density.md`，以及 `references/dimensions/presets.md`（预设到维度的映射）。
+- `baoyu-slide-deck`：新增设计指南——`references/design-guidelines.md`，包含受众原则、视觉层次、内容密度、配色选择、字体排版和字体推荐。
+- `baoyu-slide-deck`：新增布局参考——`references/layouts.md`，包含布局选项和选择技巧。
+- `baoyu-slide-deck`：新增偏好配置模式——`references/config/preferences-schema.md`，用于 EXTEND.md 配置。
+
+## 1.17.1 - 2026-01-23
+
+### 重构
+- `baoyu-infographic`：精简 SKILL.md 文档——移除冗余内容，优化工作流描述，提升可读性。
+- `baoyu-xhs-images`：优化 Step 0（加载偏好设置）文档——新增更清晰的首次设置流程，使用可视化表格和明确的路径检查指令。
+
+### 改进
+- `baoyu-infographic`：增强 `craft-handmade` 风格的手绘规则——要求所有图像必须保持卡通/插画风格，禁止写实或照片元素。
+
+## 1.17.0 - 2026-01-23
+
+### 新功能
+- `baoyu-cover-image`：新增用户偏好设置支持（通过 EXTEND.md 配置）——可设置水印（内容、位置、透明度）、首选类型/风格、默认宽高比和自定义风格。新增 Step 0 检查项目级（`.baoyu-skills/`）或用户级（`~/.baoyu-skills/`）偏好设置，首次使用时引导设置。
+
+### 重构
+- `baoyu-cover-image`：重构为类型 × 风格二维系统——新增 6 种类型（`hero` 主视觉、`conceptual` 概念、`typography` 文字、`metaphor` 隐喻、`scene` 场景、`minimal` 极简）控制视觉构图，20 种风格控制美学表现。新增 `--type` 和 `--aspect` 选项、类型 × 风格兼容性矩阵，以及带进度清单的结构化工作流。
+
+### 文档
+- `baoyu-cover-image`：新增三个参考文档——`references/config/preferences-schema.md`（EXTEND.md YAML 配置模式）、`references/config/first-time-setup.md`（首次设置流程）、`references/config/watermark-guide.md`（水印配置指南）。
+- `README.md`、`README.zh.md`：更新 baoyu-cover-image 文档，反映新的类型 × 风格系统及 `--type` 和 `--aspect` 选项。
+
+## 1.16.0 - 2026-01-23
+
+### 新功能
+- `baoyu-article-illustrator`：新增用户偏好设置支持（通过 EXTEND.md 配置）——可设置水印（内容、位置、透明度）、首选类型/风格和自定义风格。新增 Step 1.1 检查项目级（`.baoyu-skills/`）或用户级（`~/.baoyu-skills/`）偏好设置，首次使用时引导设置。
+
+### 重构
+- `baoyu-article-illustrator`：重构为类型 × 风格二维系统——将 20+ 种单维风格替换为模块化的类型（infographic 信息图、scene 场景、flowchart 流程图、comparison 对比、framework 框架、timeline 时间线）× 风格（notion、elegant、warm、minimal、blueprint、watercolor、editorial、scientific）架构。新增 `--type` 和 `--density` 选项、类型 × 风格兼容性矩阵，以及结构化提示词构建模板。
+
+### 文档
+- `baoyu-article-illustrator`：新增三个参考文档——`references/styles.md`（风格库和兼容性矩阵）、`references/config/preferences-schema.md`（EXTEND.md YAML 配置模式）、`references/config/first-time-setup.md`（首次设置流程）。
+- `README.md`、`README.zh.md`：更新 baoyu-article-illustrator 文档，反映新的类型 × 风格系统及 `--type` 和 `--style` 选项。
+
+## 1.15.3 - 2026-01-23
+
+### 重构
+- `baoyu-comic`：风格系统重构为三维架构——将 10 个单一风格文件拆分为模块化的 `art-styles/`（5 种画风：ligne-claire 清线、manga 日漫、realistic 写实、ink-brush 水墨、chalk 粉笔）、`tones/`（7 种基调：neutral 中性、warm 温馨、dramatic 戏剧、romantic 浪漫、energetic 活力、vintage 复古、action 动作）和 `presets/`（3 种预设：ohmsha、wuxia 武侠、shoujo 少女漫画）。新的画风 × 基调 × 布局系统支持灵活组合，同时预设保留特定类型的专属规则。
+
+### 文档
+- `release-skills`：新增 Step 5（检查 README 更新）——确保发布时 README 文档与代码变更保持同步。
+- `README.md`、`README.zh.md`：更新 baoyu-comic 文档，反映新的 `--art` 和 `--tone` 选项（替代原 `--style`）。
+
+## 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

 ### 新功能
@@ -78,10 +78,50 @@ 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.

+## Skill Loading Rules
+
+**IMPORTANT**: When working in this project, follow these rules:
+
+| Rule | Description |
+|------|-------------|
+| **Load project skills first** | MUST load all skills from `skills/` directory in current project. Project skills take priority over system/user-level skills with same name. |
+| **Default image generation** | When image generation is needed, use `skills/baoyu-image-gen/SKILL.md` by default (unless user specifies otherwise). |
+
+**Loading Priority** (highest → lowest):
+1. Current project `skills/` directory
+2. User-level skills (`$HOME/.baoyu-skills/`)
+3. System-level skills
+
+## 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.

+**REQUIRED READING**: Before creating a new skill, read the official [Skill authoring best practices](https://platform.claude.com/docs/en/agents-and-tools/agent-skills/best-practices).
+
+### Key Requirements from Official Best Practices
+
+| Requirement | Details |
+|-------------|---------|
+| **Concise is key** | Claude is smart—only add context it doesn't have. Challenge each token. |
+| **name field** | Max 64 chars, lowercase letters/numbers/hyphens only, no "anthropic"/"claude" |
+| **description field** | Max 1024 chars, non-empty, MUST be third person, include what + when to use |
+| **SKILL.md body** | Keep under 500 lines; use separate files for additional content |
+| **Naming convention** | Gerund form preferred (e.g., `processing-pdfs`), but `baoyu-` prefix required here |
+| **References** | Keep one level deep from SKILL.md; avoid nested references |
+| **No time-sensitive info** | Avoid dates/versions that become outdated |
+
+### Steps
+
 1. Create `skills/baoyu-<name>/SKILL.md` with YAML front matter
   - Directory name: `baoyu-<name>`
   - SKILL.md `name` field: `baoyu-<name>`
@@ -109,6 +149,21 @@ npx -y bun skills/baoyu-danger-gemini-web/scripts/main.ts --promptfiles system.m
 - `description`: Brief description of the category
 - `skills`: Array with the skill path

+### Writing Effective Descriptions
+
+**MUST write in third person** (not "I can help you" or "You can use this"):
+
+```yaml
+# Good
+description: Generates Xiaohongshu infographic series from content. Use when user asks for "小红书图片", "XHS images", or "RedNote infographics".
+
+# Bad
+description: I can help you create Xiaohongshu images
+description: You can use this to generate XHS content
+```
+
+Include both **what** the skill does and **when** to use it (triggers/keywords).
+
 ### Script Directory Template

 Every SKILL.md with scripts MUST include this section after Usage:
@@ -132,6 +187,26 @@ Every SKILL.md with scripts MUST include this section after Usage:

 When referencing scripts in workflow sections, use `${SKILL_DIR}/scripts/<name>.ts` so agents can resolve the correct path.

+### Progressive Disclosure
+
+For skills with extensive content, use separate reference files:
+
+```
+skills/baoyu-example/
+├── SKILL.md              # Main instructions (<500 lines)
+├── references/
+│   ├── styles.md         # Style definitions (loaded as needed)
+│   └── examples.md       # Usage examples (loaded as needed)
+└── scripts/
+    └── main.ts           # Executable script
+```
+
+In SKILL.md, link to reference files (one level deep only):
+```markdown
+**Available styles**: See [references/styles.md](references/styles.md)
+**Examples**: See [references/examples.md](references/examples.md)
+```
+
 ## Code Style

 - TypeScript throughout, no comments
@@ -145,9 +220,11 @@ Skills that require image generation MUST delegate to available image generation

 ### Image Generation Skill Selection

-1. Check available image generation skills in `skills/` directory
-2. Read each skill's SKILL.md to understand parameters and capabilities
-3. If multiple image generation skills available, ask user to choose preferred skill
+**Default**: Use `skills/baoyu-image-gen/SKILL.md` (unless user specifies otherwise).
+
+1. Read `skills/baoyu-image-gen/SKILL.md` for parameters and capabilities
+2. If user explicitly requests a different skill, check `skills/` directory for alternatives
+3. Only ask user to choose when they haven't specified and multiple viable options exist

 ### Generation Flow Template

@@ -288,18 +365,66 @@ READMEs use 3-column tables for style previews:

 ## Extension Support

-Every SKILL.md MUST include an Extension Support section at the end:
+Every SKILL.md MUST include two parts for extension support:
+
+### 1. Load Preferences Section (in Step 1 or as "Preferences" section)
+
+For skills with workflows, add as Step 1.1. For utility skills, add as "Preferences (EXTEND.md)" section before Usage:
+
+```markdown
+**1.1 Load Preferences (EXTEND.md)**
+
+Use Bash to check EXTEND.md existence (priority order):
+
+\`\`\`bash
+# Check project-level first
+test -f .baoyu-skills/<skill-name>/EXTEND.md && echo "project"
+
+# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
+test -f "$HOME/.baoyu-skills/<skill-name>/EXTEND.md" && echo "user"
+\`\`\`
+
+┌────────────────────────────────────────────┬───────────────────┐
+│                    Path                    │     Location      │
+├────────────────────────────────────────────┼───────────────────┤
+│ .baoyu-skills/<skill-name>/EXTEND.md       │ Project directory │
+├────────────────────────────────────────────┼───────────────────┤
+│ $HOME/.baoyu-skills/<skill-name>/EXTEND.md │ User home         │
+└────────────────────────────────────────────┴───────────────────┘
+
+┌───────────┬───────────────────────────────────────────────────────────────────────────┐
+│  Result   │                                  Action                                   │
+├───────────┼───────────────────────────────────────────────────────────────────────────┤
+│ Found     │ Read, parse, display summary                                              │
+├───────────┼───────────────────────────────────────────────────────────────────────────┤
+│ Not found │ Ask user with AskUserQuestion (see references/config/first-time-setup.md) │
+└───────────┴───────────────────────────────────────────────────────────────────────────┘
+
+**EXTEND.md Supports**: [List supported configuration options for this skill]
+
+Schema: `references/config/preferences-schema.md`
+```
+
+### 2. Extension Support Section (at the end)
+
+Simplified section that references the preferences section:

 ```markdown
 ## Extension Support

-Custom styles and configurations via EXTEND.md.
-
-**Check paths** (priority order):
-1. `.baoyu-skills/<skill-name>/EXTEND.md` (project)
-2. `~/.baoyu-skills/<skill-name>/EXTEND.md` (user)
-
-If found, load before Step 1. Extension content overrides defaults.
+Custom configurations via EXTEND.md. See **Step 1.1** for paths and supported options.
 ```

-Replace `<skill-name>` with the actual skill name (e.g., `baoyu-cover-image`).
+Or for utility skills without workflow steps:
+
+```markdown
+## Extension Support
+
+Custom configurations via EXTEND.md. See **Preferences** section for paths and supported options.
+```
+
+**Notes**:
+- Replace `<skill-name>` with actual skill name (e.g., `baoyu-cover-image`)
+- Use `$HOME` instead of `~` for cross-platform compatibility (macOS/Linux/WSL)
+- Use `test -f` Bash command for explicit file existence check
+- ASCII tables for clear visual formatting
@@ -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
@@ -54,8 +54,8 @@ Simply tell Claude Code:
 | Plugin | Description | Skills |
 |--------|-------------|--------|
 | **content-skills** | Content generation and publishing | [xhs-images](#baoyu-xhs-images), [infographic](#baoyu-infographic), [cover-image](#baoyu-cover-image), [slide-deck](#baoyu-slide-deck), [comic](#baoyu-comic), [article-illustrator](#baoyu-article-illustrator), [post-to-x](#baoyu-post-to-x), [post-to-wechat](#baoyu-post-to-wechat) |
-| **ai-generation-skills** | AI-powered generation backends | [danger-gemini-web](#baoyu-danger-gemini-web) |
-| **utility-skills** | Utility tools for content processing | [danger-x-to-markdown](#baoyu-danger-x-to-markdown), [compress-image](#baoyu-compress-image) |
+| **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

@@ -245,20 +245,32 @@ Generate professional infographics with 20 layout types and 17 visual styles. An

 #### baoyu-cover-image

-Generate hand-drawn style cover images for articles with multiple style options.
+Generate cover images for articles with 4 dimensions: Type × Style × Text × Mood.

 ```bash
-# From markdown file (auto-select style)
+# Auto-select all dimensions based on content
 /baoyu-cover-image path/to/article.md

-# Specify a style
-/baoyu-cover-image path/to/article.md --style tech
-/baoyu-cover-image path/to/article.md --style warm
+# Quick mode: skip confirmation, use auto-selection
+/baoyu-cover-image path/to/article.md --quick

-# Without title text
+# Specify dimensions
+/baoyu-cover-image path/to/article.md --type conceptual --style blueprint
+/baoyu-cover-image path/to/article.md --text title-subtitle --mood bold
+
+# Specify aspect ratio (default: 2.35:1)
+/baoyu-cover-image path/to/article.md --aspect 16:9
+
+# Visual only (no title text)
 /baoyu-cover-image path/to/article.md --no-title
 ```

+**Four Dimensions**:
+- **Type**: `hero`, `conceptual`, `typography`, `metaphor`, `scene`, `minimal`
+- **Style**: 20 built-in styles (see previews below)
+- **Text**: `none`, `title-only` (default), `title-subtitle`, `text-rich`
+- **Mood**: `subtle`, `balanced` (default), `bold`
+
 Available styles: `elegant` (default), `blueprint`, `bold-editorial`, `chalkboard`, `dark-atmospheric`, `editorial-infographic`, `fantasy-animation`, `flat-doodle`, `intuition-machine`, `minimal`, `nature`, `notion`, `pixel-art`, `playful`, `retro`, `sketch-notes`, `vector-illustration`, `vintage`, `warm`, `watercolor`

 **Style Previews**:
@@ -292,6 +304,9 @@ Generate professional slide deck images from content. Creates comprehensive outl
 /baoyu-slide-deck path/to/article.md --style corporate
 /baoyu-slide-deck path/to/article.md --audience executives

+# Target slide count
+/baoyu-slide-deck path/to/article.md --slides 15
+
 # Outline only (no image generation)
 /baoyu-slide-deck path/to/article.md --outline-only

@@ -299,25 +314,50 @@ Generate professional slide deck images from content. Creates comprehensive outl
 /baoyu-slide-deck path/to/article.md --lang zh
 ```

-**Styles** (visual aesthetics):
+**Options**:

-| Style | Description | Best For |
-|-------|-------------|----------|
-| `blueprint` (default) | Technical schematics, grid texture, engineering precision | Architecture, system design |
-| `notion` | SaaS dashboard aesthetic, card-based layouts, clean data focus | Product demos, SaaS, B2B |
-| `bold-editorial` | High-impact magazine style, bold typography, dark backgrounds | Product launches, keynotes |
-| `corporate` | Navy/gold palette, structured layouts, professional icons | Investor decks, proposals |
-| `dark-atmospheric` | Cinematic dark mode, glowing accents, atmospheric depth | Entertainment, gaming, creative |
-| `editorial-infographic` | Magazine-style explainers, flat illustrations | Tech explainers, research |
-| `fantasy-animation` | Whimsical Ghibli/Disney style, hand-drawn animation | Educational, storytelling |
-| `intuition-machine` | Technical briefing, bilingual labels, aged paper texture | Technical docs, bilingual |
-| `minimal` | Ultra-clean, maximum whitespace, single accent color | Executive briefings, premium |
-| `pixel-art` | Retro 8-bit aesthetic, chunky pixels, nostalgic gaming | Gaming, developer talks |
-| `scientific` | Academic diagrams, biological pathways, precise labeling | Biology, chemistry, medical |
-| `sketch-notes` | Hand-drawn feel, soft brush strokes, warm background | Educational, tutorials |
-| `vector-illustration` | Flat vector, black outlines, retro soft colors | Creative proposals, explainers |
-| `vintage` | Aged-paper aesthetic, historical document styling | Historical, heritage, biography |
-| `watercolor` | Soft hand-painted textures, natural warmth | Lifestyle, wellness, travel |
+| Option | Description |
+|--------|-------------|
+| `--style <name>` | Visual style: preset name or `custom` |
+| `--audience <type>` | Target: beginners, intermediate, experts, executives, general |
+| `--lang <code>` | Output language (en, zh, ja, etc.) |
+| `--slides <number>` | Target slide count (8-25 recommended, max 30) |
+| `--outline-only` | Generate outline only, skip images |
+| `--prompts-only` | Generate outline + prompts, skip images |
+| `--images-only` | Generate images from existing prompts |
+| `--regenerate <N>` | Regenerate specific slide(s): `3` or `2,5,8` |
+
+**Style System**:
+
+Styles are built from 4 dimensions: **Texture** × **Mood** × **Typography** × **Density**
+
+| Dimension | Options |
+|-----------|---------|
+| Texture | clean, grid, organic, pixel, paper |
+| Mood | professional, warm, cool, vibrant, dark, neutral |
+| Typography | geometric, humanist, handwritten, editorial, technical |
+| Density | minimal, balanced, dense |
+
+**Presets** (pre-configured dimension combinations):
+
+| Preset | Dimensions | Best For |
+|--------|------------|----------|
+| `blueprint` (default) | grid + cool + technical + balanced | Architecture, system design |
+| `chalkboard` | organic + warm + handwritten + balanced | Education, tutorials |
+| `corporate` | clean + professional + geometric + balanced | Investor decks, proposals |
+| `minimal` | clean + neutral + geometric + minimal | Executive briefings |
+| `sketch-notes` | organic + warm + handwritten + balanced | Educational, tutorials |
+| `watercolor` | organic + warm + humanist + minimal | Lifestyle, wellness |
+| `dark-atmospheric` | clean + dark + editorial + balanced | Entertainment, gaming |
+| `notion` | clean + neutral + geometric + dense | Product demos, SaaS |
+| `bold-editorial` | clean + vibrant + editorial + balanced | Product launches, keynotes |
+| `editorial-infographic` | clean + cool + editorial + dense | Tech explainers, research |
+| `fantasy-animation` | organic + vibrant + handwritten + minimal | Educational storytelling |
+| `intuition-machine` | clean + cool + technical + dense | Technical docs, academic |
+| `pixel-art` | pixel + vibrant + technical + balanced | Gaming, developer talks |
+| `scientific` | clean + cool + technical + dense | Biology, chemistry, medical |
+| `vector-illustration` | clean + vibrant + humanist + balanced | Creative, children's content |
+| `vintage` | paper + warm + editorial + balanced | Historical, heritage |

 **Style Previews**:

@@ -336,22 +376,23 @@ Generate professional slide deck images from content. Creates comprehensive outl
 | ![watercolor](./screenshots/slide-deck-styles/watercolor.webp) | | |
 | watercolor | | |

-After generation, slides are automatically merged into a `.pptx` file for easy sharing.
+After generation, slides are automatically merged into `.pptx` and `.pdf` files for easy sharing.

 #### baoyu-comic

-Knowledge comic creator supporting multiple styles (Logicomix/Ligne Claire, Ohmsha manga guide). Creates original educational comics with detailed panel layouts and sequential image generation.
+Knowledge comic creator with flexible art style × tone combinations. Creates original educational comics with detailed panel layouts and sequential image generation.

 ```bash
-# From source material
+# From source material (auto-selects art + tone)
 /baoyu-comic posts/turing-story/source.md

-# Specify style
-/baoyu-comic posts/turing-story/source.md --style dramatic
-/baoyu-comic posts/turing-story/source.md --style ohmsha
+# Specify art style and tone
+/baoyu-comic posts/turing-story/source.md --art manga --tone warm
+/baoyu-comic posts/turing-story/source.md --art ink-brush --tone dramatic

-# Custom style (natural language)
-/baoyu-comic posts/turing-story/source.md --style "watercolor with soft edges"
+# Use preset (includes special rules)
+/baoyu-comic posts/turing-story/source.md --style ohmsha
+/baoyu-comic posts/turing-story/source.md --style wuxia

 # Specify layout and aspect ratio
 /baoyu-comic posts/turing-story/source.md --layout cinematic
@@ -367,35 +408,42 @@ Knowledge comic creator supporting multiple styles (Logicomix/Ligne Claire, Ohms
 **Options**:
 | Option | Values |
 |--------|--------|
-| `--style` | `classic` (default), `dramatic`, `warm`, `sepia`, `vibrant`, `ohmsha`, `realistic`, `wuxia`, `shoujo`, or custom description |
+| `--art` | `ligne-claire` (default), `manga`, `realistic`, `ink-brush`, `chalk` |
+| `--tone` | `neutral` (default), `warm`, `dramatic`, `romantic`, `energetic`, `vintage`, `action` |
+| `--style` | `ohmsha`, `wuxia`, `shoujo` (presets with special rules) |
 | `--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. |

-**Styles** (visual aesthetics):
+**Art Styles** (rendering technique):

-| Style | Description | Best For |
-|-------|-------------|----------|
-| `classic` (default) | Traditional Ligne Claire with clean uniform outlines, flat colors, detailed backgrounds | Biographies, balanced narratives, educational content |
-| `dramatic` | High contrast with heavy shadows, intense expressions, angular compositions | Pivotal discoveries, conflicts, climactic scenes |
-| `warm` | Soft edges, golden tones, cozy interiors with nostalgic feel | Personal stories, childhood scenes, mentorship |
-| `sepia` | Vintage illustration style with aged paper effect, period-accurate details | Pre-1950s stories, classical science, historical figures |
-| `vibrant` | Energetic lines with weight variation, bright colors, dynamic poses | Science explanations, "aha" moments, young audience |
-| `ohmsha` | Manga guide style with visual metaphors, gadgets, student/mentor dynamic | Technical tutorials, complex concepts (ML, physics) |
-| `realistic` | Full-color realistic manga with digital painting, smooth gradients, accurate proportions | Wine, food, business, lifestyle, professional topics |
-| `wuxia` | Hong Kong martial arts style with ink brush strokes, dynamic combat, qi effects | Martial arts, wuxia/xianxia, Chinese historical fiction |
-| `shoujo` | Classic shoujo manga with large sparkling eyes, flowers, sparkles, soft pink/lavender palette | Romance, coming-of-age, friendship, emotional drama |
+| Art Style | Description |
+|-----------|-------------|
+| `ligne-claire` | Uniform lines, flat colors, European comic tradition (Tintin, Logicomix) |
+| `manga` | Large eyes, manga conventions, expressive emotions |
+| `realistic` | Digital painting, realistic proportions, sophisticated |
+| `ink-brush` | Chinese brush strokes, ink wash effects |
+| `chalk` | Chalkboard aesthetic, hand-drawn warmth |

-**Style Previews**:
+**Tones** (mood/atmosphere):

-| | | |
-|:---:|:---:|:---:|
-| ![classic](./screenshots/comic-styles/classic.webp) | ![dramatic](./screenshots/comic-styles/dramatic.webp) | ![warm](./screenshots/comic-styles/warm.webp) |
-| classic | dramatic | warm |
-| ![sepia](./screenshots/comic-styles/sepia.webp) | ![vibrant](./screenshots/comic-styles/vibrant.webp) | ![ohmsha](./screenshots/comic-styles/ohmsha.webp) |
-| sepia | vibrant | ohmsha |
-| ![realistic](./screenshots/comic-styles/realistic.webp) | ![wuxia](./screenshots/comic-styles/wuxia.webp) | ![shoujo](./screenshots/comic-styles/shoujo.webp) |
-| realistic | wuxia | shoujo |
+| Tone | Description |
+|------|-------------|
+| `neutral` | Balanced, rational, educational |
+| `warm` | Nostalgic, personal, comforting |
+| `dramatic` | High contrast, intense, powerful |
+| `romantic` | Soft, beautiful, decorative elements |
+| `energetic` | Bright, dynamic, exciting |
+| `vintage` | Historical, aged, period authenticity |
+| `action` | Speed lines, impact effects, combat |
+
+**Presets** (art + tone + special rules):
+
+| Preset | Equivalent | Special Rules |
+|--------|-----------|---------------|
+| `ohmsha` | manga + neutral | Visual metaphors, NO talking heads, gadget reveals |
+| `wuxia` | ink-brush + action | Qi effects, combat visuals, atmospheric elements |
+| `shoujo` | manga + romantic | Decorative elements, eye details, romantic beats |

 **Layouts** (panel arrangement):
 | Layout | Panels/Page | Best for |
@@ -418,42 +466,45 @@ Knowledge comic creator supporting multiple styles (Logicomix/Ligne Claire, Ohms

 #### baoyu-article-illustrator

-Smart article illustration skill. Analyzes article content and generates illustrations at positions requiring visual aids.
+Smart article illustration skill with Type × Style two-dimension approach. Analyzes article structure, identifies positions requiring visual aids, and generates illustrations.

 ```bash
-# Auto-select style based on content
+# Auto-select type and style based on content
 /baoyu-article-illustrator path/to/article.md

-# Specify a style
-/baoyu-article-illustrator path/to/article.md --style warm
-/baoyu-article-illustrator path/to/article.md --style watercolor
+# Specify type
+/baoyu-article-illustrator path/to/article.md --type infographic
+
+# Specify style
+/baoyu-article-illustrator path/to/article.md --style blueprint
+
+# Combine type and style
+/baoyu-article-illustrator path/to/article.md --type flowchart --style notion
 ```

+**Types** (information structure):
+
+| Type | Description | Best For |
+|------|-------------|----------|
+| `infographic` | Data visualization, charts, metrics | Technical articles, data analysis |
+| `scene` | Atmospheric illustration, mood rendering | Narrative, personal stories |
+| `flowchart` | Process diagrams, step visualization | Tutorials, workflows |
+| `comparison` | Side-by-side, before/after contrast | Product comparisons |
+| `framework` | Concept maps, relationship diagrams | Methodologies, architecture |
+| `timeline` | Chronological progression | History, project progress |
+
 **Styles** (visual aesthetics):

 | Style | Description | Best For |
 |-------|-------------|----------|
 | `notion` (default) | Minimalist hand-drawn line art | Knowledge sharing, SaaS, productivity |
-| `elegant` | Refined, sophisticated, professional | Business, thought leadership |
-| `warm` | Friendly, approachable, human-centered | Personal growth, lifestyle |
-| `minimal` | Ultra-clean, zen-like, focused | Philosophy, minimalism |
-| `playful` | Fun, creative, whimsical | Tutorials, beginner guides |
-| `nature` | Organic, calm, earthy | Sustainability, wellness |
-| `sketch` | Raw, authentic, notebook-style | Ideas, brainstorming |
+| `elegant` | Refined, sophisticated | Business, thought leadership |
+| `warm` | Friendly, approachable | Personal growth, lifestyle |
+| `minimal` | Ultra-clean, zen-like | Philosophy, minimalism |
+| `blueprint` | Technical schematics | Architecture, system design |
 | `watercolor` | Soft artistic with natural warmth | Lifestyle, travel, creative |
-| `vintage` | Nostalgic aged-paper aesthetic | Historical, biography |
-| `scientific` | Academic precise diagrams | Biology, chemistry, technical |
-| `chalkboard` | Classroom chalk drawing style | Education, tutorials |
 | `editorial` | Magazine-style infographic | Tech explainers, journalism |
-| `flat` | Modern flat vector illustration | Startups, digital |
-| `flat-doodle` | Bold outlines, pastel colors, cute | Productivity, SaaS, workflows |
-| `retro` | 80s/90s vibrant nostalgic | Pop culture, entertainment |
-| `blueprint` | Technical schematics, engineering | Architecture, system design |
-| `vector-illustration` | Flat vector, black outlines, retro | Educational, creative, brand |
-| `sketch-notes` | Soft hand-drawn, warm feel | Knowledge sharing, tutorials |
-| `pixel-art` | Retro 8-bit gaming aesthetic | Gaming, tech, developer |
-| `intuition-machine` | Technical briefing, bilingual | Academic, technical, research |
-| `fantasy-animation` | Ghibli/Disney whimsical style | Storytelling, children's |
+| `scientific` | Academic precise diagrams | Biology, chemistry, technical |

 **Style Previews**:

@@ -461,18 +512,10 @@ Smart article illustration skill. Analyzes article content and generates illustr
 |:---:|:---:|:---:|
 | ![notion](./screenshots/article-illustrator-styles/notion.webp) | ![elegant](./screenshots/article-illustrator-styles/elegant.webp) | ![warm](./screenshots/article-illustrator-styles/warm.webp) |
 | notion | elegant | warm |
-| ![minimal](./screenshots/article-illustrator-styles/minimal.webp) | ![playful](./screenshots/article-illustrator-styles/playful.webp) | ![nature](./screenshots/article-illustrator-styles/nature.webp) |
-| minimal | playful | nature |
-| ![sketch](./screenshots/article-illustrator-styles/sketch.webp) | ![watercolor](./screenshots/article-illustrator-styles/watercolor.webp) | ![vintage](./screenshots/article-illustrator-styles/vintage.webp) |
-| sketch | watercolor | vintage |
-| ![scientific](./screenshots/article-illustrator-styles/scientific.webp) | ![chalkboard](./screenshots/article-illustrator-styles/chalkboard.webp) | ![editorial](./screenshots/article-illustrator-styles/editorial.webp) |
-| scientific | chalkboard | editorial |
-| ![flat](./screenshots/article-illustrator-styles/flat.webp) | ![retro](./screenshots/article-illustrator-styles/retro.webp) | ![blueprint](./screenshots/article-illustrator-styles/blueprint.webp) |
-| flat | retro | blueprint |
-| ![vector-illustration](./screenshots/article-illustrator-styles/vector-illustration.webp) | ![sketch-notes](./screenshots/article-illustrator-styles/sketch-notes.webp) | ![pixel-art](./screenshots/article-illustrator-styles/pixel-art.webp) |
-| vector-illustration | sketch-notes | pixel-art |
-| ![intuition-machine](./screenshots/article-illustrator-styles/intuition-machine.webp) | ![fantasy-animation](./screenshots/article-illustrator-styles/fantasy-animation.webp) | ![flat-doodle](./screenshots/article-illustrator-styles/flat-doodle.webp) |
-| intuition-machine | fantasy-animation | flat-doodle |
+| ![minimal](./screenshots/article-illustrator-styles/minimal.webp) | ![blueprint](./screenshots/article-illustrator-styles/blueprint.webp) | ![watercolor](./screenshots/article-illustrator-styles/watercolor.webp) |
+| minimal | blueprint | watercolor |
+| ![editorial](./screenshots/article-illustrator-styles/editorial.webp) | ![scientific](./screenshots/article-illustrator-styles/scientific.webp) | |
+| editorial | scientific | |

 #### baoyu-post-to-x

@@ -515,6 +558,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.
@@ -537,6 +629,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.
@@ -568,6 +689,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
 ```

 ### 注册插件市场
@@ -54,8 +54,8 @@ npx add-skill jimliu/baoyu-skills
 | 插件 | 说明 | 包含技能 |
 |------|------|----------|
 | **content-skills** | 内容生成和发布 | [xhs-images](#baoyu-xhs-images), [infographic](#baoyu-infographic), [cover-image](#baoyu-cover-image), [slide-deck](#baoyu-slide-deck), [comic](#baoyu-comic), [article-illustrator](#baoyu-article-illustrator), [post-to-x](#baoyu-post-to-x), [post-to-wechat](#baoyu-post-to-wechat) |
-| **ai-generation-skills** | AI 生成后端 | [danger-gemini-web](#baoyu-danger-gemini-web) |
-| **utility-skills** | 内容处理工具 | [danger-x-to-markdown](#baoyu-danger-x-to-markdown), [compress-image](#baoyu-compress-image) |
+| **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) |

 ## 更新技能

@@ -245,20 +245,32 @@ npx add-skill jimliu/baoyu-skills

 #### baoyu-cover-image

-为文章生成手绘风格封面图，支持多种风格选项。
+为文章生成封面图，支持四维定制系统：类型 × 风格 × 文字 × 氛围。

 ```bash
-# 从 markdown 文件生成（自动选择风格）
+# 根据内容自动选择所有维度
 /baoyu-cover-image path/to/article.md

-# 指定风格
-/baoyu-cover-image path/to/article.md --style tech
-/baoyu-cover-image path/to/article.md --style warm
+# 快速模式：跳过确认，使用自动选择
+/baoyu-cover-image path/to/article.md --quick

-# 不包含标题文字
+# 指定维度
+/baoyu-cover-image path/to/article.md --type conceptual --style blueprint
+/baoyu-cover-image path/to/article.md --text title-subtitle --mood bold
+
+# 指定宽高比（默认：2.35:1）
+/baoyu-cover-image path/to/article.md --aspect 16:9
+
+# 纯视觉（不含标题文字）
 /baoyu-cover-image path/to/article.md --no-title
 ```

+**四个维度**：
+- **类型 (Type)**：`hero`、`conceptual`、`typography`、`metaphor`、`scene`、`minimal`
+- **风格 (Style)**：20 种内置风格（见下方预览）
+- **文字 (Text)**：`none`、`title-only`（默认）、`title-subtitle`、`text-rich`
+- **氛围 (Mood)**：`subtle`、`balanced`（默认）、`bold`
+
 可用风格：`elegant`（默认）、`blueprint`、`bold-editorial`、`chalkboard`、`dark-atmospheric`、`editorial-infographic`、`fantasy-animation`、`flat-doodle`、`intuition-machine`、`minimal`、`nature`、`notion`、`pixel-art`、`playful`、`retro`、`sketch-notes`、`vector-illustration`、`vintage`、`warm`、`watercolor`

 **风格预览**：
@@ -292,6 +304,9 @@ npx add-skill jimliu/baoyu-skills
 /baoyu-slide-deck path/to/article.md --style corporate
 /baoyu-slide-deck path/to/article.md --audience executives

+# 指定页数
+/baoyu-slide-deck path/to/article.md --slides 15
+
 # 仅生成大纲（不生成图片）
 /baoyu-slide-deck path/to/article.md --outline-only

@@ -299,25 +314,50 @@ npx add-skill jimliu/baoyu-skills
 /baoyu-slide-deck path/to/article.md --lang zh
 ```

-**风格**（视觉美学）：
+**选项**：

-| 风格 | 描述 | 适用场景 |
-|------|------|----------|
-| `blueprint`（默认） | 技术蓝图风格，网格纹理，工程精度 | 架构设计、系统设计 |
-| `notion` | SaaS 仪表盘美学，卡片式布局，数据清晰 | 产品演示、SaaS、B2B |
-| `bold-editorial` | 杂志社论风格，粗体排版，深色背景 | 产品发布、主题演讲 |
-| `corporate` | 海军蓝/金色配色，结构化布局，专业图标 | 投资者演示、客户提案 |
-| `dark-atmospheric` | 电影级暗色调，发光效果，氛围感 | 娱乐、游戏、创意 |
-| `editorial-infographic` | 杂志风格信息图，扁平插画 | 科技解说、研究报告 |
-| `fantasy-animation` | 吉卜力/迪士尼风格，手绘动画 | 教育、故事讲述 |
-| `intuition-machine` | 技术简报，双语标签，做旧纸张纹理 | 技术文档、双语内容 |
-| `minimal` | 极简风格，大量留白，单一强调色 | 高管简报、高端品牌 |
-| `pixel-art` | 复古 8-bit 像素风，怀旧游戏感 | 游戏、开发者分享 |
-| `scientific` | 学术图表，生物通路，精确标注 | 生物、化学、医学 |
-| `sketch-notes` | 手绘风格，柔和笔触，暖白色背景 | 教育、教程、知识分享 |
-| `vector-illustration` | 扁平矢量风格，黑色轮廓线，复古柔和配色 | 创意提案、说明性内容 |
-| `vintage` | 做旧纸张美学，历史文档风格 | 历史、传记、人文 |
-| `watercolor` | 柔和手绘水彩纹理，自然温暖 | 生活方式、健康、旅行 |
+| 选项 | 说明 |
+|------|------|
+| `--style <name>` | 视觉风格：预设名称或 `custom` |
+| `--audience <type>` | 目标受众：beginners、intermediate、experts、executives、general |
+| `--lang <code>` | 输出语言（en、zh、ja 等） |
+| `--slides <number>` | 目标页数（推荐 8-25，最多 30） |
+| `--outline-only` | 仅生成大纲，跳过图片 |
+| `--prompts-only` | 生成大纲 + 提示词，跳过图片 |
+| `--images-only` | 从现有提示词生成图片 |
+| `--regenerate <N>` | 重新生成指定页：`3` 或 `2,5,8` |
+
+**风格系统**：
+
+风格由 4 个维度组合而成：**纹理** × **氛围** × **字体** × **密度**
+
+| 维度 | 选项 |
+|------|------|
+| 纹理 | clean 纯净、grid 网格、organic 有机、pixel 像素、paper 纸张 |
+| 氛围 | professional 专业、warm 温暖、cool 冷静、vibrant 鲜艳、dark 暗色、neutral 中性 |
+| 字体 | geometric 几何、humanist 人文、handwritten 手写、editorial 编辑、technical 技术 |
+| 密度 | minimal 极简、balanced 均衡、dense 密集 |
+
+**预设**（预配置的维度组合）：
+
+| 预设 | 维度组合 | 适用场景 |
+|------|----------|----------|
+| `blueprint`（默认） | grid + cool + technical + balanced | 架构设计、系统设计 |
+| `chalkboard` | organic + warm + handwritten + balanced | 教育、教程 |
+| `corporate` | clean + professional + geometric + balanced | 投资者演示、提案 |
+| `minimal` | clean + neutral + geometric + minimal | 高管简报 |
+| `sketch-notes` | organic + warm + handwritten + balanced | 教育、教程 |
+| `watercolor` | organic + warm + humanist + minimal | 生活方式、健康 |
+| `dark-atmospheric` | clean + dark + editorial + balanced | 娱乐、游戏 |
+| `notion` | clean + neutral + geometric + dense | 产品演示、SaaS |
+| `bold-editorial` | clean + vibrant + editorial + balanced | 产品发布、主题演讲 |
+| `editorial-infographic` | clean + cool + editorial + dense | 科技解说、研究 |
+| `fantasy-animation` | organic + vibrant + handwritten + minimal | 教育故事 |
+| `intuition-machine` | clean + cool + technical + dense | 技术文档、学术 |
+| `pixel-art` | pixel + vibrant + technical + balanced | 游戏、开发者 |
+| `scientific` | clean + cool + technical + dense | 生物、化学、医学 |
+| `vector-illustration` | clean + vibrant + humanist + balanced | 创意、儿童内容 |
+| `vintage` | paper + warm + editorial + balanced | 历史、传记 |

 **风格预览**：

@@ -336,22 +376,23 @@ npx add-skill jimliu/baoyu-skills
 | ![watercolor](./screenshots/slide-deck-styles/watercolor.webp) | | |
 | watercolor | | |

-生成完成后，所有幻灯片会自动合并为 `.pptx` 文件，方便分享。
+生成完成后，所有幻灯片会自动合并为 `.pptx` 和 `.pdf` 文件，方便分享。

 #### baoyu-comic

-知识漫画创作器，支持多种风格（Logicomix/清线风格、欧姆社漫画教程风格）。创作带有详细分镜布局的原创教育漫画，逐页生成图片。
+知识漫画创作器，支持画风 × 基调灵活组合。创作带有详细分镜布局的原创教育漫画，逐页生成图片。

 ```bash
-# 从素材文件生成
+# 从素材文件生成（自动选择画风 + 基调）
 /baoyu-comic posts/turing-story/source.md

-# 指定风格
-/baoyu-comic posts/turing-story/source.md --style dramatic
-/baoyu-comic posts/turing-story/source.md --style ohmsha
+# 指定画风和基调
+/baoyu-comic posts/turing-story/source.md --art manga --tone warm
+/baoyu-comic posts/turing-story/source.md --art ink-brush --tone dramatic

-# 自定义风格（自然语言描述）
-/baoyu-comic posts/turing-story/source.md --style "水彩风格，边缘柔和"
+# 使用预设（包含特殊规则）
+/baoyu-comic posts/turing-story/source.md --style ohmsha
+/baoyu-comic posts/turing-story/source.md --style wuxia

 # 指定布局和比例
 /baoyu-comic posts/turing-story/source.md --layout cinematic
@@ -367,35 +408,42 @@ npx add-skill jimliu/baoyu-skills
 **选项**：
 | 选项 | 取值 |
 |------|------|
-| `--style` | `classic`（默认）、`dramatic`、`warm`、`sepia`、`vibrant`、`ohmsha`、`realistic`、`wuxia`、`shoujo`，或自然语言描述 |
+| `--art` | `ligne-claire`（默认）、`manga`、`realistic`、`ink-brush`、`chalk` |
+| `--tone` | `neutral`（默认）、`warm`、`dramatic`、`romantic`、`energetic`、`vintage`、`action` |
+| `--style` | `ohmsha`、`wuxia`、`shoujo`（预设，含特殊规则） |
 | `--layout` | `standard`（默认）、`cinematic`、`dense`、`splash`、`mixed`、`webtoon` |
 | `--aspect` | `3:4`（默认，竖版）、`4:3`（横版）、`16:9`（宽屏） |
 | `--lang` | `auto`（默认）、`zh`、`en`、`ja` 等 |

-**风格**（视觉美学）：
+**画风**（渲染技法）：

-| 风格 | 描述 | 适用场景 |
-|------|------|----------|
-| `classic`（默认） | 传统清线风格，统一线条、平涂色彩、精细背景 | 传记、平衡叙事、教育内容 |
-| `dramatic` | 高对比度，重阴影、紧张表情、棱角分明的构图 | 重大发现、冲突、高潮场景 |
-| `warm` | 柔和边缘、金色调、温馨室内、怀旧感 | 个人故事、童年场景、师生情 |
-| `sepia` | 复古插画风格、做旧纸张效果、时代准确细节 | 1950 年前故事、古典科学、历史人物 |
-| `vibrant` | 富有活力的线条、明亮色彩、动感姿态 | 科学解说、"顿悟"时刻、青少年读者 |
-| `ohmsha` | 欧姆社漫画风格，视觉比喻、道具、学生/导师互动 | 技术教程、复杂概念（机器学习、物理） |
-| `realistic` | 全彩写实日漫风格，数字绘画、平滑渐变、准确人体比例 | 红酒、美食、商业、生活方式、专业话题 |
-| `wuxia` | 港漫武侠风格，水墨笔触、动态打斗、气功特效 | 武侠、仙侠、中国历史小说 |
-| `shoujo` | 经典少女漫画风格，大眼睛闪亮高光、花朵星星装饰、粉紫色调 | 恋爱、青春成长、友情、情感故事 |
+| 画风 | 描述 |
+|------|------|
+| `ligne-claire` | 统一线条、平涂色彩，欧洲漫画传统（丁丁、Logicomix） |
+| `manga` | 大眼睛、日漫风格、表情丰富 |
+| `realistic` | 数字绘画、写实比例、精致细腻 |
+| `ink-brush` | 中国水墨笔触、水墨晕染效果 |
+| `chalk` | 黑板粉笔风格、手绘温暖感 |

-**风格预览**：
+**基调**（氛围/情绪）：

-| | | |
-|:---:|:---:|:---:|
-| ![classic](./screenshots/comic-styles/classic.webp) | ![dramatic](./screenshots/comic-styles/dramatic.webp) | ![warm](./screenshots/comic-styles/warm.webp) |
-| classic | dramatic | warm |
-| ![sepia](./screenshots/comic-styles/sepia.webp) | ![vibrant](./screenshots/comic-styles/vibrant.webp) | ![ohmsha](./screenshots/comic-styles/ohmsha.webp) |
-| sepia | vibrant | ohmsha |
-| ![realistic](./screenshots/comic-styles/realistic.webp) | ![wuxia](./screenshots/comic-styles/wuxia.webp) | ![shoujo](./screenshots/comic-styles/shoujo.webp) |
-| realistic | wuxia | shoujo |
+| 基调 | 描述 |
+|------|------|
+| `neutral` | 平衡、理性、教育性 |
+| `warm` | 怀旧、个人化、温馨 |
+| `dramatic` | 高对比、紧张、有力 |
+| `romantic` | 柔和、唯美、装饰性元素 |
+| `energetic` | 明亮、动感、活力 |
+| `vintage` | 历史感、做旧、时代真实性 |
+| `action` | 速度线、冲击效果、战斗 |
+
+**预设**（画风 + 基调 + 特殊规则）：
+
+| 预设 | 等价于 | 特殊规则 |
+|------|--------|----------|
+| `ohmsha` | manga + neutral | 视觉比喻、禁止大头对话、道具揭秘 |
+| `wuxia` | ink-brush + action | 气功特效、战斗视觉、氛围元素 |
+| `shoujo` | manga + romantic | 装饰元素、眼睛细节、浪漫情节 |

 **布局**（分镜排列）：
 | 布局 | 每页分镜数 | 适用场景 |
@@ -418,42 +466,45 @@ npx add-skill jimliu/baoyu-skills

 #### baoyu-article-illustrator

-智能文章插图技能。分析文章内容，在需要视觉辅助的位置生成插图。
+智能文章插图技能，采用类型 × 风格二维系统。分析文章结构，识别需要视觉辅助的位置，生成插图。

 ```bash
-# 根据内容自动选择风格
+# 根据内容自动选择类型和风格
 /baoyu-article-illustrator path/to/article.md

+# 指定类型
+/baoyu-article-illustrator path/to/article.md --type infographic
+
 # 指定风格
-/baoyu-article-illustrator path/to/article.md --style warm
-/baoyu-article-illustrator path/to/article.md --style watercolor
+/baoyu-article-illustrator path/to/article.md --style blueprint
+
+# 组合类型和风格
+/baoyu-article-illustrator path/to/article.md --type flowchart --style notion
 ```

+**类型**（信息结构）：
+
+| 类型 | 描述 | 适用场景 |
+|------|------|----------|
+| `infographic` | 数据可视化、图表、指标 | 技术文章、数据分析 |
+| `scene` | 氛围插图、情绪渲染 | 叙事、个人故事 |
+| `flowchart` | 流程图、步骤可视化 | 教程、工作流 |
+| `comparison` | 并排对比、前后对照 | 产品比较 |
+| `framework` | 概念图、关系图 | 方法论、架构 |
+| `timeline` | 时间线进展 | 历史、项目进度 |
+
 **风格**（视觉美学）：

 | 风格 | 描述 | 适用场景 |
 |------|------|----------|
 | `notion`（默认） | 极简手绘线条画 | 知识分享、SaaS、生产力 |
-| `elegant` | 精致、优雅、专业 | 商业、思想领导力 |
-| `warm` | 友好、亲切、人文关怀 | 个人成长、生活方式 |
-| `minimal` | 极简、禅意、专注 | 哲学、极简主义 |
-| `playful` | 有趣、创意、俏皮 | 教程、新手指南 |
-| `nature` | 自然、平静、质朴 | 可持续发展、健康 |
-| `sketch` | 原始、真实、笔记风格 | 想法、头脑风暴 |
+| `elegant` | 精致、优雅 | 商业、思想领导力 |
+| `warm` | 友好、亲切 | 个人成长、生活方式 |
+| `minimal` | 极简、禅意 | 哲学、极简主义 |
+| `blueprint` | 技术蓝图 | 架构、系统设计 |
 | `watercolor` | 柔和艺术感、自然温暖 | 生活方式、旅行、创意 |
-| `vintage` | 怀旧做旧纸张美学 | 历史、传记 |
-| `scientific` | 学术精确图表 | 生物、化学、技术 |
-| `chalkboard` | 教室粉笔画风格 | 教育、教程 |
 | `editorial` | 杂志风格信息图 | 科技解说、新闻 |
-| `flat` | 现代扁平矢量插画 | 创业公司、数字化 |
-| `flat-doodle` | 粗轮廓、粉彩色、可爱风 | 生产力、SaaS、工作流 |
-| `retro` | 80/90 年代复古鲜艳 | 流行文化、娱乐 |
-| `blueprint` | 技术蓝图、工程精度 | 架构、系统设计 |
-| `vector-illustration` | 扁平矢量、黑色轮廓、复古 | 教育、创意、品牌 |
-| `sketch-notes` | 柔和手绘、温暖感 | 知识分享、教程 |
-| `pixel-art` | 复古 8-bit 游戏风格 | 游戏、技术、开发者 |
-| `intuition-machine` | 技术简报、双语标签 | 学术、技术、研究 |
-| `fantasy-animation` | 吉卜力/迪士尼童话风格 | 故事、儿童、创意 |
+| `scientific` | 学术精确图表 | 生物、化学、技术 |

 **风格预览**：

@@ -461,18 +512,10 @@ npx add-skill jimliu/baoyu-skills
 |:---:|:---:|:---:|
 | ![notion](./screenshots/article-illustrator-styles/notion.webp) | ![elegant](./screenshots/article-illustrator-styles/elegant.webp) | ![warm](./screenshots/article-illustrator-styles/warm.webp) |
 | notion | elegant | warm |
-| ![minimal](./screenshots/article-illustrator-styles/minimal.webp) | ![playful](./screenshots/article-illustrator-styles/playful.webp) | ![nature](./screenshots/article-illustrator-styles/nature.webp) |
-| minimal | playful | nature |
-| ![sketch](./screenshots/article-illustrator-styles/sketch.webp) | ![watercolor](./screenshots/article-illustrator-styles/watercolor.webp) | ![vintage](./screenshots/article-illustrator-styles/vintage.webp) |
-| sketch | watercolor | vintage |
-| ![scientific](./screenshots/article-illustrator-styles/scientific.webp) | ![chalkboard](./screenshots/article-illustrator-styles/chalkboard.webp) | ![editorial](./screenshots/article-illustrator-styles/editorial.webp) |
-| scientific | chalkboard | editorial |
-| ![flat](./screenshots/article-illustrator-styles/flat.webp) | ![retro](./screenshots/article-illustrator-styles/retro.webp) | ![blueprint](./screenshots/article-illustrator-styles/blueprint.webp) |
-| flat | retro | blueprint |
-| ![vector-illustration](./screenshots/article-illustrator-styles/vector-illustration.webp) | ![sketch-notes](./screenshots/article-illustrator-styles/sketch-notes.webp) | ![pixel-art](./screenshots/article-illustrator-styles/pixel-art.webp) |
-| vector-illustration | sketch-notes | pixel-art |
-| ![intuition-machine](./screenshots/article-illustrator-styles/intuition-machine.webp) | ![fantasy-animation](./screenshots/article-illustrator-styles/fantasy-animation.webp) | ![flat-doodle](./screenshots/article-illustrator-styles/flat-doodle.webp) |
-| intuition-machine | fantasy-animation | flat-doodle |
+| ![minimal](./screenshots/article-illustrator-styles/minimal.webp) | ![blueprint](./screenshots/article-illustrator-styles/blueprint.webp) | ![watercolor](./screenshots/article-illustrator-styles/watercolor.webp) |
+| minimal | blueprint | watercolor |
+| ![editorial](./screenshots/article-illustrator-styles/editorial.webp) | ![scientific](./screenshots/article-illustrator-styles/scientific.webp) | |
+| editorial | scientific | |

 #### baoyu-post-to-x

@@ -515,6 +558,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 交互，生成文本和图片。
@@ -537,6 +629,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 文章。
@@ -568,6 +689,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,376 +1,452 @@
 ---
 name: baoyu-article-illustrator
-description: Smart article illustration skill. Analyzes article content and generates illustrations at positions requiring visual aids with multiple style options. Use when user asks to "add illustrations to article", "generate images for article", or "illustrate article".
+description: Analyzes article structure, identifies positions requiring visual aids, generates illustrations with Type × Style two-dimension approach. Use when user asks to "illustrate article", "add images", "generate images for article", or "为文章配图".
 ---

-# Smart Article Illustration Skill
+# Article Illustrator

-Analyze article structure and content, identify positions requiring visual aids, and generate illustrations with flexible style options.
+Analyze articles, identify illustration positions, generate images with Type × Style consistency.

 ## Usage

 ```bash
-# Auto-select style based on content
+# Auto-select type and style based on content
 /baoyu-article-illustrator path/to/article.md

-# Specify a style
-/baoyu-article-illustrator path/to/article.md --style warm
-/baoyu-article-illustrator path/to/article.md --style minimal
-/baoyu-article-illustrator path/to/article.md --style watercolor
+# Specify type
+/baoyu-article-illustrator path/to/article.md --type infographic

-# Combine with other options
-/baoyu-article-illustrator path/to/article.md --style playful
+# Specify style
+/baoyu-article-illustrator path/to/article.md --style blueprint
+
+# Combine type and style
+/baoyu-article-illustrator path/to/article.md --type flowchart --style notion
+
+# Specify density
+/baoyu-article-illustrator path/to/article.md --density rich
+
+# Direct content input
+/baoyu-article-illustrator
+[paste content]
 ```

 ## Options

 | Option | Description |
 |--------|-------------|
-| `--style <name>` | Specify illustration style (see Style Gallery below) |
+| `--type <name>` | Illustration type (see Type Gallery) |
+| `--style <name>` | Visual style (see Style Gallery) |
+| `--density <level>` | Image count: minimal / balanced / rich |
+
+## Two Dimensions
+
+| Dimension | Controls | Examples |
+|-----------|----------|----------|
+| **Type** | Information structure, content layout | infographic, scene, flowchart, comparison, framework, timeline |
+| **Style** | Visual aesthetics, colors, mood | notion, warm, minimal, blueprint, watercolor, elegant |
+
+Type × Style can be freely combined. Example: `--type infographic --style blueprint` creates technical data visualization with schematic aesthetics.
+
+## Type Gallery
+
+| Type | Description | Best For |
+|------|-------------|----------|
+| `infographic` | Data visualization, charts, metrics | Technical articles, data analysis, comparisons |
+| `scene` | Atmospheric illustration, mood rendering | Narrative articles, personal stories, emotional content |
+| `flowchart` | Process diagrams, step visualization | Tutorials, workflows, decision trees |
+| `comparison` | Side-by-side, before/after contrast | Product comparisons, option evaluations |
+| `framework` | Concept maps, relationship diagrams | Methodologies, models, architecture design |
+| `timeline` | Chronological progression | History, project progress, evolution |
+
+## Density Options
+
+| Density | Count | Description |
+|---------|-------|-------------|
+| `minimal` | 1-2 | Core concepts only |
+| `balanced` (Default) | 3-5 | Major sections coverage |
+| `rich` | 6+ | Rich visual support |

 ## Style Gallery

 | Style | Description | Best For |
 |-------|-------------|----------|
-| `notion` (Default) | Minimalist hand-drawn line art, intellectual | Knowledge sharing, SaaS, productivity |
-| `elegant` | Refined, sophisticated, professional | Business, thought leadership |
-| `warm` | Friendly, approachable, human-centered | Personal growth, lifestyle, education |
-| `minimal` | Ultra-clean, zen-like, focused | Philosophy, minimalism, core concepts |
-| `playful` | Fun, creative, whimsical | Tutorials, beginner guides, fun topics |
-| `nature` | Organic, calm, earthy | Sustainability, wellness, outdoor |
-| `sketch` | Raw, authentic, notebook-style | Ideas, brainstorming, drafts |
+| `notion` (Default) | Minimalist hand-drawn line art | Knowledge sharing, SaaS, productivity |
+| `elegant` | Refined, sophisticated | Business, thought leadership |
+| `warm` | Friendly, approachable | Personal growth, lifestyle, education |
+| `minimal` | Ultra-clean, zen-like | Philosophy, minimalism, core concepts |
+| `blueprint` | Technical schematics | Architecture, system design, engineering |
 | `watercolor` | Soft artistic with natural warmth | Lifestyle, travel, creative |
-| `vintage` | Nostalgic aged-paper aesthetic | Historical, biography, heritage |
-| `scientific` | Academic precise diagrams | Biology, chemistry, technical |
-| `chalkboard` | Classroom chalk drawing style | Education, tutorials, workshops |
 | `editorial` | Magazine-style infographic | Tech explainers, journalism |
-| `flat` | Modern flat vector illustration | Startups, digital, contemporary |
-| `flat-doodle` | Bold outlines, pastel colors, cute | Productivity, SaaS, workflows |
-| `retro` | 80s/90s vibrant nostalgic | Pop culture, gaming, entertainment |
-| `blueprint` | Technical schematics, engineering precision | Architecture, system design |
-| `vector-illustration` | Flat vector with black outlines, retro colors | Educational, creative, brand content |
-| `sketch-notes` | Soft hand-drawn, warm educational feel | Knowledge sharing, tutorials |
-| `pixel-art` | Retro 8-bit gaming aesthetic | Gaming, tech, developer content |
-| `intuition-machine` | Technical briefing with bilingual labels | Academic, technical, bilingual |
-| `fantasy-animation` | Ghibli/Disney whimsical style | Storytelling, children's, creative |
+| `scientific` | Academic precise diagrams | Biology, chemistry, technical research |

-Full style specifications in `references/styles/<style>.md`
+Full style specifications: `references/styles/<style>.md`

-## Auto Style Selection
+## Type × Style Compatibility

-When no `--style` is specified, analyze content to select the best style:
+| | notion | warm | minimal | blueprint | watercolor | elegant | editorial | scientific |
+|---|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
+| infographic | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓✓ |
+| scene | ✓ | ✓✓ | ✓ | ✗ | ✓✓ | ✓ | ✓ | ✗ |
+| flowchart | ✓✓ | ✓ | ✓ | ✓✓ | ✗ | ✓ | ✓✓ | ✓ |
+| comparison | ✓✓ | ✓ | ✓✓ | ✓ | ✓ | ✓✓ | ✓✓ | ✓ |
+| framework | ✓✓ | ✓ | ✓✓ | ✓✓ | ✗ | ✓✓ | ✓ | ✓✓ |
+| timeline | ✓✓ | ✓ | ✓ | ✓ | ✓✓ | ✓✓ | ✓✓ | ✓ |

-| Content Signals | Selected Style |
-|----------------|----------------|
-| Personal story, emotion, growth, life, feeling, relationship | `warm` |
-| Simple, zen, focus, essential, core, minimalist | `minimal` |
-| Fun, easy, beginner, tutorial, guide, how-to, learn | `playful` |
-| Nature, eco, wellness, health, organic, green, outdoor | `nature` |
-| Idea, thought, concept, draft, brainstorm, sketch | `sketch` |
-| Business, professional, strategy, analysis, corporate | `elegant` |
-| Knowledge, concept, productivity, SaaS, notion, tool | `notion` |
-| Lifestyle, travel, food, art, creative, artistic | `watercolor` |
-| History, heritage, vintage, biography, classic, expedition | `vintage` |
-| Biology, chemistry, medical, scientific, research, academic | `scientific` |
-| Education, classroom, teaching, school, lecture, workshop | `chalkboard` |
-| Explainer, journalism, magazine, in-depth, investigation | `editorial` |
-| Modern, startup, app, product, digital marketing, saas | `flat` |
-| Productivity, workflow, cute, tools, app tutorial | `flat-doodle` |
-| 80s, 90s, retro, pop culture, music, nostalgia | `retro` |
-| Architecture, system, infrastructure, engineering, technical | `blueprint` |
-| Brand, explainer, children, cute, toy, geometric | `vector-illustration` |
-| Notes, doodle, friendly, warm tutorial, onboarding | `sketch-notes` |
-| Gaming, 8-bit, pixel, developer, retro tech | `pixel-art` |
-| Bilingual, briefing, academic, research, documentation | `intuition-machine` |
-| Fantasy, story, magical, Ghibli, Disney, children | `fantasy-animation` |
-| Default | `notion` |
+✓✓ = highly recommended | ✓ = compatible | ✗ = not recommended

-## File Management
+## Auto Selection

-### Output Directory
+| Content Signals | Recommended Type | Recommended Style |
+|-----------------|------------------|-------------------|
+| API, metrics, data, comparison, numbers | infographic | blueprint, notion |
+| Story, emotion, journey, experience, personal | scene | warm, watercolor |
+| How-to, steps, workflow, process, tutorial | flowchart | notion, minimal |
+| vs, pros/cons, before/after, alternatives | comparison | notion, elegant |
+| Framework, model, architecture, principles | framework | blueprint, notion |
+| History, timeline, progress, evolution | timeline | elegant, warm |

-Each session creates an independent directory named by content slug:
+## Output Directory

 ```
 illustrations/{topic-slug}/
-├── source-{slug}.{ext}    # Source files (text, images, etc.)
+├── source-{slug}.{ext}
 ├── outline.md
-├── outline-{style}.md     # Style variant outlines
 ├── prompts/
-│   ├── illustration-concept-a.md
-│   ├── illustration-concept-b.md
-│   └── ...
-├── illustration-concept-a.png
-├── illustration-concept-b.png
-└── ...
+│   └── illustration-{slug}.md
+└── NN-{type}-{slug}.png
 ```

-**Slug Generation**:
-1. Extract main topic from content (2-4 words, kebab-case)
-2. Example: "The Future of AI" → `future-of-ai`
-
-### Conflict Resolution
-
-If `illustrations/{topic-slug}/` already exists:
- Append timestamp: `{topic-slug}-YYYYMMDD-HHMMSS`
- Example: `ai-future` exists → `ai-future-20260118-143052`
-
-### Source Files
-
-Copy all sources with naming `source-{slug}.{ext}`:
- `source-article.md` (main text content)
- `source-photo.jpg` (image from conversation)
- `source-reference.pdf` (additional file)
-
-Multiple sources supported: text, images, files from conversation.
+**Slug**: Extract 2-4 word topic in kebab-case.
+**Conflict**: Append `-YYYYMMDD-HHMMSS` if exists.

 ## Workflow

-### Step 1: Analyze Content & Select Style
+### Progress

-1. Read article content
-2. If `--style` specified, use that style
-3. Otherwise, scan for style signals and auto-select
-4. **Language detection**:
-   - Detect **source language** from article content
-   - Detect **user language** from conversation context
-   - Note if source_language ≠ user_language (will ask in Step 4)
-5. Extract key information:
-   - Main topic and themes
-   - Core messages per section
-   - Abstract concepts needing visualization
+```
+- [ ] Step 1: Setup & Analyze
+- [ ] Step 2: Confirm Settings ⚠️ REQUIRED
+- [ ] Step 3: Generate Outline
+- [ ] Step 4: Generate Images
+- [ ] Step 5: Finalize
+```

-### Step 2: Identify Illustration Positions
+### Step 1: Setup & Analyze

-**Three Purposes of Illustrations**:
-1. **Information Supplement**: Help understand abstract concepts
-2. **Concept Visualization**: Transform abstract ideas into concrete visuals
-3. **Imagination Guidance**: Create atmosphere, enhance reading experience
+**1.1 Load Preferences (EXTEND.md)**

-**Content Suitable for Illustrations**:
+Use Bash to check EXTEND.md existence (priority order):
+
+```bash
+# Check project-level first
+test -f .baoyu-skills/baoyu-article-illustrator/EXTEND.md && echo "project"
+
+# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
+test -f "$HOME/.baoyu-skills/baoyu-article-illustrator/EXTEND.md" && echo "user"
+```
+
+┌──────────────────────────────────────────────────────────┬───────────────────┐
+│                           Path                           │     Location      │
+├──────────────────────────────────────────────────────────┼───────────────────┤
+│ .baoyu-skills/baoyu-article-illustrator/EXTEND.md        │ Project directory │
+├──────────────────────────────────────────────────────────┼───────────────────┤
+│ $HOME/.baoyu-skills/baoyu-article-illustrator/EXTEND.md  │ User home         │
+└──────────────────────────────────────────────────────────┴───────────────────┘
+
+┌───────────┬───────────────────────────────────────────────────────────────────────────┐
+│  Result   │                                  Action                                   │
+├───────────┼───────────────────────────────────────────────────────────────────────────┤
+│ Found     │ Read, parse, display summary                                              │
+├───────────┼───────────────────────────────────────────────────────────────────────────┤
+│ Not found │ Ask user with AskUserQuestion (see references/config/first-time-setup.md) │
+└───────────┴───────────────────────────────────────────────────────────────────────────┘
+
+**EXTEND.md Supports**: Watermark | Preferred type/style | Custom style definitions | Language preference
+
+Schema: `references/config/preferences-schema.md`
+
+**1.2 Analyze Content**
+
+Read article, detect language, classify content.
+
+| Analysis | Description |
+|----------|-------------|
+| Content type | Technical / Tutorial / Methodology / Narrative |
+| Core arguments | 2-5 main points that MUST be visualized |
+| Visual opportunities | Positions where illustrations add value |
+| Recommended type | Based on content signals |
+| Recommended density | Based on article length and complexity |
+
+**1.3 Extract Core Arguments**
+
+Extract 2-5 core arguments that MUST be visualized:
+- Main thesis
+- Key concepts reader needs
+- Comparisons/contrasts being made
+- Framework/model proposed
+
+**CRITICAL**: If article uses metaphors (e.g., "电锯切西瓜"), do NOT illustrate literally. Visualize the **underlying concept** instead.
+
+**1.4 Identify Positions**
+
+**What to Illustrate**:
+- Core arguments (REQUIRED)
 - Abstract concepts needing visualization
- Processes/steps needing diagrams
- Comparisons needing visual representation
- Core arguments needing reinforcement
- Scenarios needing imagination guidance
+- Data comparisons, metrics
+- Processes, workflows

-**Illustration Count**:
- Consider at least 1 image per major section
- Prioritize core arguments and abstract concepts
- **Principle: More is better than fewer**
+**What NOT to Illustrate**:
+- Metaphors literally
+- Decorative scenes without information
+- Generic illustrations

-### Step 3: Generate Illustration Plan
+### Step 2: Confirm Settings ⚠️

-```markdown
-# Illustration Plan
+**Do NOT skip.** Use AskUserQuestion with 3-4 questions in ONE call.

-**Article**: [article path]
-**Style**: [selected style]
-**Illustration Count**: N images
+**Question 1: Illustration Type**

+Based on content analysis, recommend type:
+- [Recommended type based on signals] (Recommended)
+- infographic - Data visualization, charts
+- scene - Atmospheric, mood rendering
+- flowchart - Process, steps
+- comparison - Side-by-side contrast
+- framework - Concept relationships
+- timeline - Chronological progression
+- mixed - Combine multiple types
+
+**Question 2: Density**
+
+- minimal (1-2 images) - Core concepts only
+- balanced (3-5 images) (Recommended) - Major sections
+- rich (6+ images) - Comprehensive visual support
+
+**Question 3: Style**
+
+Based on recommended Type, suggest compatible styles (see Type × Style Compatibility matrix):
+- [Best compatible style for recommended type] (Recommended)
+- [Other highly compatible styles: ✓✓ from matrix]
+- [Compatible styles: ✓ from matrix]
+
+**Question 4** (only if source ≠ user language):
+- Language: Source language / User language
+
+### Step 3: Generate Outline
+
+Based on confirmed Type + Density + Style, generate illustration outline.
+
+**Outline Format** (`outline.md`):
+
+```yaml
+---
+type: infographic
+density: balanced
+style: blueprint
+image_count: 4
 ---

 ## Illustration 1

-**Insert Position**: [section name] / [paragraph description]
-**Purpose**: [why illustration needed here]
-**Visual Content**: [what the image should show]
-**Filename**: illustration-[slug].png
-
---
+**Position**: [section] / [paragraph]
+**Purpose**: [why this illustration helps]
+**Visual Content**: [what to show]
+**Type Application**: [how type applies here]
+**Filename**: 01-infographic-concept-name.png

 ## Illustration 2
 ...
 ```

-### Step 4: Review & Confirm
+**Outline Requirements**:
+- Each illustration position justified by content needs
+- Type applied consistently across all illustrations
+- Style characteristics reflected in visual descriptions
+- Count matches density selection

-**Purpose**: Let user confirm all options in a single step before image generation.
+### Step 4: Generate Images

-**IMPORTANT**: Present ALL options in a single confirmation step using AskUserQuestion. Do NOT interrupt workflow with multiple separate confirmations.
+**4.1 Create Prompts**

-1. **Generate 3 style variants**:
-   - Analyze content to select 3 most suitable styles
-   - Generate complete illustration plan for each style variant
-   - Save as `outline-{style}.md` (e.g., `outline-notion.md`, `outline-tech.md`, `outline-warm.md`)
+Follow Prompt Construction principles below. Save each to `prompts/illustration-{slug}.md`.

-2. **Determine which questions to ask**:
+**4.2 Select Generation Skill**

-   | Question | When to Ask |
-   |----------|-------------|
-   | Style variant | Always (required) |
-   | Language | Only if `source_language ≠ user_language` |
+Check available image generation skills. If multiple, ask user to choose.

-3. **Present options** (use AskUserQuestion with all applicable questions):
+**4.3 Apply Watermark** (if enabled in preferences)

-   **Question 1 (Style)** - always:
-   - Style A (recommended): [style name] - [brief description]
-   - Style B: [style name] - [brief description]
-   - Style C: [style name] - [brief description]
-   - Custom: Provide custom style reference
+Add to prompt: `Include a subtle watermark "[content]" positioned at [position] with approximately [opacity*100]% visibility.`

-   **Question 2 (Language)** - only if source ≠ user language:
-   - [Source language] (matches article language)
-   - [User language] (your preference)
+**4.4 Generate**

-   **Language handling**:
-   - If source language = user language: Just inform user (e.g., "Prompts will be in Chinese")
-   - If different: Ask which language to use for prompts
+1. Generate sequentially
+2. After each: "Generated X/N"
+3. On failure: auto-retry once, then log and continue

-4. **Apply selection**:
-   - Copy selected `outline-{style}.md` to `outline.md`
-   - If custom style provided, generate new plan with that style
-   - If different language selected, regenerate outline in that language
-   - User may edit `outline.md` directly for fine-tuning
-   - If modified, reload plan before proceeding
+### Step 5: Finalize

-5. **Proceed only after explicit user confirmation**
-
-### Step 5: Create Prompt Files
-
-Save prompts to `prompts/` directory with style-specific details.
-
-**All prompts are written in the user's confirmed language preference.**
-
-**Prompt Format**:
+**5.1 Update Article**

+Insert after corresponding paragraph:
 ```markdown
-Illustration theme: [concept in 2-3 words]
-Style: [style name]
-
-Visual composition:
- Main visual: [description matching style]
- Layout: [element positioning]
- Decorative elements: [style-appropriate decorations]
-
-Color scheme:
- Primary: [style primary color]
- Background: [style background color]
- Accent: [style accent color]
-
-Text content (if any):
- [Any labels or captions in content language]
-
-Style notes: [specific style characteristics]
+![description](illustrations/{slug}/NN-{type}-{slug}.png)
 ```

-### Step 6: Generate Images
+Alt text: concise description in article's language.

-**Image Generation Skill Selection**:
-1. Check available image generation skills
-2. If multiple skills available, ask user to choose
-
-**Generation Flow**:
-1. Call selected image generation skill with prompt file and output path
-2. Generate images sequentially
-3. After each image, output progress: "Generated X/N"
-4. On failure, auto-retry once
-5. If retry fails, log reason, continue to next
-
-### Step 7: Update Article
-
-Insert generated images at corresponding positions:
-
-```markdown
-![illustration description]([article-name]/illustrations/illustration-[slug].png)
-```
-
-**Insertion Rules**:
- Insert image after corresponding paragraph
- Leave one blank line before and after image
- Alt text uses concise description in article's language
-
-### Step 8: Output Summary
+**5.2 Output Summary**

 ```
 Article Illustration Complete!

-Article: [article path]
+Article: [path]
+Type: [type name]
+Density: [minimal/balanced/rich]
 Style: [style name]
-Generated: X/N images successful
+Location: [directory path]
+Images: X/N generated

-Illustration Positions:
- illustration-xxx.png → After section "Section Name"
- illustration-yyy.png → After section "Another Section"
+Positions:
+- 01-infographic-xxx.png → After "[Section]"
+- 02-infographic-yyy.png → After "[Section]"
+
+[If failures]
+Failed:
+- NN-type-zzz.png: [reason]
+```
+
+## Prompt Construction
+
+### Principles
+
+Good prompts must include:
+
+1. **Layout Structure First**: Describe composition, zones, flow direction
+2. **Specific Data/Labels**: Use actual numbers, terms from article
+3. **Visual Relationships**: How elements connect
+4. **Semantic Colors**: Meaning-based color choices (red=warning, green=efficient)
+5. **Style Characteristics**: Line treatment, texture, mood
+6. **Aspect Ratio**: End with ratio and complexity level
+
+### Type-Specific Prompts
+
+**Infographic**:
+```
+[Title] - Data Visualization
+
+Layout: [grid/radial/hierarchical]
+
+ZONES:
+- Zone 1: [data point with specific values]
+- Zone 2: [comparison with metrics]
+- Zone 3: [summary/conclusion]
+
+LABELS: [specific numbers, percentages, terms from article]
+COLORS: [semantic color mapping]
+STYLE: [style characteristics]
+ASPECT: 16:9
+```
+
+**Scene**:
+```
+[Title] - Atmospheric Scene
+
+FOCAL POINT: [main subject]
+ATMOSPHERE: [lighting, mood, environment]
+MOOD: [emotion to convey]
+COLOR TEMPERATURE: [warm/cool/neutral]
+STYLE: [style characteristics]
+ASPECT: 16:9
+```
+
+**Flowchart**:
+```
+[Title] - Process Flow
+
+Layout: [left-right/top-down/circular]
+
+STEPS:
+1. [Step name] - [brief description]
+2. [Step name] - [brief description]
 ...

-[If any failures]
-Failed:
- illustration-zzz.png: [failure reason]
+CONNECTIONS: [arrow types, decision points]
+STYLE: [style characteristics]
+ASPECT: 16:9
 ```

-## Illustration Modification
-
-Support for modifying individual illustrations after initial generation.
-
-### Edit Single Illustration
-
-Regenerate a specific illustration with modified prompt:
-
-1. Identify illustration to edit (e.g., `illustration-concept-overview.png`)
-2. Update prompt in `prompts/illustration-concept-overview.md` if needed
-3. If content changes significantly, update slug in filename
-4. Regenerate image
-5. Update article if image reference changed
-
-### Add New Illustration
-
-Add a new illustration to the article:
-
-1. Identify insertion position in article
-2. Create new prompt with appropriate slug (e.g., `illustration-new-concept.md`)
-3. Generate new illustration image
-4. Update `outline.md` with new illustration entry
-5. Insert image reference in article at the specified position
-
-### Delete Illustration
-
-Remove an illustration from the article:
-
-1. Identify illustration to delete (e.g., `illustration-concept-overview.png`)
-2. Remove image file and prompt file
-3. Remove image reference from article
-4. Update `outline.md` to remove illustration entry
-
-### File Naming Convention
-
-Files use meaningful slugs for better readability:
+**Comparison**:
 ```
-illustration-[slug].png
-illustration-[slug].md (in prompts/)
+[Title] - Comparison View
+
+LEFT SIDE - [Option A]:
+- [Point 1]
+- [Point 2]
+
+RIGHT SIDE - [Option B]:
+- [Point 1]
+- [Point 2]
+
+DIVIDER: [visual separator]
+STYLE: [style characteristics]
+ASPECT: 16:9
 ```

-Examples:
- `illustration-concept-overview.png`
- `illustration-workflow-diagram.png`
- `illustration-key-benefits.png`
+**Framework**:
+```
+[Title] - Conceptual Framework

-**Slug rules**:
- Derived from illustration purpose/content (kebab-case)
- Must be unique within the article
- When content changes significantly, update slug accordingly
+STRUCTURE: [hierarchical/network/matrix]
+
+NODES:
+- [Concept 1] - [role]
+- [Concept 2] - [role]
+
+RELATIONSHIPS: [how nodes connect]
+STYLE: [style characteristics]
+ASPECT: 16:9
+```
+
+**Timeline**:
+```
+[Title] - Chronological View
+
+DIRECTION: [horizontal/vertical]
+
+EVENTS:
+- [Date/Period 1]: [milestone]
+- [Date/Period 2]: [milestone]
+
+MARKERS: [visual indicators]
+STYLE: [style characteristics]
+ASPECT: 16:9
+```
+
+### What to Avoid
+
+- Vague descriptions ("a nice image")
+- Literal metaphor illustrations
+- Missing concrete labels/annotations
+- Generic decorative elements
+
+## Modification
+
+| Action | Steps |
+|--------|-------|
+| **Edit** | Update prompt → Regenerate → Update reference |
+| **Add** | Identify position → Create prompt → Generate → Update outline → Insert reference |
+| **Delete** | Delete files → Remove reference → Update outline |

 ## References

 | File | Content |
 |------|---------|
-| `references/styles/<style>.md` | Full style specifications with colors, elements, rules |
-
-## Notes
-
- Illustrations serve the content: supplement information, visualize concepts
- Maintain selected style consistency across all illustrations in one article
- Image generation typically takes 10-30 seconds per image
- Sensitive figures should use cartoon alternatives
- Prompts written in user's confirmed language preference
- Illustration text (labels, captions) should match article language
+| [references/styles.md](references/styles.md) | Style gallery & compatibility matrix |
+| `references/styles/<style>.md` | Full style specifications |
+| `references/config/preferences-schema.md` | EXTEND.md schema |
+| `references/config/first-time-setup.md` | First-time setup flow |

 ## Extension Support

-Custom styles and configurations via EXTEND.md.
-
-**Check paths** (priority order):
-1. `.baoyu-skills/baoyu-article-illustrator/EXTEND.md` (project)
-2. `~/.baoyu-skills/baoyu-article-illustrator/EXTEND.md` (user)
-
-If found, load before Step 1. Extension content overrides defaults.
+Custom configurations via EXTEND.md. See **Step 1.1** for paths and supported options.
@@ -0,0 +1,113 @@
+---
+name: first-time-setup
+description: First-time setup flow for baoyu-article-illustrator preferences
+---
+
+# First-Time Setup
+
+## Overview
+
+When no EXTEND.md is found, guide user through preference setup.
+
+## Setup Flow
+
+```
+No EXTEND.md found
+        │
+        ▼
+┌─────────────────────┐
+│ AskUserQuestion     │
+│ (all questions)     │
+└─────────────────────┘
+        │
+        ▼
+┌─────────────────────┐
+│ Create EXTEND.md    │
+└─────────────────────┘
+        │
+        ▼
+    Continue to Step 1
+```
+
+## Questions
+
+**Language**: Use user's input language or preferred language for all questions. Do not always use English.
+
+Use single AskUserQuestion with multiple questions (AskUserQuestion auto-adds "Other" option):
+
+### Question 1: Watermark
+
+```
+header: "Watermark"
+question: "Watermark text for generated illustrations? Type your watermark content (e.g., name, @handle)"
+options:
+  - label: "No watermark (Recommended)"
+    description: "No watermark, can enable later in EXTEND.md"
+```
+
+Position defaults to bottom-right.
+
+### Question 2: Preferred Style
+
+```
+header: "Style"
+question: "Default illustration style preference? Or type another style name or your custom style"
+options:
+  - label: "None (Recommended)"
+    description: "Auto-select based on content analysis"
+  - label: "notion"
+    description: "Minimalist hand-drawn line art"
+  - label: "warm"
+    description: "Friendly, approachable, personal"
+```
+
+### Question 3: Save Location
+
+```
+header: "Save"
+question: "Where to save preferences?"
+options:
+  - label: "Project"
+    description: ".baoyu-skills/ (this project only)"
+  - label: "User"
+    description: "~/.baoyu-skills/ (all projects)"
+```
+
+## Save Locations
+
+| Choice | Path | Scope |
+|--------|------|-------|
+| Project | `.baoyu-skills/baoyu-article-illustrator/EXTEND.md` | Current project |
+| User | `~/.baoyu-skills/baoyu-article-illustrator/EXTEND.md` | All projects |
+
+## After Setup
+
+1. Create directory if needed
+2. Write EXTEND.md with frontmatter
+3. Confirm: "Preferences saved to [path]"
+4. Continue to Step 1
+
+## EXTEND.md Template
+
+```yaml
+---
+version: 1
+watermark:
+  enabled: [true/false]
+  content: "[user input or empty]"
+  position: bottom-right
+  opacity: 0.7
+preferred_style:
+  name: [selected style or null]
+  description: ""
+language: null
+custom_styles: []
+---
+```
+
+## Modifying Preferences Later
+
+Users can edit EXTEND.md directly or run setup again:
+- Delete EXTEND.md to trigger setup
+- Edit YAML frontmatter for quick changes
+- Full schema: `config/preferences-schema.md`
@@ -0,0 +1,116 @@
+---
+name: preferences-schema
+description: EXTEND.md YAML schema for baoyu-article-illustrator user preferences
+---
+
+# Preferences Schema
+
+## Full Schema
+
+```yaml
+---
+version: 1
+
+watermark:
+  enabled: false
+  content: ""
+  position: bottom-right  # bottom-right|bottom-left|bottom-center|top-right
+  opacity: 0.7            # 0.1-1.0
+
+preferred_style:
+  name: null              # Built-in or custom style name
+  description: ""         # Override/notes
+
+language: null            # zh|en|ja|ko|auto
+
+custom_styles:
+  - name: my-style
+    description: "Style description"
+    color_palette:
+      primary: ["#1E3A5F", "#4A90D9"]
+      background: "#F5F7FA"
+      accents: ["#00B4D8", "#48CAE4"]
+    visual_elements: "Clean lines, geometric shapes"
+    typography: "Modern sans-serif"
+    best_for: "Business, education"
+---
+```
+
+## Field Reference
+
+| Field | Type | Default | Description |
+|-------|------|---------|-------------|
+| `version` | int | 1 | Schema version |
+| `watermark.enabled` | bool | false | Enable watermark |
+| `watermark.content` | string | "" | Watermark text (@username or custom) |
+| `watermark.position` | enum | bottom-right | Position on image |
+| `watermark.opacity` | float | 0.7 | Transparency (0.1-1.0) |
+| `preferred_style.name` | string | null | Style name or null |
+| `preferred_style.description` | string | "" | Custom notes/override |
+| `language` | string | null | Output language (null = auto-detect) |
+| `custom_styles` | array | [] | User-defined styles |
+
+## Position Options
+
+| Value | Description |
+|-------|-------------|
+| `bottom-right` | Lower right corner (default, most common) |
+| `bottom-left` | Lower left corner |
+| `bottom-center` | Bottom center |
+| `top-right` | Upper right corner |
+
+## Custom Style Fields
+
+| Field | Required | Description |
+|-------|----------|-------------|
+| `name` | Yes | Unique style identifier (kebab-case) |
+| `description` | Yes | What the style conveys |
+| `color_palette.primary` | No | Main colors (array) |
+| `color_palette.background` | No | Background color |
+| `color_palette.accents` | No | Accent colors (array) |
+| `visual_elements` | No | Decorative elements |
+| `typography` | No | Font/lettering style |
+| `best_for` | No | Recommended content types |
+
+## Example: Minimal Preferences
+
+```yaml
+---
+version: 1
+watermark:
+  enabled: true
+  content: "@myusername"
+preferred_style:
+  name: notion
+---
+```
+
+## Example: Full Preferences
+
+```yaml
+---
+version: 1
+watermark:
+  enabled: true
+  content: "@myaccount"
+  position: bottom-right
+  opacity: 0.5
+
+preferred_style:
+  name: notion
+  description: "Clean illustrations for tech articles"
+
+language: zh
+
+custom_styles:
+  - name: corporate
+    description: "Professional B2B style"
+    color_palette:
+      primary: ["#1E3A5F", "#4A90D9"]
+      background: "#F5F7FA"
+      accents: ["#00B4D8", "#48CAE4"]
+    visual_elements: "Clean lines, subtle gradients, geometric shapes"
+    typography: "Modern sans-serif, professional"
+    best_for: "Business, SaaS, enterprise"
+---
+```
@@ -0,0 +1,117 @@
+# Style Reference
+
+## Style Gallery
+
+| Style | Description | Best For |
+|-------|-------------|----------|
+| `notion` (Default) | Minimalist hand-drawn line art | Knowledge sharing, SaaS, productivity |
+| `elegant` | Refined, sophisticated | Business, thought leadership |
+| `warm` | Friendly, approachable | Personal growth, lifestyle, education |
+| `minimal` | Ultra-clean, zen-like | Philosophy, minimalism, core concepts |
+| `blueprint` | Technical schematics | Architecture, system design, engineering |
+| `watercolor` | Soft artistic with natural warmth | Lifestyle, travel, creative |
+| `editorial` | Magazine-style infographic | Tech explainers, journalism |
+| `scientific` | Academic precise diagrams | Biology, chemistry, technical research |
+
+Full specifications: `references/styles/<style>.md`
+
+## Type × Style Compatibility Matrix
+
+| | notion | warm | minimal | blueprint | watercolor | elegant | editorial | scientific |
+|---|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
+| infographic | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓✓ |
+| scene | ✓ | ✓✓ | ✓ | ✗ | ✓✓ | ✓ | ✓ | ✗ |
+| flowchart | ✓✓ | ✓ | ✓ | ✓✓ | ✗ | ✓ | ✓✓ | ✓ |
+| comparison | ✓✓ | ✓ | ✓✓ | ✓ | ✓ | ✓✓ | ✓✓ | ✓ |
+| framework | ✓✓ | ✓ | ✓✓ | ✓✓ | ✗ | ✓✓ | ✓ | ✓✓ |
+| timeline | ✓✓ | ✓ | ✓ | ✓ | ✓✓ | ✓✓ | ✓✓ | ✓ |
+
+✓✓ = highly recommended | ✓ = compatible | ✗ = not recommended
+
+## Auto Selection by Type
+
+| Type | Primary Style | Secondary Styles |
+|------|---------------|------------------|
+| infographic | blueprint | notion, editorial, scientific |
+| scene | warm | watercolor, elegant |
+| flowchart | notion | blueprint, editorial |
+| comparison | notion | elegant, editorial |
+| framework | blueprint | notion, scientific |
+| timeline | elegant | warm, editorial |
+
+## Auto Selection by Content Signals
+
+| Content Signals | Recommended Type | Recommended Style |
+|-----------------|------------------|-------------------|
+| API, metrics, data, comparison, numbers | infographic | blueprint, notion |
+| Story, emotion, journey, experience, personal | scene | warm, watercolor |
+| How-to, steps, workflow, process, tutorial | flowchart | notion, minimal |
+| vs, pros/cons, before/after, alternatives | comparison | notion, elegant |
+| Framework, model, architecture, principles | framework | blueprint, notion |
+| History, timeline, progress, evolution | timeline | elegant, warm |
+| Knowledge, concept, productivity, SaaS, tool | infographic | notion |
+| Business, professional, strategy, corporate | framework | elegant |
+| Biology, chemistry, medical, scientific | infographic | scientific |
+| Explainer, journalism, magazine, investigation | infographic | editorial |
+
+## Style Characteristics by Type
+
+### infographic + blueprint
+- Technical precision, schematic lines
+- Grid-based layout, clear zones
+- Monospace labels, data-focused
+- Blue/white color scheme
+
+### infographic + notion
+- Hand-drawn feel, approachable
+- Soft icons, rounded elements
+- Neutral palette, clean backgrounds
+- Perfect for SaaS/productivity
+
+### scene + warm
+- Golden hour lighting, cozy atmosphere
+- Soft gradients, natural textures
+- Inviting, personal feeling
+- Great for storytelling
+
+### scene + watercolor
+- Artistic, painterly effect
+- Soft edges, color bleeding
+- Dreamy, creative mood
+- Best for lifestyle/travel
+
+### flowchart + notion
+- Clear step indicators
+- Simple arrow connections
+- Minimal decoration
+- Focus on process clarity
+
+### flowchart + blueprint
+- Technical precision
+- Detailed connection points
+- Engineering aesthetic
+- For complex systems
+
+### comparison + elegant
+- Refined dividers
+- Balanced typography
+- Professional appearance
+- Business comparisons
+
+### framework + blueprint
+- Precise node connections
+- Hierarchical clarity
+- System architecture feel
+- Technical frameworks
+
+### timeline + elegant
+- Sophisticated markers
+- Refined typography
+- Historical gravitas
+- Professional presentations
+
+### timeline + warm
+- Friendly progression
+- Organic flow
+- Personal journey feel
+- Growth narratives
@@ -1,45 +1,103 @@
 ---
 name: baoyu-comic
-description: Knowledge comic creator supporting multiple styles (Logicomix/Ligne Claire, Ohmsha manga guide). Creates original educational comics with detailed panel layouts and sequential image generation. Use when user asks to create "知识漫画", "教育漫画", "biography comic", "tutorial comic", or "Logicomix-style comic".
+description: Knowledge comic creator supporting multiple art styles and tones. Creates original educational comics with detailed panel layouts and sequential image generation. Use when user asks to create "知识漫画", "教育漫画", "biography comic", "tutorial comic", or "Logicomix-style comic".
 ---

 # Knowledge Comic Creator

-Create original knowledge comics with multiple visual styles.
+Create original knowledge comics with flexible art style × tone combinations.

 ## Usage

 ```bash
 /baoyu-comic posts/turing-story/source.md
+/baoyu-comic article.md --art manga --tone warm
 /baoyu-comic  # then paste content
 ```

 ## Options

-| Option | Values |
-|--------|--------|
-| `--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. |
+### Visual Dimensions

-Style × Layout × Aspect can be freely combined. Custom styles can be described in natural language.
+| Option | Values | Description |
+|--------|--------|-------------|
+| `--art` | ligne-claire (default), manga, realistic, ink-brush, chalk | Art style / rendering technique |
+| `--tone` | neutral (default), warm, dramatic, romantic, energetic, vintage, action | Mood / atmosphere |
+| `--layout` | standard (default), cinematic, dense, splash, mixed, webtoon | Panel arrangement |
+| `--aspect` | 3:4 (default, portrait), 4:3 (landscape), 16:9 (widescreen) | Page aspect ratio |
+| `--lang` | auto (default), zh, en, ja, etc. | Output language |

-**Aspect ratio is consistent across all pages in a comic.**
+### Partial Workflow Options
+
+| Option | Description |
+|--------|-------------|
+| `--storyboard-only` | Generate storyboard only, skip prompts and images |
+| `--prompts-only` | Generate storyboard + prompts, skip images |
+| `--images-only` | Generate images from existing prompts directory |
+| `--regenerate N` | Regenerate specific page(s) only (e.g., `3` or `2,5,8`) |
+
+Details: [references/partial-workflows.md](references/partial-workflows.md)
+
+### Art Styles (画风)
+
+| Style | 中文 | Description |
+|-------|------|-------------|
+| `ligne-claire` | 清线 | Uniform lines, flat colors, European comic tradition (Tintin, Logicomix) |
+| `manga` | 日漫 | Large eyes, manga conventions, expressive emotions |
+| `realistic` | 写实 | Digital painting, realistic proportions, sophisticated |
+| `ink-brush` | 水墨 | Chinese brush strokes, ink wash effects |
+| `chalk` | 粉笔 | Chalkboard aesthetic, hand-drawn warmth |
+
+### Tones (基调)
+
+| Tone | 中文 | Description |
+|------|------|-------------|
+| `neutral` | 中性 | Balanced, rational, educational |
+| `warm` | 温馨 | Nostalgic, personal, comforting |
+| `dramatic` | 戏剧 | High contrast, intense, powerful |
+| `romantic` | 浪漫 | Soft, beautiful, decorative elements |
+| `energetic` | 活力 | Bright, dynamic, exciting |
+| `vintage` | 复古 | Historical, aged, period authenticity |
+| `action` | 动作 | Speed lines, impact effects, combat |
+
+### Preset Shortcuts
+
+Presets with special rules beyond art+tone:
+
+| Preset | Equivalent | Special Rules |
+|--------|-----------|---------------|
+| `--style ohmsha` | `--art manga --tone neutral` | Visual metaphors, NO talking heads, gadget reveals |
+| `--style wuxia` | `--art ink-brush --tone action` | Qi effects, combat visuals, atmospheric elements |
+| `--style shoujo` | `--art manga --tone romantic` | Decorative elements, eye details, romantic beats |
+
+### Compatibility Matrix
+
+| Art Style | ✓✓ Best | ✓ Works | ✗ Avoid |
+|-----------|---------|---------|---------|
+| ligne-claire | neutral, warm | dramatic, vintage, energetic | romantic, action |
+| manga | neutral, romantic, energetic, action | warm, dramatic | vintage |
+| realistic | neutral, warm, dramatic, vintage | action | romantic, energetic |
+| ink-brush | neutral, dramatic, action, vintage | warm | romantic, energetic |
+| chalk | neutral, warm, energetic | vintage | dramatic, action, romantic |
+
+Details: [references/auto-selection.md](references/auto-selection.md)

 ## Auto Selection

-| Content Signals | Style | Layout |
-|-----------------|-------|--------|
-| Tutorial, how-to, beginner | ohmsha | webtoon |
-| Computing, AI, programming | ohmsha | dense |
-| Pre-1950, classical, ancient | sepia | cinematic |
-| Personal story, mentor | warm | standard |
-| 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 |
+Content signals determine default art + tone + layout (or preset):
+
+| Content Signals | Recommended |
+|-----------------|-------------|
+| Tutorial, how-to, programming, educational | **ohmsha** preset |
+| Pre-1950, classical, ancient | realistic + vintage |
+| Personal story, mentor | ligne-claire + warm |
+| Martial arts, wuxia | **wuxia** preset |
+| Romance, school life | **shoujo** preset |
+| Biography, balanced | ligne-claire + neutral |
+
+**When preset is recommended**: Load `references/presets/{preset}.md` and apply all special rules.
+
+Details: [references/auto-selection.md](references/auto-selection.md)

 ## Script Directory

@@ -57,354 +115,152 @@ Style × Layout × Aspect can be freely combined. Custom styles can be described

 ## File Structure

-Each session creates an independent directory named by content slug:
+Output directory: `comic/{topic-slug}/`
+- Slug: 2-4 words kebab-case from topic (e.g., `alan-turing-bio`)
+- Conflict: append timestamp (e.g., `turing-story-20260118-143052`)

-```
-comic/{topic-slug}/
-├── source-{slug}.{ext}            # Source files (text, images, etc.)
-├── analysis.md                    # Deep analysis results (YAML+MD)
-├── storyboard-chronological.md    # Variant A (preserved)
-├── storyboard-thematic.md         # Variant B (preserved)
-├── storyboard-character.md        # Variant C (preserved)
-├── characters-chronological/      # Variant A chars (preserved)
-│   ├── characters.md
-│   └── characters.png
-├── characters-thematic/           # Variant B chars (preserved)
-│   ├── characters.md
-│   └── characters.png
-├── characters-character/          # Variant C chars (preserved)
-│   ├── characters.md
-│   └── characters.png
-├── storyboard.md                  # Final selected
-├── characters/                    # Final selected
-│   ├── characters.md
-│   └── characters.png
-├── prompts/
-│   ├── 00-cover-[slug].md
-│   └── NN-page-[slug].md
-├── 00-cover-[slug].png
-├── NN-page-[slug].png
-└── {topic-slug}.pdf
-```
+**Contents**:
+| File | Description |
+|------|-------------|
+| `source-{slug}.{ext}` | Source files |
+| `analysis.md` | Content analysis |
+| `storyboard.md` | Storyboard with panel breakdown |
+| `characters/characters.md` | Character definitions |
+| `characters/characters.png` | Character reference sheet |
+| `prompts/NN-{cover\|page}-[slug].md` | Generation prompts |
+| `NN-{cover\|page}-[slug].png` | Generated images |
+| `{topic-slug}.pdf` | Final merged PDF |

-**Slug Generation**:
-1. Extract main topic from content (2-4 words, kebab-case)
-2. Example: "Alan Turing Biography" → `alan-turing-bio`
+## Language Handling

-**Conflict Resolution**:
-If `comic/{topic-slug}/` already exists:
- Append timestamp: `{topic-slug}-YYYYMMDD-HHMMSS`
- Example: `turing-story` exists → `turing-story-20260118-143052`
+**Detection Priority**:
+1. `--lang` flag (explicit)
+2. EXTEND.md `language` setting
+3. User's conversation language
+4. Source content language

-**Source Files**:
-Copy all sources with naming `source-{slug}.{ext}`:
- `source-biography.md`, `source-portrait.jpg`, `source-timeline.png`, etc.
- Multiple sources supported: text, images, files from conversation
+**Rule**: Use user's input language or saved language preference for ALL interactions:
+- Storyboard outlines and scene descriptions
+- Image generation prompts
+- User selection options and confirmations
+- Progress updates, questions, errors, summaries
+
+Technical terms remain in English.

 ## Workflow

-### Step 1: Analyze Content → `analysis.md`
-
-Read source content, save it if needed, and perform deep 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. Read source content
-3. **Deep analysis** following `references/analysis-framework.md`:
-   - Target audience identification
-   - Value proposition for readers
-   - Core themes and narrative potential
-   - Key figures and their story arcs
-4. Detect source language
-5. Determine recommended page count:
-   - Short story: 5-8 pages
-   - Medium complexity: 9-15 pages
-   - Full biography: 16-25 pages
-6. Analyze content signals for style/layout recommendations
-7. **Save to `analysis.md`**
-
-**analysis.md Format**:
-
-```yaml
---
-title: "Alan Turing: Father of Computing"
-topic: Biography
-time_span: 1912-1954
-source_language: en
-user_language: zh
-aspect_ratio: "3:4"
-recommended_page_count: 12
---
-
-## Target Audience
-
- **Primary**: Tech enthusiasts curious about computing history
- **Secondary**: Students learning about scientific breakthroughs
- **Tertiary**: General readers interested in biographical stories
-
-## Value Proposition
-
-What readers will gain:
-1. Understanding of how modern computing was born
-2. Emotional connection to a brilliant but tragic figure
-3. Appreciation for the human cost of innovation
-
-## Core Themes
-
-| Theme | Narrative Potential | Visual Opportunity |
-|-------|--------------------|--------------------|
-| Genius vs. Society | High conflict, dramatic arcs | Contrast scenes |
-| Code-breaking | Mystery, tension | Technical diagrams as art |
-| Personal tragedy | Emotional depth | Intimate, somber panels |
-
-## Key Figures & Story Arcs
-
-### Alan Turing (Protagonist)
- **Arc**: Misunderstood genius → War hero → Tragic end
- **Visual identity**: Disheveled academic, intense eyes
- **Key moments**: Enigma breakthrough, arrest, final days
-
-### Christopher Morcom (Catalyst)
- **Role**: Early friend whose death shaped Turing
- **Visual identity**: Youthful, bright
- **Key moments**: School friendship, sudden death
-
-## Content Signals
-
- "biography" → classic + mixed
- "computing history" → ohmsha + dense
- "personal tragedy" → dramatic + splash
-
-## Recommended Approaches
-
-1. **Chronological** - follow life timeline (recommended for biography)
-2. **Thematic** - organize by contributions (good for educational focus)
-3. **Character-focused** - relationships drive narrative (good for emotional impact)
-```
-
-### Step 2: Generate 3 Storyboard Variants
-
-Create three distinct variants, each combining a narrative approach with a recommended style.
-
-| Variant | Narrative Approach | Recommended Style | Layout |
-|---------|-------------------|-------------------|--------|
-| A | Chronological | sepia | cinematic |
-| B | Thematic | ohmsha | dense |
-| C | Character-focused | warm | standard |
-
-**For each variant**:
-
-1. **Generate storyboard** (`storyboard-{approach}.md`):
-   - YAML front matter with narrative_approach, recommended_style, recommended_layout, aspect_ratio
-   - Cover design
-   - Each page: layout, panel breakdown, visual prompts
-   - **Written in user's preferred language**
-   - Reference: `references/storyboard-template.md`
-
-2. **Generate matching characters** (`characters-{approach}/`):
-   - `characters.md` - visual specs matching the recommended style (in user's preferred language)
-   - `characters.png` - character reference sheet
-   - Reference: `references/character-template.md`
-
-**All variants are preserved after selection for reference.**
-
-### Step 3: User Confirms All Options
-
-**IMPORTANT**: Present ALL options in a single confirmation step using AskUserQuestion. Do NOT interrupt workflow with multiple separate confirmations.
-
-**Determine which questions to ask**:
-
-| Question | When to Ask |
-|----------|-------------|
-| Storyboard variant | Always (required) |
-| Visual style | Always (required) |
-| Language | Only if `source_language ≠ user_language` |
-| Aspect ratio | Only if user might prefer non-default (e.g., landscape content) |
-
-**Language handling**:
- If source language = user language: Just inform user (e.g., "Comic will be in Chinese")
- If different: Ask which language to use
-
-**All storyboards and prompts are generated in the user's selected/preferred language.**
-
-**Aspect ratio handling**:
- Default: 3:4 (portrait) - standard comic format
- Offer 4:3 (landscape) if content suits it (e.g., panoramic scenes, technical diagrams)
- Offer 16:9 (widescreen) for cinematic content
-
-**AskUserQuestion format** (example with all questions):
+### Progress Checklist

 ```
-Question 1 (Storyboard): Which storyboard variant?
- A: Chronological + sepia (Recommended)
- B: Thematic + ohmsha
- C: Character-focused + warm
- Custom
-
-Question 2 (Style): Which visual style?
- sepia (Recommended from variant)
- classic / dramatic / warm / sepia / vibrant / ohmsha / realistic / wuxia
- Custom description
-
-Question 3 (Language) - only if mismatch:
- Chinese (source material language)
- English (your preference)
-
-Question 4 (Aspect) - only if relevant:
- 3:4 Portrait (Recommended)
- 4:3 Landscape
- 16:9 Widescreen
+Comic Progress:
+- [ ] Step 1: Setup & Analyze (1.1 Preferences, 1.2 Analyze, 1.3 Check existing)
+- [ ] Step 2: Confirmation - Style & options ⚠️ REQUIRED
+- [ ] Step 3: Generate storyboard + characters
+- [ ] Step 4: Review outline (conditional)
+- [ ] Step 5: Generate prompts
+- [ ] Step 6: Review prompts (conditional)
+- [ ] Step 7: Generate images ⚠️ CHARACTER REF REQUIRED
+  - [ ] 7.1 Generate character sheet FIRST → characters/characters.png
+  - [ ] 7.2 Generate pages WITH --ref characters/characters.png
+- [ ] Step 8: Merge to PDF
+- [ ] Step 9: Completion report
 ```

-**After confirmation**:
-1. Copy selected storyboard → `storyboard.md`
-2. Copy selected characters → `characters/`
-3. Update YAML front matter with confirmed style, language, aspect_ratio
-4. If style differs from variant's recommended: regenerate `characters/characters.png`
-5. User may edit files directly for fine-tuning
+### Flow

-### Step 4: Generate Images
+```
+Input → Preferences → Analyze → [Check Existing?] → [Confirm: Style + Reviews] → Storyboard → [Review?] → Prompts → [Review?] → Images → PDF → Complete
+```

-With confirmed storyboard + style + aspect ratio:
+### Step Summary

-**For each page (cover + pages)**:
-1. Save prompt to `prompts/NN-{cover|page}-[slug].md` (in user's preferred language)
-2. Generate image using confirmed style and aspect ratio
-3. Report progress after each generation
+| Step | Action | Key Output |
+|------|--------|------------|
+| 1.1 | Load EXTEND.md preferences | Config loaded |
+| 1.2 | Analyze content | `analysis.md` |
+| 1.3 | Check existing directory | Handle conflicts |
+| 2 | Confirm style, focus, audience, reviews | User preferences |
+| 3 | Generate storyboard + characters | `storyboard.md`, `characters/` |
+| 4 | Review outline (if requested) | User approval |
+| 5 | Generate prompts | `prompts/*.md` |
+| 6 | Review prompts (if requested) | User approval |
+| **7.1** | **Generate character sheet FIRST** | `characters/characters.png` |
+| **7.2** | Generate pages **with character ref** | `*.png` files |
+| 8 | Merge to PDF | `{slug}.pdf` |
+| 9 | Completion report | Summary |

-**Image Generation Skill Selection**:
- Check available image generation skills
- If multiple skills available, ask user preference
+### Step 7: Image Generation ⚠️ CRITICAL

-**Character Reference Handling**:
- If skill supports reference image: pass `characters/characters.png`
- If skill does NOT support reference image: include `characters/characters.md` content in prompt
+**Character reference is MANDATORY for visual consistency.**

-**Session Management**:
-If image generation skill supports `--sessionId`:
-1. Generate unique session ID: `comic-{topic-slug}-{timestamp}`
-2. Use same session ID for all pages
-3. Ensures visual consistency across generated images
+**7.1 Generate character sheet first**:
+```bash
+# Use Reference Sheet Prompt from characters/characters.md
+npx -y bun ${SKILL_DIR}/../baoyu-image-gen/scripts/main.ts \
+  --promptfiles characters/characters.md \
+  --image characters/characters.png --ar 4:3
+```

-### Step 5: Merge to PDF
+**7.2 Generate each page WITH character reference**:

-After all images generated:
+| Skill Capability | Strategy |
+|------------------|----------|
+| Supports `--ref` | Pass `characters/characters.png` with EVERY page |
+| No `--ref` support | Prepend character descriptions to EVERY prompt file |

 ```bash
-npx -y bun ${SKILL_DIR}/scripts/merge-to-pdf.ts <comic-dir>
+# Example: ALWAYS include --ref for consistency
+npx -y bun ${SKILL_DIR}/../baoyu-image-gen/scripts/main.ts \
+  --promptfiles prompts/01-page-xxx.md \
+  --image 01-page-xxx.png --ar 3:4 \
+  --ref characters/characters.png
 ```

-Creates `{topic-slug}.pdf` with all pages as full-page images.
+**Full workflow details**: [references/workflow.md](references/workflow.md)

-### Step 6: Completion Report
+### EXTEND.md Paths

-```
-Comic Complete!
-Title: [title] | Style: [style] | Pages: [count] | Aspect: [ratio] | Language: [lang]
-Location: [path]
-✓ analysis.md
-✓ characters.png
-✓ 00-cover-[slug].png ... NN-page-[slug].png
-✓ {topic-slug}.pdf
-```
+| Path | Location |
+|------|----------|
+| `.baoyu-skills/baoyu-comic/EXTEND.md` | Project directory |
+| `$HOME/.baoyu-skills/baoyu-comic/EXTEND.md` | User home |

-## Page Modification
+**EXTEND.md Supports**: Watermark | Preferred art/tone/layout | Custom style definitions | Character presets | Language preference

-Support for modifying individual pages after initial generation.
-
-### Edit Single Page
-
-Regenerate a specific page with modified prompt:
-
-1. Identify page to edit (e.g., `03-page-enigma-machine.png`)
-2. Update prompt in `prompts/03-page-enigma-machine.md` if needed
-3. If content changes significantly, update slug in filename
-4. Regenerate image using same session ID and aspect ratio
-5. Regenerate PDF
-
-### Add New Page
-
-Insert a new page at specified position:
-
-1. Specify insertion position (e.g., after page 3)
-2. Create new prompt with appropriate slug (e.g., `04-page-bletchley-park.md`)
-3. Generate new page image (same aspect ratio)
-4. **Renumber files**: All subsequent pages increment NN by 1
-   - `04-page-tragedy.png` → `05-page-tragedy.png`
-   - Slugs remain unchanged
-5. Update `storyboard.md` with new page entry
-6. Regenerate PDF
-
-### Delete Page
-
-Remove a page and renumber:
-
-1. Identify page to delete (e.g., `03-page-enigma-machine.png`)
-2. Remove image file and prompt file
-3. **Renumber files**: All subsequent pages decrement NN by 1
-   - `04-page-tragedy.png` → `03-page-tragedy.png`
-   - Slugs remain unchanged
-4. Update `storyboard.md` to remove page entry
-5. Regenerate PDF
-
-### File Naming Convention
-
-Files use meaningful slugs for better readability:
-```
-NN-cover-[slug].png / NN-page-[slug].png
-NN-cover-[slug].md / NN-page-[slug].md (in prompts/)
-```
-
-Examples:
- `00-cover-turing-story.png`
- `01-page-early-life.png`
- `02-page-cambridge-years.png`
- `03-page-enigma-machine.png`
-
-**Slug rules**:
- Derived from page title/content (kebab-case)
- Must be unique within the comic
- When page content changes significantly, update slug accordingly
-
-**Renumbering**:
- After add/delete, update NN prefix for affected pages
- Slug remains unchanged unless content changes
- Maintain sequential numbering with no gaps
-
-## Style-Specific Guidelines
-
-### Ohmsha Style (`--style ohmsha`)
-
-Additional requirements for educational manga:
- **Default: Use Doraemon characters directly** - No need to create new characters
-  - 大雄 (Nobita): Student role, curious learner
-  - 哆啦A梦 (Doraemon): Mentor role, explains concepts with gadgets
-  - 胖虎 (Gian): Antagonist/challenge role, represents obstacles or misconceptions
-  - 静香 (Shizuka): Supporting role, asks clarifying questions
- Custom characters only if explicitly requested: `--characters "Student:小明,Mentor:教授"`
- Must use visual metaphors (gadgets, action scenes) - NO talking heads
- Page titles: narrative style, not "Page X: Topic"
-
-**Reference**: `references/ohmsha-guide.md` for detailed guidelines.
+Schema: [references/config/preferences-schema.md](references/config/preferences-schema.md)

 ## References

-Detailed templates and guidelines in `references/` directory:
- `analysis-framework.md` - Deep content analysis for comic adaptation
- `character-template.md` - Character definition format and examples
- `storyboard-template.md` - Storyboard structure and panel breakdown
- `ohmsha-guide.md` - Ohmsha manga style specifics
- `styles/` - Detailed style definitions
- `layouts/` - Detailed layout definitions
+**Core Templates**:
+- [analysis-framework.md](references/analysis-framework.md) - Deep content analysis
+- [character-template.md](references/character-template.md) - Character definition format
+- [storyboard-template.md](references/storyboard-template.md) - Storyboard structure
+- [ohmsha-guide.md](references/ohmsha-guide.md) - Ohmsha manga specifics

-## Extension Support
+**Style Definitions**:
+- `references/art-styles/` - Art styles (ligne-claire, manga, realistic, ink-brush, chalk)
+- `references/tones/` - Tones (neutral, warm, dramatic, romantic, energetic, vintage, action)
+- `references/presets/` - Presets with special rules (ohmsha, wuxia, shoujo)
+- `references/layouts/` - Layouts (standard, cinematic, dense, splash, mixed, webtoon)

-Custom styles and configurations via EXTEND.md.
+**Workflow**:
+- [workflow.md](references/workflow.md) - Full workflow details
+- [auto-selection.md](references/auto-selection.md) - Content signal analysis
+- [partial-workflows.md](references/partial-workflows.md) - Partial workflow options

-**Check paths** (priority order):
-1. `.baoyu-skills/baoyu-comic/EXTEND.md` (project)
-2. `~/.baoyu-skills/baoyu-comic/EXTEND.md` (user)
+**Config**:
+- [config/preferences-schema.md](references/config/preferences-schema.md) - EXTEND.md schema
+- [config/first-time-setup.md](references/config/first-time-setup.md) - First-time setup
+- [config/watermark-guide.md](references/config/watermark-guide.md) - Watermark configuration

-If found, load before Step 1. Extension content overrides defaults.
+## Notes
+
+- Image generation: 10-30 seconds per page
+- Auto-retry once on generation failure
+- Use stylized alternatives for sensitive public figures
+- Maintain style consistency via session ID
+- **Step 2 confirmation required** - do not skip
+- **Steps 4/6 conditional** - only if user requested in Step 2
+- **Step 7.1 character sheet MUST be generated before pages** - ensures consistency
+- **Step 7.2 EVERY page MUST reference characters** - use `--ref` or embed descriptions
+- Watermark/language configured once in EXTEND.md
@@ -131,7 +131,7 @@ Before creating a comic, thoroughly analyze the source material to:

 Analysis results should be saved to `analysis.md` with:

-1. **YAML Front Matter**: Metadata (title, topic, time_span, languages, aspect_ratio, page_count)
+1. **YAML Front Matter**: Metadata (title, topic, time_span, source_language, user_language, aspect_ratio, recommended_page_count, recommended_art, recommended_tone, recommended_layout)
 2. **Target Audience**: Primary, secondary, tertiary audiences with their needs
 3. **Value Proposition**: What readers will gain (knowledge, emotional, practical)
 4. **Core Themes**: Table with theme, narrative potential, visual opportunity
@@ -139,6 +139,30 @@ Analysis results should be saved to `analysis.md` with:
 6. **Content Signals**: Style and layout recommendations based on content type
 7. **Recommended Approaches**: Narrative approaches ranked by suitability

+### YAML Front Matter Example
+
+```yaml
+---
+title: "Alan Turing: The Father of Computing"
+topic: alan-turing-biography
+time_span: 1912-1954
+source_language: en
+user_language: zh  # From EXTEND.md or detected
+aspect_ratio: "3:4"
+recommended_page_count: 16
+recommended_art: ligne-claire  # ligne-claire|manga|realistic|ink-brush|chalk
+recommended_tone: neutral      # neutral|warm|dramatic|romantic|energetic|vintage|action
+recommended_layout: mixed      # standard|cinematic|dense|splash|mixed|webtoon
+---
+```
+
+### Language Fields
+
+| Field | Description |
+|-------|-------------|
+| `source_language` | Detected language of source content |
+| `user_language` | Output language for comic (from EXTEND.md > --lang > source_language) |
+
 ## Analysis Checklist

 Before proceeding to storyboard:
@@ -0,0 +1,101 @@
+# chalk
+
+粉笔画风 - Chalkboard aesthetic with hand-drawn warmth
+
+## Overview
+
+Classic classroom chalkboard aesthetic with hand-drawn chalk illustrations. Nostalgic educational feel with imperfect, sketchy lines that capture the warmth of traditional teaching.
+
+## Line Work
+
+- Sketchy, imperfect hand-drawn lines
+- Chalk texture on all strokes
+- Varying line weight from chalk pressure
+- Soft edges, no sharp digital lines
+- Visible chalk dust effects
+
+## Character Design
+
+- Simplified, friendly character designs
+- Stick figures to semi-detailed range
+- Expressive through simple gestures
+- Approachable, non-intimidating
+- Educational presenter style
+
+## Background
+
+- Chalkboard Black (#1A1A1A) or Dark Green-Black (#1C2B1C)
+- Realistic chalkboard texture
+- Subtle scratches and dust particles
+- Faint eraser marks for authenticity
+- Wooden frame border optional
+
+## Typography
+
+- Hand-drawn chalk lettering style
+- Visible chalk texture on text
+- Imperfect baseline adds authenticity
+- White or bright colored chalk for emphasis
+
+## Visual Elements
+
+- Hand-drawn chalk illustrations
+- Chalk dust effects around elements
+- Doodles: stars, arrows, underlines, circles
+- Mathematical formulas and diagrams
+- Eraser smudges and chalk residue
+- Stick figures and simple icons
+- Connection lines with hand-drawn feel
+
+## Default Color Palette
+
+| Role | Color | Hex |
+|------|-------|-----|
+| Background | Chalkboard Black | #1A1A1A |
+| Alt Background | Green-Black | #1C2B1C |
+| Primary Text | Chalk White | #F5F5F5 |
+| Accent 1 | Chalk Yellow | #FFE566 |
+| Accent 2 | Chalk Pink | #FF9999 |
+| Accent 3 | Chalk Blue | #66B3FF |
+| Accent 4 | Chalk Green | #90EE90 |
+| Accent 5 | Chalk Orange | #FFB366 |
+
+## 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
+
+## Quality Markers
+
+- ✓ Authentic chalk texture throughout
+- ✓ Imperfect, hand-drawn quality
+- ✓ Readable despite sketchy style
+- ✓ Nostalgic classroom feel
+- ✓ Effective color hierarchy
+- ✓ Playful educational aesthetic
+
+## Compatibility
+
+| Tone | Fit | Notes |
+|------|-----|-------|
+| neutral | ✓✓ | Classic educational |
+| warm | ✓✓ | Nostalgic feel |
+| dramatic | ✗ | Style mismatch |
+| vintage | ✓ | Old school feel |
+| romantic | ✗ | Style mismatch |
+| energetic | ✓✓ | Fun learning |
+| action | ✗ | Style mismatch |
+
+## Best For
+
+Educational content, tutorials, classroom themes, teaching materials, workshops, informal learning, knowledge sharing
@@ -0,0 +1,97 @@
+# ink-brush
+
+水墨画风 - Chinese ink brush aesthetics with dynamic strokes
+
+## Overview
+
+Traditional Chinese ink brush painting style adapted for comics. Combines calligraphic brush strokes with ink wash effects. Creates atmospheric, artistic visuals rooted in East Asian aesthetics.
+
+## Line Work
+
+- 2-3px dynamic brush strokes with varying weight
+- Ink wash effects, traditional Chinese brush feel
+- Bold, confident strokes with sharp edges
+- Flowing lines for fabric and hair
+- Pressure-sensitive stroke variation
+
+## Character Design
+
+- Realistic human proportions (7.5-8 head heights)
+- Defined features with ink brush definition
+- Dynamic poses capturing movement
+- Flowing hair and clothing in motion
+- Traditional attire options (robes, hanfu)
+- Intense, expressive faces
+
+## Brush Techniques
+
+| Technique | Usage |
+|-----------|-------|
+| Bold strokes | Character outlines |
+| Fine lines | Details, hair |
+| Ink wash | Atmosphere, shadows |
+| Dry brush | Texture, aging |
+| Splatter | Impact, drama |
+
+## Background Treatment
+
+- Dramatic landscapes: mountains, waterfalls, temples
+- Ink wash atmospheric effects
+- Misty, layered depth
+- Traditional architecture elements
+- High contrast silhouettes
+- Negative space as design element
+
+## Color Approach
+
+- Ink gradients as primary
+- Limited accent colors
+- Traditional Chinese palette
+- Atmospheric color washes
+- High contrast compositions
+
+## Default Color Palette
+
+| Role | Color | Hex |
+|------|-------|-----|
+| Primary | Deep black ink | #1A1A1A |
+| Accent | Crimson red | #8B0000 |
+| Accent | Imperial gold | #D4AF37 |
+| Skin | Natural tan | #D4A574 |
+| Background | Misty gray | #9CA3AF |
+| Background | Earth tone | #8B7355 |
+| Wash | Ink gradient | #2D3748 |
+
+## Visual Elements
+
+- Calligraphic text integration
+- Seal stamps (optional)
+- Ink splatter effects
+- Flowing fabric trails
+- Atmospheric mist
+- Mountain silhouettes
+
+## Quality Markers
+
+- ✓ Dynamic brush stroke quality
+- ✓ Authentic ink wash atmosphere
+- ✓ High contrast compositions
+- ✓ Flowing movement in fabric/hair
+- ✓ Traditional aesthetic elements
+- ✓ Atmospheric depth
+
+## Compatibility
+
+| Tone | Fit | Notes |
+|------|-----|-------|
+| neutral | ✓ | Contemplative stories |
+| warm | ✓ | Nostalgic, gentle |
+| dramatic | ✓✓ | High contrast |
+| vintage | ✓✓ | Historical pieces |
+| romantic | ✗ | Style mismatch |
+| energetic | ✗ | Too refined |
+| action | ✓✓ | Martial arts |
+
+## Best For
+
+Chinese historical stories, martial arts, traditional tales, contemplative narratives, artistic adaptations
@@ -0,0 +1,75 @@
+# ligne-claire
+
+清线画风 - Uniform lines, flat colors, European comic tradition
+
+## Overview
+
+Classic European comic style originating from Hergé's Tintin. Characterized by clean, uniform outlines and flat color fills without gradients. Creates a timeless, accessible aesthetic suitable for educational and narrative content.
+
+## Line Work
+
+- Uniform, clean outlines with consistent weight (2px)
+- No hatching or cross-hatching for shading
+- Sharp, precise edges on all elements
+- Black ink outlines on all figures and objects
+- Shadows indicated through flat color areas, not line techniques
+
+## Character Design
+
+- Slightly stylized/cartoonish characters with realistic proportions
+- Distinctive, recognizable facial features
+- Expressive faces with clear emotions
+- Period-appropriate clothing with attention to detail
+- Consistent character appearance across panels
+- 6-7 head height proportions
+
+## Background Treatment
+
+- Detailed, realistic backgrounds with architectural accuracy
+- Period-specific props and technology
+- Clear spatial depth and perspective
+- Environmental storytelling through details
+- Contrast between simplified characters and detailed backgrounds
+
+## Color Approach
+
+- Flat colors without gradients (true to Ligne Claire tradition)
+- Limited palette per page for cohesion
+- Colors support narrative mood
+- Consistent lighting logic within scenes
+
+## Default Color Palette
+
+| Role | Color | Hex |
+|------|-------|-----|
+| Primary Blue | Clean blue | #3182CE |
+| Primary Red | Classic red | #E53E3E |
+| Primary Yellow | Warm yellow | #ECC94B |
+| Skin | Warm tan | #F7CFAE |
+| Background Light | Light cream | #FFFAF0 |
+| Background Sky | Sky blue | #BEE3F8 |
+
+## Quality Markers
+
+- ✓ Clean, uniform line weight throughout
+- ✓ Flat colors without gradients
+- ✓ Detailed backgrounds, stylized characters
+- ✓ Clear panel borders and reading flow
+- ✓ Hand-drawn text style
+- ✓ Proper perspective in environments
+
+## Compatibility
+
+| Tone | Fit | Notes |
+|------|-----|-------|
+| neutral | ✓✓ | Classic combination |
+| warm | ✓✓ | Nostalgic stories |
+| dramatic | ✓ | Works with high contrast |
+| vintage | ✓ | Period pieces |
+| romantic | ✗ | Style mismatch |
+| energetic | ✓ | Lighter stories |
+| action | ✗ | Lacks dynamic lines |
+
+## Best For
+
+Educational content, balanced narratives, biography comics, historical stories
@@ -0,0 +1,93 @@
+# manga
+
+日漫画风 - Anime/manga aesthetics with expressive characters
+
+## Overview
+
+Japanese manga art style characterized by large expressive eyes, dynamic poses, and visual emotion indicators. Versatile style that works across genres from educational to romantic to action.
+
+## Line Work
+
+- Clean, smooth lines (1.5-2px)
+- Expressive weight variation for emphasis
+- Smooth curves, dynamic strokes
+- Speed lines and motion effects available
+- Screen tone effects for atmosphere
+
+## Character Design
+
+- Anime/manga proportions: larger eyes, expressive faces
+- 5-7 head height proportions (varies by sub-style)
+- Clear emotional indicators (！, ？, sweat drops, sparkles)
+- Dynamic poses and gestures
+- Detailed hair with individual strands
+- Fashionable clothing with natural folds
+
+## Eye Styles
+
+| Type | Description |
+|------|-------------|
+| Standard | Medium-large, 2-3 highlights |
+| Educational | Friendly, approachable eyes |
+| Dramatic | Intense, detailed irises |
+| Cute | Very large, sparkly eyes |
+
+## Background Treatment
+
+- Simplified during dialogue/explanation
+- Detailed for establishing shots
+- Screen tone gradients for mood
+- Abstract backgrounds for emotional moments
+- Technical diagrams styled as displays
+
+## Color Approach
+
+- Clean, bright anime colors
+- Soft gradients on skin
+- Vibrant palette options
+- Light and shadow with soft transitions
+- Color coding for character identification
+
+## Default Color Palette
+
+| Role | Color | Hex |
+|------|-------|-----|
+| Primary Blue | Bright blue | #4299E1 |
+| Primary Orange | Warm orange | #ED8936 |
+| Primary Green | Soft green | #68D391 |
+| Skin | Anime warm | #FEEBC8 |
+| Background | Clean white | #FFFFFF |
+| Highlight | Golden | #FFD700 |
+
+## Visual Elements
+
+- Speech bubbles: rounded (normal), spiky (excitement)
+- Sound effects integrated visually
+- Emotion symbols (sweat drops, anger marks, hearts)
+- Speed lines and motion blur
+- Sparkle and glow effects
+
+## Quality Markers
+
+- ✓ Expressive character faces
+- ✓ Clean, consistent line work
+- ✓ Dynamic poses and compositions
+- ✓ Appropriate use of manga conventions
+- ✓ Readable panel flow
+- ✓ Consistent character designs
+
+## Compatibility
+
+| Tone | Fit | Notes |
+|------|-----|-------|
+| neutral | ✓✓ | Educational manga |
+| warm | ✓ | Slice of life |
+| dramatic | ✓ | Intense moments |
+| romantic | ✓✓ | Shoujo style |
+| energetic | ✓✓ | Shonen style |
+| vintage | ✗ | Style mismatch |
+| action | ✓✓ | Battle manga |
+
+## Best For
+
+Educational tutorials, romance, action, coming-of-age, technical explanations, youth-oriented content
@@ -0,0 +1,89 @@
+# realistic
+
+写实画风 - Digital painting with realistic proportions and lighting
+
+## Overview
+
+Full-color realistic manga style using digital painting techniques. Features anatomically accurate characters, rich gradients, and detailed environmental rendering. Sophisticated aesthetic for mature audiences.
+
+## Line Work
+
+- Clean, precise outlines with clear contours
+- Uniform line weight for character definition
+- No excessive hatching - rely on color for depth
+- Smooth curves and realistic anatomical lines
+- Ligne Claire influence: clean but not simplified
+
+## Character Design
+
+- Realistic human proportions (7-8 head heights)
+- Anatomically accurate features and expressions
+- Detailed facial structure without exaggeration
+- Natural poses and body language
+- Consistent appearance across panels
+- Subtle expressions rather than manga-style
+
+## Rendering Style
+
+- Full-color digital painting with rich gradients
+- Soft shadow transitions on skin and fabric
+- Realistic material textures (glass, liquid, fabric, wood)
+- Detailed hair with natural shine and volume
+- Environmental lighting affects all elements
+- NOT flat cel-shading - smooth color blending
+
+## Background Treatment
+
+- Highly detailed, realistic environments
+- Accurate perspective and spatial depth
+- Atmospheric lighting (warm indoor, cool outdoor)
+- Professional settings rendered with precision
+- Props and objects with realistic textures
+
+## Color Approach
+
+- Rich gradients for depth and volume
+- Realistic lighting with warm/cool contrast
+- Material-specific rendering
+- Subtle color temperature shifts
+- Professional, sophisticated palette
+
+## Default Color Palette
+
+| Role | Color | Hex |
+|------|-------|-----|
+| Skin Light | Natural warm | #F5D6C6 |
+| Skin Shadow | Warm shadow | #E8C4B0 |
+| Environment | Warm wood | #8B7355 |
+| Environment Cool | Cool stone | #9CA3AF |
+| Accent | Wine red | #722F37 |
+| Accent Gold | Gold | #D4AF37 |
+| Light Warm | Amber | #FFB347 |
+| Light Cool | Cool blue | #B0C4DE |
+
+## Quality Markers
+
+- ✓ Anatomically accurate proportions
+- ✓ Smooth color gradients (not flat fills)
+- ✓ Realistic material textures
+- ✓ Detailed, atmospheric backgrounds
+- ✓ Natural lighting with soft shadows
+- ✓ Expressive but subtle expressions
+- ✓ Professional aesthetic
+- ✓ Clean speech bubbles
+
+## Compatibility
+
+| Tone | Fit | Notes |
+|------|-----|-------|
+| neutral | ✓✓ | Professional content |
+| warm | ✓✓ | Nostalgic stories |
+| dramatic | ✓✓ | High drama |
+| vintage | ✓✓ | Period pieces |
+| romantic | ✗ | Style mismatch |
+| energetic | ✗ | Too refined |
+| action | ✓ | Serious action |
+
+## Best For
+
+Professional topics (wine, food, business), lifestyle content, adult narratives, documentary-style, mature educational guides
@@ -0,0 +1,58 @@
+# Auto Selection
+
+Content signals determine default art + tone + layout (or preset).
+
+## Content Signal Matrix
+
+| Content Signals | Art Style | Tone | Layout | Preset |
+|-----------------|-----------|------|--------|--------|
+| Tutorial, how-to, beginner | manga | neutral | webtoon | **ohmsha** |
+| Computing, AI, programming | manga | neutral | dense | **ohmsha** |
+| Technical explanation, educational | manga | neutral | webtoon | **ohmsha** |
+| Pre-1950, classical, ancient | realistic | vintage | cinematic | - |
+| Personal story, mentor | ligne-claire | warm | standard | - |
+| Conflict, breakthrough | (inherit) | dramatic | splash | - |
+| Wine, food, business, lifestyle | realistic | neutral | cinematic | - |
+| Martial arts, wuxia, xianxia | ink-brush | action | splash | **wuxia** |
+| Romance, love, school life | manga | romantic | standard | **shoujo** |
+| Biography, balanced | ligne-claire | neutral | mixed | - |
+
+## Preset Recommendation Rules
+
+**When preset is recommended**: Load `presets/{preset}.md` and apply all special rules.
+
+### ohmsha
+- **Triggers**: Tutorial, technical, educational, computing, programming, how-to, beginner
+- **Special rules**: Visual metaphors, NO talking heads, gadget reveals, Doraemon-style characters
+- **Base**: manga + neutral + webtoon/dense
+
+### wuxia
+- **Triggers**: Martial arts, wuxia, xianxia, cultivation, swordplay
+- **Special rules**: Qi effects, combat visuals, atmospheric elements
+- **Base**: ink-brush + action + splash
+
+### shoujo
+- **Triggers**: Romance, love story, school life, emotional drama
+- **Special rules**: Decorative elements, eye details, romantic beats
+- **Base**: manga + romantic + standard
+
+## Compatibility Matrix
+
+Art Style × Tone combinations work best when matched appropriately:
+
+| Art Style | ✓✓ Best | ✓ Works | ✗ Avoid |
+|-----------|---------|---------|---------|
+| ligne-claire | neutral, warm | dramatic, vintage, energetic | romantic, action |
+| manga | neutral, romantic, energetic, action | warm, dramatic | vintage |
+| realistic | neutral, warm, dramatic, vintage | action | romantic, energetic |
+| ink-brush | neutral, dramatic, action, vintage | warm | romantic, energetic |
+| chalk | neutral, warm, energetic | vintage | dramatic, action, romantic |
+
+**Note**: Art Style × Tone × Layout can be freely combined. Incompatible combinations work but may produce unexpected results.
+
+## Priority Order
+
+1. User-specified options (`--art`, `--tone`, `--style`)
+2. EXTEND.md defaults
+3. Content signal analysis → auto-selection
+4. Fallback: ligne-claire + neutral + standard
@@ -0,0 +1,146 @@
+---
+name: first-time-setup
+description: First-time setup flow for baoyu-comic preferences
+---
+
+# First-Time Setup
+
+## Overview
+
+When no EXTEND.md is found, guide user through preference setup.
+
+## Setup Flow
+
+```
+No EXTEND.md found
+        │
+        ▼
+┌─────────────────────┐
+│ AskUserQuestion     │
+│ (all questions)     │
+└─────────────────────┘
+        │
+        ▼
+┌─────────────────────┐
+│ Create EXTEND.md    │
+└─────────────────────┘
+        │
+        ▼
+    Continue to Step 1
+```
+
+## Questions
+
+**Language**: Use user's input language or preferred language for all questions. Do not always use English.
+
+Use single AskUserQuestion with multiple questions (AskUserQuestion auto-adds "Other" option):
+
+### Question 1: Watermark
+
+```
+header: "Watermark"
+question: "Watermark text for generated comic pages? Type your watermark content (e.g., name, @handle)"
+options:
+  - label: "No watermark (Recommended)"
+    description: "No watermark, can enable later in EXTEND.md"
+```
+
+Position defaults to bottom-right.
+
+### Question 2: Preferred Art Style
+
+```
+header: "Art"
+question: "Default art style preference? Or type another style name"
+options:
+  - label: "Auto-select (Recommended)"
+    description: "Auto-select based on content analysis"
+  - label: "ligne-claire"
+    description: "Uniform lines, flat colors, European comic (Tintin style)"
+  - label: "manga"
+    description: "Japanese manga style, expressive eyes and emotions"
+  - label: "realistic"
+    description: "Digital painting, sophisticated and professional"
+```
+
+### Question 3: Preferred Tone
+
+```
+header: "Tone"
+question: "Default tone/mood preference?"
+options:
+  - label: "Auto-select (Recommended)"
+    description: "Auto-select based on content signals"
+  - label: "neutral"
+    description: "Balanced, rational, educational"
+  - label: "warm"
+    description: "Nostalgic, personal, comforting"
+  - label: "dramatic"
+    description: "High contrast, intense, powerful"
+```
+
+### Question 4: Language
+
+```
+header: "Language"
+question: "Output language for comic text?"
+options:
+  - label: "Auto-detect (Recommended)"
+    description: "Match source content language"
+  - label: "zh"
+    description: "Chinese (中文)"
+  - label: "en"
+    description: "English"
+```
+
+### Question 5: Save Location
+
+```
+header: "Save"
+question: "Where to save preferences?"
+options:
+  - label: "Project"
+    description: ".baoyu-skills/ (this project only)"
+  - label: "User"
+    description: "~/.baoyu-skills/ (all projects)"
+```
+
+## Save Locations
+
+| Choice | Path | Scope |
+|--------|------|-------|
+| Project | `.baoyu-skills/baoyu-comic/EXTEND.md` | Current project |
+| User | `~/.baoyu-skills/baoyu-comic/EXTEND.md` | All projects |
+
+## After Setup
+
+1. Create directory if needed
+2. Write EXTEND.md with frontmatter
+3. Confirm: "Preferences saved to [path]"
+4. Continue to Step 1
+
+## EXTEND.md Template
+
+```yaml
+---
+version: 2
+watermark:
+  enabled: [true/false]
+  content: "[user input or empty]"
+  position: bottom-right
+  opacity: 0.5
+preferred_art: [selected art style or null]
+preferred_tone: [selected tone or null]
+preferred_layout: null
+preferred_aspect: null
+language: [selected or null]
+character_presets: []
+---
+```
+
+## Modifying Preferences Later
+
+Users can edit EXTEND.md directly or run setup again:
+- Delete EXTEND.md to trigger setup
+- Edit YAML frontmatter for quick changes
+- Full schema: `config/preferences-schema.md`
@@ -0,0 +1,158 @@
+---
+name: preferences-schema
+description: EXTEND.md YAML schema for baoyu-comic user preferences
+---
+
+# Preferences Schema
+
+## Full Schema
+
+```yaml
+---
+version: 2
+
+watermark:
+  enabled: false
+  content: ""
+  position: bottom-right  # bottom-right|bottom-left|bottom-center|top-right
+  opacity: 0.5            # 0.1-1.0 (lower default for comics)
+
+preferred_art: null       # ligne-claire|manga|realistic|ink-brush|chalk
+preferred_tone: null      # neutral|warm|dramatic|romantic|energetic|vintage|action
+preferred_layout: null    # standard|cinematic|dense|splash|mixed|webtoon
+preferred_aspect: null    # 3:4|4:3|16:9
+
+language: null            # zh|en|ja|ko|auto
+
+character_presets:
+  - name: my-characters
+    roles:
+      learner: "Name"
+      mentor: "Name"
+      challenge: "Name"
+      support: "Name"
+---
+```
+
+## Field Reference
+
+| Field | Type | Default | Description |
+|-------|------|---------|-------------|
+| `version` | int | 2 | Schema version |
+| `watermark.enabled` | bool | false | Enable watermark |
+| `watermark.content` | string | "" | Watermark text (@username or custom) |
+| `watermark.position` | enum | bottom-right | Position on image |
+| `watermark.opacity` | float | 0.5 | Transparency (0.1-1.0, lower for comics) |
+| `preferred_art` | string | null | Art style (ligne-claire, manga, realistic, ink-brush, chalk) |
+| `preferred_tone` | string | null | Tone (neutral, warm, dramatic, romantic, energetic, vintage, action) |
+| `preferred_layout` | string | null | Layout preference or null |
+| `preferred_aspect` | string | null | Aspect ratio (3:4, 4:3, 16:9) |
+| `language` | string | null | Output language (null = auto-detect) |
+| `character_presets` | array | [] | Preset character roles for styles like ohmsha |
+
+## Art Style Options
+
+| Value | 中文 | Description |
+|-------|------|-------------|
+| `ligne-claire` | 清线 | Uniform lines, flat colors, European comic tradition |
+| `manga` | 日漫 | Large eyes, manga conventions, expressive emotions |
+| `realistic` | 写实 | Digital painting, realistic proportions |
+| `ink-brush` | 水墨 | Chinese brush strokes, ink wash effects |
+| `chalk` | 粉笔 | Chalkboard aesthetic, hand-drawn warmth |
+
+## Tone Options
+
+| Value | 中文 | Description |
+|-------|------|-------------|
+| `neutral` | 中性 | Balanced, rational, educational |
+| `warm` | 温馨 | Nostalgic, personal, comforting |
+| `dramatic` | 戏剧 | High contrast, intense, powerful |
+| `romantic` | 浪漫 | Soft, beautiful, decorative elements |
+| `energetic` | 活力 | Bright, dynamic, exciting |
+| `vintage` | 复古 | Historical, aged, period authenticity |
+| `action` | 动作 | Speed lines, impact effects, combat |
+
+## Position Options
+
+| Value | Description |
+|-------|-------------|
+| `bottom-right` | Lower right corner (default, works with most panel layouts) |
+| `bottom-left` | Lower left corner |
+| `bottom-center` | Bottom center (good for webtoon vertical scroll) |
+| `top-right` | Upper right corner (avoid - conflicts with page numbers) |
+
+## Character Preset Fields
+
+| Field | Required | Description |
+|-------|----------|-------------|
+| `name` | Yes | Unique preset identifier |
+| `roles.learner` | No | Character representing the learner/protagonist |
+| `roles.mentor` | No | Character representing the teacher/guide |
+| `roles.challenge` | No | Character representing obstacles/antagonist |
+| `roles.support` | No | Character providing support/comic relief |
+
+## Example: Minimal Preferences
+
+```yaml
+---
+version: 2
+watermark:
+  enabled: true
+  content: "@myusername"
+preferred_art: ligne-claire
+preferred_tone: neutral
+---
+```
+
+## Example: Full Preferences
+
+```yaml
+---
+version: 2
+watermark:
+  enabled: true
+  content: "@comicstudio"
+  position: bottom-right
+  opacity: 0.4
+
+preferred_art: manga
+preferred_tone: neutral
+
+preferred_layout: webtoon
+
+preferred_aspect: "3:4"
+
+language: zh
+
+character_presets:
+  - name: tech-tutorial
+    roles:
+      learner: "小明"
+      mentor: "教授"
+      challenge: "难题怪"
+      support: "小助手"
+  - name: doraemon
+    roles:
+      learner: "大雄"
+      mentor: "哆啦A梦"
+      challenge: "胖虎"
+      support: "静香"
+---
+```
+
+## Migration from v1
+
+If you have a v1 preferences file with `preferred_style`, migrate as follows:
+
+| Old `preferred_style.name` | New `preferred_art` | New `preferred_tone` |
+|---------------------------|---------------------|---------------------|
+| classic | ligne-claire | neutral |
+| dramatic | ligne-claire | dramatic |
+| warm | ligne-claire | warm |
+| sepia | realistic | vintage |
+| vibrant | manga | energetic |
+| ohmsha | manga | neutral |
+| realistic | realistic | neutral |
+| wuxia | ink-brush | action |
+| shoujo | manga | romantic |
+| chalkboard | chalk | neutral |
@@ -0,0 +1,80 @@
+---
+name: watermark-guide
+description: Watermark configuration guide for baoyu-comic
+---
+
+# Watermark Guide
+
+## Position Diagram
+
+```
+┌─────────────────────────────┐
+│                  [top-right]│ ← Avoid (conflicts with page numbers)
+│                             │
+│                             │
+│       COMIC PAGE CONTENT    │
+│                             │
+│                             │
+│[bottom-left][bottom-center][bottom-right]│
+└─────────────────────────────┘
+```
+
+## Position Recommendations
+
+| Position | Best For | Avoid When |
+|----------|----------|------------|
+| `bottom-right` | Default choice, works with most panel layouts | Key panel in bottom-right |
+| `bottom-left` | Right-heavy layouts | Key panel in bottom-left |
+| `bottom-center` | Webtoon vertical scroll, centered designs | Text-heavy bottom area |
+| `top-right` | **Not recommended for comics** | Always - conflicts with page numbers |
+
+## Opacity for Comics
+
+Comics typically use lower opacity than infographics to avoid disrupting panel flow:
+
+| Opacity | Visual Effect | Use Case |
+|---------|---------------|----------|
+| 0.3 | Very subtle, barely visible | **Recommended for comics** |
+| 0.4 | Light presence | Balance of visibility and subtlety |
+| 0.5 | Noticeable | Standard comics default |
+| 0.6+ | Strong presence | Not recommended (distracting) |
+
+**Default**: 0.5 (compared to 0.7 for infographics)
+
+## Content Format
+
+| Format | Example | Style |
+|--------|---------|-------|
+| Handle | `@username` | Social media style |
+| Text | `Studio Name` | Professional branding |
+| Chinese | `漫画工作室` | Chinese market |
+| Initials | `ABC` | Minimal, clean |
+
+## Best Practices for Comics
+
+1. **Panel-aware placement**: Avoid placing over speech bubbles or key action
+2. **Consistency**: Use same watermark across all pages in comic
+3. **Size**: Keep subtle - should not distract from storytelling
+4. **Style matching**: Watermark style should complement comic's visual style
+5. **Webtoon special**: Use `bottom-center` for vertical scroll format
+
+## Prompt Integration
+
+When watermark is enabled, add to image generation prompt:
+
+```
+Include a subtle watermark "[content]" positioned at [position]
+with approximately [opacity*100]% visibility. The watermark should
+be legible but not distracting from the comic panels and storytelling.
+Ensure watermark does not overlap speech bubbles or key action.
+```
+
+## Common Issues
+
+| Issue | Solution |
+|-------|----------|
+| Watermark invisible on dark panels | Adjust contrast or add subtle outline |
+| Watermark overlaps speech bubble | Change position or lower on page |
+| Watermark inconsistent across pages | Use session ID for consistency |
+| Watermark too prominent | Decrease opacity (0.3-0.4 for comics) |
+| Conflicts with page number | Never use top-right position |
@@ -0,0 +1,123 @@
+# Partial Workflows
+
+Options to run specific parts of the workflow.
+
+## Options Summary
+
+| Option | Steps Executed | Output |
+|--------|----------------|--------|
+| `--storyboard-only` | 1-3 | `storyboard.md` + `characters/` |
+| `--prompts-only` | 1-5 | + `prompts/*.md` |
+| `--images-only` | 7-9 | + images + PDF |
+| `--regenerate N` | 7 (partial) | Specific page(s) + PDF |
+
+---
+
+## Using `--storyboard-only`
+
+Generate storyboard and characters without prompts or images:
+
+```bash
+/baoyu-comic content.md --storyboard-only
+```
+
+**Workflow**: Steps 1-3 only (stop after storyboard + characters)
+
+**Output**:
+- `analysis.md`
+- `storyboard.md`
+- `characters/characters.md`
+
+**Use case**: Review and edit the storyboard before generating images. Useful for:
+- Getting feedback on the narrative structure
+- Making manual adjustments to panel layouts
+- Defining custom characters
+
+---
+
+## Using `--prompts-only`
+
+Generate storyboard, characters, and prompts without images:
+
+```bash
+/baoyu-comic content.md --prompts-only
+```
+
+**Workflow**: Steps 1-5 (generate prompts, skip images)
+
+**Output**:
+- `analysis.md`
+- `storyboard.md`
+- `characters/characters.md`
+- `prompts/*.md`
+
+**Use case**: Review and edit prompts before image generation. Useful for:
+- Fine-tuning image generation prompts
+- Ensuring visual consistency before committing to generation
+- Making style adjustments at the prompt level
+
+---
+
+## Using `--images-only`
+
+Generate images from existing prompts (starts at Step 7):
+
+```bash
+/baoyu-comic comic/topic-slug/ --images-only
+```
+
+**Workflow**: Skip to Step 7, then 8-9
+
+**Prerequisites** (must exist in directory):
+- `prompts/` directory with page prompt files
+- `storyboard.md` with style information
+- `characters/characters.md` with character definitions
+
+**Output**:
+- `characters/characters.png` (if not exists)
+- `NN-{cover|page}-[slug].png` images
+- `{topic-slug}.pdf`
+
+**Use case**: Re-generate images after editing prompts. Useful for:
+- Recovering from failed image generation
+- Trying different image generation settings
+- Regenerating after manual prompt edits
+
+---
+
+## Using `--regenerate`
+
+Regenerate specific pages only:
+
+```bash
+# Single page
+/baoyu-comic comic/topic-slug/ --regenerate 3
+
+# Multiple pages
+/baoyu-comic comic/topic-slug/ --regenerate 2,5,8
+
+# Cover page
+/baoyu-comic comic/topic-slug/ --regenerate 0
+```
+
+**Workflow**:
+1. Read existing prompts for specified pages
+2. Regenerate images only for those pages
+3. Regenerate PDF
+
+**Prerequisites** (must exist):
+- `prompts/NN-{cover|page}-[slug].md` for specified pages
+- `characters/characters.png` (for reference)
+
+**Output**:
+- Regenerated `NN-{cover|page}-[slug].png` for specified pages
+- Updated `{topic-slug}.pdf`
+
+**Use case**: Fix specific pages without regenerating entire comic. Useful for:
+- Fixing a single problematic page
+- Iterating on specific visuals
+- Regenerating pages after prompt edits
+
+**Page numbering**:
+- `0` = Cover page
+- `1-N` = Content pages
@@ -0,0 +1,114 @@
+# ohmsha
+
+Ohmsha预设 - Educational manga with visual metaphors
+
+## Base Configuration
+
+| Dimension | Value |
+|-----------|-------|
+| Art Style | manga |
+| Tone | neutral |
+| Layout | webtoon (default) |
+
+Equivalent to: `--art manga --tone neutral`
+
+## Unique Rules
+
+This preset includes special rules beyond the art+tone combination. When `--style ohmsha` is used, ALL rules below must be applied.
+
+### Visual Metaphor Requirements (CRITICAL)
+
+Every technical concept MUST be visualized as a metaphor:
+
+| Concept Type | Visualization Approach |
+|-------------|----------------------|
+| Algorithm | Gadget/machine that demonstrates the process |
+| Data structure | Physical space characters can enter/explore |
+| Mathematical formula | Transformation visible in environment |
+| Abstract process | Tangible flow of particles/objects |
+
+**Wrong approach**: Character points at blackboard explaining
+**Right approach**: Character uses "Concept Visualizer" gadget, steps into metaphorical space
+
+### Visual Metaphor Examples
+
+| Concept | Wrong (Talking Head) | Right (Visual Metaphor) |
+|---------|---------------------|------------------------|
+| Attention mechanism | Character points at formula on blackboard | "Attention Flashlight" gadget illuminates key words in dark room |
+| Gradient descent | "The algorithm minimizes loss" | Character rides ball rolling down mountain valley |
+| Neural network | Diagram with arrows | Living network of glowing creatures passing messages |
+| Overfitting | "The model memorized the data" | Character wearing clothes that fit only one specific pose |
+
+### Character Roles (Required)
+
+**DEFAULT: Use Doraemon characters** unless user explicitly specifies `--characters` or has character presets in EXTEND.md.
+
+| Role | Default Character | Visual | Traits |
+|------|-------------------|--------|--------|
+| Student (Role A) | 大雄 (Nobita) | Boy, 10yo, round glasses, black hair, yellow shirt, navy shorts | Confused, asks basic but crucial questions, represents reader |
+| Mentor (Role B) | 哆啦A梦 (Doraemon) | Blue robot cat, white belly, 4D pocket, red nose, golden bell | Knowledgeable, patient, uses gadgets as technical metaphors |
+| Challenge (Role C) | 胖虎 (Gian) | Stocky boy, small eyes, orange shirt | Represents misunderstanding, or "noise" in the data |
+| Support (Role D) | 静香 (Shizuka) | Cute girl, black short hair, pink dress | Asks clarifying questions, provides alternative perspectives |
+
+**IMPORTANT**: These Doraemon characters ARE the default for ohmsha preset. Generate character definitions using these exact characters unless user requests otherwise.
+
+To use custom characters: `--characters "Student:小明,Mentor:教授"` or define in EXTEND.md.
+
+### Page Title Convention
+
+Every page MUST have a narrative title (not section header):
+
+**Wrong**: "Chapter 1: Introduction to Transformers"
+**Right**: "The Day Nobita Couldn't Understand Anyone"
+
+### Gadget Reveal Pattern
+
+When introducing a concept:
+
+1. Student expresses confusion with visual indicator (？, spiral eyes)
+2. Mentor dramatically produces gadget with sparkle effects
+3. Gadget name announced in bold with explanation
+4. Demonstration begins - student enters metaphorical space
+
+### Ending Requirements
+
+Final page MUST include:
+
+1. Student demonstrating understanding (applying the concept)
+2. Callback to opening problem (now resolved)
+3. Mentor's satisfied expression
+4. Optional: hint at next topic
+
+### NO Talking Heads Rule
+
+**Critical**: Characters must DO things, not just explain.
+
+Every panel should show:
+- Action being performed
+- Metaphor being demonstrated
+- Character interaction with concept-space
+- NOT: two characters facing each other talking
+
+### Special Visual Elements
+
+| Element | Usage |
+|---------|-------|
+| Gadget reveals | Dramatic unveiling with sparkle effects |
+| Concept spaces | Rounded borders, glowing edges for "imagination mode" |
+| Information displays | Holographic UI style for technical details |
+| Aha moments | Radial lines, light burst effects |
+| Confusion | Spiral eyes, question marks floating above head |
+
+## Quality Markers
+
+- ✓ Every concept is a visual metaphor
+- ✓ Characters are DOING things, not just talking
+- ✓ Clear student/mentor dynamic
+- ✓ Gadgets and props drive the explanation
+- ✓ Expressive manga-style emotions
+- ✓ Information density through visual design, not text walls
+- ✓ Narrative page titles
+
+## Reference
+
+For complete guidelines, see `references/ohmsha-guide.md`
@@ -0,0 +1,116 @@
+# shoujo
+
+少女预设 - Classic shoujo manga with romantic aesthetics
+
+## Base Configuration
+
+| Dimension | Value |
+|-----------|-------|
+| Art Style | manga |
+| Tone | romantic |
+| Layout | standard (default) |
+
+Equivalent to: `--art manga --tone romantic`
+
+## Unique Rules
+
+This preset includes special rules beyond the art+tone combination. When `--style shoujo` is used, ALL rules below must be applied.
+
+### Decorative Elements (Required)
+
+Every emotional moment must include decorative elements:
+
+| Emotion | Required Decorations |
+|---------|---------------------|
+| Love | Floating hearts, sparkles, rose petals |
+| Longing | Feathers, bubbles, distant sparkles |
+| Joy | Flowers blooming, light bursts, stars |
+| Sadness | Falling petals, fading sparkles |
+| Shyness | Soft sparkles, floating bubbles |
+| Realization | Radiating lines with sparkles |
+
+### Eye Detail Requirements
+
+Eyes are critical in shoujo style:
+
+| Aspect | Treatment |
+|--------|-----------|
+| Size | Larger than standard manga (1.2x) |
+| Highlights | Multiple (3-5), placed for emotion |
+| Reflection | Scene reflection in emotional moments |
+| Sparkle | Built-in sparkle effects |
+| Tears | Crystalline, detailed teardrops |
+
+### Character Beauty Standards
+
+| Feature | Treatment |
+|---------|-----------|
+| Hair | Flowing, detailed strands, shine highlights |
+| Skin | Porcelain, soft blush on cheeks |
+| Lips | Soft, slightly glossy |
+| Hands | Elegant, expressive gestures |
+| Posture | Graceful, elegant poses |
+
+### Background Effects
+
+**Abstract backgrounds** for emotional moments:
+
+| Moment Type | Background |
+|-------------|-----------|
+| Love confession | Soft gradient + floating flowers |
+| Shock | Screen tone speed lines + sparkles |
+| Memory | Dreamy blur + scattered petals |
+| Realization | Radial lines + light burst |
+| Intimate | Soft focus + floating elements |
+
+### Panel Flow
+
+- Overlap panels for intimate moments
+- Break panel borders for emotional impact
+- Float decorative elements between panels
+- Use screen tone gradients for mood
+- Irregular panel shapes for drama
+
+### Emotional Beat Timing
+
+Slow down pacing for emotional impact:
+
+| Scene Type | Panel Treatment |
+|------------|-----------------|
+| Confession | Multiple small panels, then splash |
+| Eye contact | Close-up sequence |
+| Touch | Slow-motion panel breakdown |
+| Realization | Build-up panels then impact |
+
+### Color Palette Application
+
+| Scene Type | Palette |
+|------------|---------|
+| Romantic | Pink, lavender, rose gold |
+| Happy | Soft yellow, peach, sky blue |
+| Sad | Pale blue, silver, gray lavender |
+| Dramatic | Deep rose, purple, contrast |
+
+### Screen Tone Usage
+
+| Mood | Tone Pattern |
+|------|-------------|
+| Neutral | Clean, minimal |
+| Romantic | Soft gradient overlays |
+| Dramatic | Heavy contrast tones |
+| Dreamy | Soft dot patterns |
+
+## Quality Markers
+
+- ✓ Large, sparkling detailed eyes
+- ✓ Decorative elements in emotional moments
+- ✓ Flowing, beautiful character designs
+- ✓ Soft, pastel color palette
+- ✓ Elegant panel compositions
+- ✓ Screen tone mood effects
+- ✓ Romantic atmosphere throughout
+- ✓ Beautiful, expressive poses
+
+## Best For
+
+Romance stories, coming-of-age, friendship narratives, school life, emotional drama, love stories
@@ -0,0 +1,110 @@
+# wuxia
+
+武侠预设 - Hong Kong martial arts comic style
+
+## Base Configuration
+
+| Dimension | Value |
+|-----------|-------|
+| Art Style | ink-brush |
+| Tone | action |
+| Layout | splash (default) |
+
+Equivalent to: `--art ink-brush --tone action`
+
+## Unique Rules
+
+This preset includes special rules beyond the art+tone combination. When `--style wuxia` is used, ALL rules below must be applied.
+
+### Qi/Energy Effects (Required)
+
+Martial arts power must be visible through qi effects:
+
+| Effect Type | Visual Treatment |
+|-------------|-----------------|
+| Internal qi | Glowing aura around character |
+| External qi | Visible energy projection |
+| Qi clash | Radiating impact waves |
+| Qi absorption | Flowing particles toward character |
+| Hidden power | Subtle glow in eyes/fists |
+
+### Energy Colors
+
+| Qi Type | Color |
+|---------|-------|
+| Righteous | Blue (#4299E1), Gold (#FFD700) |
+| Fierce | Red (#DC2626), Orange (#EA580C) |
+| Evil | Purple (#7C3AED), Green (#16A34A) |
+| Pure | White, Silver |
+| Ancient | Gold with particles |
+
+### Combat Visual Language
+
+**Impact moments** must include:
+
+1. Speed lines radiating from impact point
+2. Flying debris (stone, wood, cloth)
+3. Shockwave rings
+4. Dust/energy clouds
+5. Hair and clothing blown back
+
+### Movement Depiction
+
+| Speed Level | Visual Treatment |
+|-------------|-----------------|
+| Normal | Standard pose |
+| Fast | Motion blur, speed lines |
+| Lightning | Afterimages, multiple positions |
+| Teleport | Fade effect, particle trail |
+
+### Environmental Integration
+
+Backgrounds must support action:
+
+| Environment | Combat Enhancement |
+|-------------|-------------------|
+| Mountains | Crumbling peaks from impacts |
+| Forest | Exploding trees, flying leaves |
+| Water | Dramatic splashes, walking on water |
+| Temple | Breaking pillars, flying tiles |
+| Cliff | Dramatic falls, wind effects |
+
+### Character Pose Guidelines
+
+- Dynamic warrior stances with weight distribution
+- Flowing robes and hair showing movement
+- Muscle tension visible in action
+- Feet planted or in dynamic motion
+- Traditional martial arts postures
+
+### Weapon Effects
+
+| Weapon | Visual Treatment |
+|--------|-----------------|
+| Sword | Trailing light arc, blade glow |
+| Palm | Qi projection, wind effect |
+| Staff | Spinning blur, impact ripples |
+| Whip | Flowing energy trail |
+
+### Atmospheric Elements
+
+Always include:
+- Floating particles (leaves, petals, dust)
+- Ink wash mist for depth
+- Wind direction indicators
+- Dramatic sky/weather when appropriate
+
+## Quality Markers
+
+- ✓ Dynamic action poses with sense of motion
+- ✓ Ink brush aesthetic in line work
+- ✓ Visible qi/energy effects
+- ✓ High contrast dramatic lighting
+- ✓ Atmospheric backgrounds with Chinese elements
+- ✓ Flowing fabric and hair movement
+- ✓ Impactful combat moments
+- ✓ Speed lines and impact effects
+
+## Best For
+
+Martial arts stories, Chinese historical fiction, wuxia/xianxia adaptations, action-heavy narratives
@@ -1,61 +0,0 @@
-# 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
@@ -1,54 +0,0 @@
-# classic
-
-Traditional Ligne Claire, balanced and timeless
-
-## Style Guidelines
-
-### Line Work
- Uniform, clean outlines with consistent weight (approximately 2px)
- No hatching or cross-hatching for shading
- Sharp, precise edges on all elements
- Black ink outlines on all figures and objects
- Shadows indicated through flat color areas, not line techniques
-
-### Character Design
- Slightly stylized/cartoonish characters with realistic proportions
- Distinctive, recognizable facial features
- Expressive faces with clear emotions
- Period-appropriate clothing with attention to detail
- Consistent character appearance across panels
-
-### Background Treatment
- Detailed, realistic backgrounds with architectural accuracy
- Period-specific props and technology
- Clear spatial depth and perspective
- Environmental storytelling through details
- Contrast between simplified characters and detailed backgrounds
-
-## Color Palette
-
- Primary: Clean blue (#3182CE), red (#E53E3E), yellow (#ECC94B)
- Skin: Warm tan (#F7CFAE)
- Background: Light cream (#FFFAF0), sky blue (#BEE3F8)
-
-## Color Approach
- Flat colors without gradients (true to Ligne Claire tradition)
- Limited palette per page for cohesion
- Colors support narrative mood
- Consistent lighting logic within scenes
-
-## Quality Markers
-
-A good Ligne Claire comic page exhibits:
- ✓ Clean, uniform line weight throughout
- ✓ Flat colors without gradients
- ✓ Detailed backgrounds, stylized characters
- ✓ Clear panel borders and reading flow
- ✓ Hand-drawn text style
- ✓ Period-appropriate details
- ✓ Expressive but consistent characters
- ✓ Proper perspective in environments
-
-## Best For
-
-Educational content, balanced narratives, biography comics
@@ -1,34 +0,0 @@
-# dramatic
-
-High contrast, intense moments
-
-## Style Guidelines
-
-### Line Work
- 2-3px outlines, heavier on shadows
- Dramatic angles and perspectives
- Strong contrast between light and dark areas
-
-### Character Design
- Intense expressions, dynamic poses
- Dramatic lighting on faces
- Sharp angular features emphasized
-
-### Background Treatment
- High contrast, angular shadows
- Dramatic lighting effects
- Silhouettes and stark compositions
-
-## Color Palette
-
- Primary: Deep navy (#1A365D), crimson (#9B2C2C), stark white
- Shadows: Heavy blacks, dramatic contrast
- Highlights: Sharp whites, limited mid-tones
-
-## Mood
-
-Tension, breakthrough moments, conflict
-
-## Best For
-
-Pivotal discoveries, conflicts, climactic scenes
@@ -1,107 +0,0 @@
-# ohmsha
-
-Ohmsha Manga Guide style - educational manga with visual metaphors
-
-## Core Philosophy
-
-Educational manga where every concept becomes a visual metaphor or action. NO talking heads - characters must DO things, not just explain.
-
-## Visual Style
-
- **Type**: Manga-style educational comic
- **Orientation**: Portrait (vertical), optimized for scrolling
- **Colors**: Full color, bright and clean anime/manga aesthetic
- **Lines**: Clean manga lines (1.5-2px), smooth curves, expressive
-
-## Character Design (Manga Style)
-
- Anime/manga proportions: slightly larger eyes, expressive faces
- **Student character**: Confused expressions, question marks (？), sweat drops, represents reader
- **Mentor character**: Confident poses, explanatory gestures, produces gadgets/tools
- Clear emotional indicators using manga conventions (！, ？, sweat drops, sparkles)
- Consistent character designs across all panels
-
-## Background Treatment
-
- Simplified backgrounds during dialogue/explanation
- Detailed "imagination spaces" for concept visualization
- Technical diagrams styled as holographic displays or magical blueprints
- Screen tone effects for atmosphere
-
-## Visual Metaphor Requirements (CRITICAL)
-
-Every technical concept MUST be visualized as:
-
-| Concept Type | Visualization Approach |
-|-------------|----------------------|
-| Algorithm | Gadget/machine that demonstrates the process |
-| Data structure | Physical space characters can enter/explore |
-| Mathematical formula | Transformation visible in environment |
-| Abstract process | Tangible flow of particles/objects |
-
-**Wrong approach**: Character points at blackboard explaining
-**Right approach**: Character uses "Concept Visualizer" gadget, steps into metaphorical space
-
-### Visual Metaphor Examples
-
-| Concept | Wrong (Talking Head) | Right (Visual Metaphor) |
-|---------|---------------------|------------------------|
-| Attention mechanism | Character points at formula on blackboard | "Attention Flashlight" gadget illuminates key words in dark room |
-| Gradient descent | "The algorithm minimizes loss" | Character rides ball rolling down mountain valley |
-| Neural network | Diagram with arrows | Living network of glowing creatures passing messages |
-| Overfitting | "The model memorized the data" | Character wearing clothes that fit only one specific pose |
-
-## Panel Layout for Ohmsha
-
- Vertical scroll optimized (webtoon style)
- Single column, panels stack vertically
- Generous whitespace between major beats
- Panels can bleed to edges for impact
- "Float" elements between panels for emphasis
-
-## Special Visual Elements
-
- **Gadget reveals**: Dramatic unveiling with sparkle effects
- **Concept spaces**: Rounded borders, glowing edges for "imagination mode"
- **Information displays**: Holographic UI style for technical details
- **Aha moments**: Radial lines, light burst effects
- **Confusion**: Spiral eyes, question marks floating above head
-
-## Text Elements (Ohmsha)
-
- Hand-lettered manga style
- Sound effects integrated visually (ドキドキ, ピカーン, etc.)
- Speech bubbles: rounded for normal, spiky for excitement/shock
- Thought bubbles for internal process visualization
- Technical terms in bold with furigana-style annotations if needed
-
-## Color Palette
-
- Primary: Bright blue (#4299E1), warm orange (#ED8936), soft green (#68D391)
- Skin: Anime-style warm (#FEEBC8)
- Background: Clean white, soft gradients
- Gadgets: Metallic accents (#FFD700, #C0C0C0), vibrant highlights
- Concept spaces: Pastel backgrounds, glowing accents
-
-## Quality Markers (Ohmsha)
-
- ✓ Every concept is a visual metaphor, not just explained
- ✓ Characters are DOING things, not just talking
- ✓ Clear student/mentor dynamic
- ✓ Gadgets and props drive the explanation
- ✓ Expressive manga-style emotions
- ✓ Information density through visual design, not text walls
-
-## Character Setup (Required)
-
-Define characters before generating:
-
-| Role | Default | Traits |
-|------|---------|--------|
-| Student (Role A) | 大雄 | Confused, asks basic but crucial questions, represents reader |
-| Mentor (Role B) | 哆啦A梦 | Knowledgeable, patient, uses gadgets as technical metaphors |
-| Antagonist (Role C, optional) | 胖虎 | Represents misunderstanding, or "noise" in the data |
-
-## Best For
-
-Technical tutorials, complex concepts (ML, physics, math), self-study material
@@ -1,66 +0,0 @@
-# realistic
-
-Full-color realistic manga style with digital painting techniques
-
-## Style Guidelines
-
-### Line Work
- Clean, precise outlines with clear contours
- Uniform line weight for character definition
- No excessive hatching - rely on color for depth
- Smooth curves and realistic anatomical lines
- Ligne Claire influence: clean but not overly simplified
-
-### Character Design
- Realistic human proportions (7-8 head heights)
- Anatomically accurate features and expressions
- Detailed facial structure without exaggeration
- Natural poses and body language
- Consistent character appearance across all panels
- Subtle expressions rather than manga-style exaggeration
-
-### Rendering Style
- Full-color digital painting with rich gradients
- Soft shadow transitions on skin and fabric
- Realistic material textures (glass, liquid, fabric, wood)
- Detailed hair with natural shine and volume
- Environmental lighting affects all elements
- NOT flat cel-shading - use smooth color blending
-
-### Background Treatment
- Highly detailed, realistic environments
- Accurate perspective and spatial depth
- Atmospheric lighting (warm indoor, cool outdoor)
- Professional settings rendered with precision
- Props and objects with realistic textures
-
-## Color Palette
-
- Skin: Natural warm tones (#F5D6C6, #E8C4B0)
- Hair: Rich browns and blacks with highlights
- Environment: Warm wood tones (#8B7355), cool stone (#9CA3AF)
- Accent: Wine red (#722F37), gold (#D4AF37)
- Lighting: Warm amber (#FFB347), cool blue (#B0C4DE)
-
-## Color Approach
- Rich gradients for depth and volume
- Realistic lighting with warm/cool contrast
- Material-specific rendering (glass transparency, liquid reflection)
- Subtle color temperature shifts for atmosphere
- Professional, sophisticated palette
-
-## Quality Markers
-
-A good realistic manga page exhibits:
- ✓ Anatomically accurate character proportions
- ✓ Smooth color gradients (not flat fills)
- ✓ Realistic material textures
- ✓ Detailed, atmospheric backgrounds
- ✓ Natural lighting with soft shadows
- ✓ Expressive but subtle facial expressions
- ✓ Professional, sophisticated aesthetic
- ✓ Clean speech bubbles with clear typography
-
-## Best For
-
-Professional topics (wine, food, business), lifestyle content, adult-oriented narratives, educational guides for mature audiences, documentary-style storytelling
@@ -1,34 +0,0 @@
-# sepia
-
-Historical, archival feel
-
-## Style Guidelines
-
-### Line Work
- 2px, classic weight with aged texture
- Vintage illustration style
- Period-appropriate techniques
-
-### Character Design
- Period-accurate attire, formal poses
- Historical accuracy emphasized
- Classical proportions
-
-### Background Treatment
- Historical settings, vintage details
- Aged paper effect
- Period architecture and props
-
-## Color Palette
-
- Primary: Sepia brown (#8B7355), aged paper (#F5E6D3)
- Accents: Faded teal, muted burgundy
- Background: Yellowed paper, vintage tones
-
-## Mood
-
-Historical distance, period authenticity
-
-## Best For
-
-Pre-1950s stories, classical science, historical figures
@@ -1,45 +0,0 @@
-# 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
@@ -1,34 +0,0 @@
-# vibrant
-
-Energetic, engaging, educational
-
-## Style Guidelines
-
-### Line Work
- 2-2.5px, expressive weight variation
- Dynamic, energetic lines
- Emphasis on movement and action
-
-### Character Design
- Expressive, animated, approachable
- Wide eyes, big reactions
- Dynamic poses
-
-### Background Treatment
- Simplified, focus on action
- Bright, clean compositions
- Energy effects and motion lines
-
-## Color Palette
-
- Primary: Bright red (#F56565), sunny yellow (#F6E05E), sky blue (#63B3ED)
- Accents: Magenta, lime green
- Background: Clean white, bright pastels
-
-## Mood
-
-Excitement, discovery, wonder
-
-## Best For
-
-Science explanations, "aha" moments, young audience
@@ -1,34 +0,0 @@
-# warm
-
-Nostalgic, personal storytelling
-
-## Style Guidelines
-
-### Line Work
- 1.5-2px, slightly softer edges
- Gentle curves, friendly feel
- Less rigid than classic style
-
-### Character Design
- Friendly expressions, relaxed poses
- Warm, inviting character designs
- Approachable proportions
-
-### Background Treatment
- Cozy interiors, warm lighting
- Nostalgic feel
- Soft focus on backgrounds
-
-## Color Palette
-
- Primary: Golden (#D69E2E), orange (#DD6B20), soft brown (#8B6F47)
- Skin: Warm golden (#FEEBC8)
- Background: Warm cream (#FEF3C7), sunset tones
-
-## Mood
-
-Memory, personal journey, reflection
-
-## Best For
-
-Personal stories, childhood scenes, mentorship
@@ -1,54 +0,0 @@
-# wuxia
-
-Hong Kong martial arts comic style (港漫武侠风格)
-
-## Style Guidelines
-
-### Line Work
- 2-3px dynamic brush strokes with varying weight
- Ink wash effects, traditional Chinese brush feel
- Speed lines and impact effects for action scenes
- Bold, confident strokes with sharp edges
-
-### Character Design
- Realistic human proportions (7.5-8 head heights)
- Defined musculature, dynamic warrior poses
- Flowing hair and clothing in motion
- Intense, determined facial expressions
- Traditional Chinese martial arts attire (robes, armor)
-
-### Background Treatment
- Dramatic landscapes: mountains, waterfalls, temples
- Ink wash atmospheric effects
- Flying debris, dust clouds during combat
- Energy/qi effects with flowing lines
- High contrast silhouettes
-
-## Color Palette
-
- Primary: Deep black ink, crimson red (#8B0000), gold (#D4AF37)
- Skin: Natural tan with dramatic shadows
- Background: Misty grays, earth tones, ink wash gradients
- Effects: Glowing qi energy (blue, gold, white)
-
-## Special Effects
-
- **Combat impact**: Radiating lines, shockwaves, debris
- **Qi/energy**: Flowing aura, glowing effects around characters
- **Movement**: Extreme speed lines, motion blur
- **Atmosphere**: Ink wash clouds, mist, flying leaves/petals
-
-## Quality Markers
-
-A good wuxia comic page exhibits:
- ✓ Dynamic action poses with sense of motion
- ✓ Ink brush aesthetic in line work
- ✓ High contrast dramatic lighting
- ✓ Atmospheric backgrounds with Chinese elements
- ✓ Energy/qi effects that feel powerful
- ✓ Flowing fabric and hair movement
- ✓ Impactful combat moments
-
-## Best For
-
-Martial arts stories, Chinese historical fiction, action-heavy narratives, wuxia/xianxia adaptations
@@ -0,0 +1,110 @@
+# action
+
+动作基调 - Speed, impact, power
+
+## Overview
+
+High-impact action atmosphere with dynamic movement, combat effects, and powerful visual energy. Creates visceral, exciting sequences.
+
+## Mood Characteristics
+
+- Speed and motion
+- Power and impact
+- Combat intensity
+- Physical energy
+- Visceral excitement
+
+## Color Modifiers
+
+When applied to any art style:
+
+| Adjustment | Direction |
+|------------|-----------|
+| Saturation | High contrast |
+| Contrast | Maximum |
+| Temperature | Variable per effect |
+| Brightness | Dynamic range |
+
+## Action Effects
+
+**Combat/motion effects** (apply liberally):
+
+| Effect | Usage |
+|--------|-------|
+| Speed lines | Motion, velocity |
+| Impact bursts | Hits, collisions |
+| Shockwaves | Powerful impacts |
+| Flying debris | Environmental destruction |
+| Dust clouds | Ground impacts |
+| Motion blur | Fast movement |
+| Afterimages | Super speed |
+
+## Special Effects
+
+| Effect Type | Visual Approach |
+|------------|-----------------|
+| Energy attacks | Glowing, radiating |
+| Physical impacts | Radiating lines, debris |
+| Movement | Speed lines, blur |
+| Atmosphere | Flying particles, wind |
+
+## Effect Colors
+
+| Effect | Color | Hex |
+|--------|-------|-----|
+| Energy glow | Blue | #4299E1 |
+| Fire/power | Gold | #FFD700 |
+| Impact | White burst | #FFFFFF |
+| Blood/intensity | Deep red | #8B0000 |
+
+## Lighting
+
+- Dynamic, shifting
+- Impact flashes
+- Energy glow sources
+- Rim lighting on figures
+- Dramatic contrast
+
+## Emotional Range
+
+| Emotion | Expression |
+|---------|-----------|
+| Determination | Fierce focus |
+| Rage | Intense, powerful |
+| Triumph | Victorious pose |
+| Struggle | Strained effort |
+
+## Composition
+
+- Dynamic angles
+- Extreme perspectives
+- Panel-breaking layouts
+- Asymmetric designs
+- Impact-focused framing
+
+## Pose Guidelines
+
+- Dynamic warrior poses
+- Weight and momentum visible
+- Muscle tension shown
+- Flow of movement captured
+- Impact points emphasized
+
+## Best For
+
+- Martial arts combat
+- Action sequences
+- Sports moments
+- Physical challenges
+- Battle scenes
+- Climactic confrontations
+
+## Combination Notes
+
+Works especially well with:
+- ink-brush: wuxia combat
+- manga: shonen battles
+
+Avoid with:
+- chalk: style mismatch
+- ligne-claire: style mismatch (too static)
@@ -0,0 +1,95 @@
+# dramatic
+
+戏剧基调 - High contrast, intense, powerful moments
+
+## Overview
+
+High-impact dramatic tone for pivotal moments, conflicts, and breakthroughs. Uses strong contrast and intense compositions to create emotional power.
+
+## Mood Characteristics
+
+- Tension and intensity
+- Pivotal moments
+- Conflict and resolution
+- Breakthrough discoveries
+- Emotional climaxes
+
+## Color Modifiers
+
+When applied to any art style:
+
+| Adjustment | Direction |
+|------------|-----------|
+| Saturation | High (vibrant or deep) |
+| Contrast | Maximum |
+| Temperature | Varies for effect |
+| Brightness | Strong highlights, deep shadows |
+
+## Contrast Approach
+
+- Sharp light/dark divisions
+- Minimal mid-tones
+- Stark compositions
+- Silhouette potential
+- Rim lighting effects
+
+## Accent Colors
+
+- Deep navy (#1A365D)
+- Crimson (#9B2C2C)
+- Stark white
+- Heavy blacks
+- Limited palette per scene
+
+## Lighting
+
+- Dramatic single-source
+- High contrast shadows
+- Rim lighting on characters
+- Spotlight effects
+- Chiaroscuro influence
+
+## Emotional Range
+
+| Emotion | Expression |
+|---------|-----------|
+| Anger | Intense, defined features |
+| Determination | Strong, focused gaze |
+| Shock | Wide eyes, stark lighting |
+| Triumph | Powerful, elevated pose |
+
+## Composition
+
+- Angular, dynamic layouts
+- Dramatic camera angles
+- Low/high viewpoints
+- Diagonal compositions
+- Negative space for impact
+
+## Visual Elements
+
+- Speed lines for tension
+- Impact effects
+- Dramatic backgrounds (storms, fire)
+- Silhouettes
+- Light burst effects
+- Environmental drama
+
+## Best For
+
+- Pivotal discoveries
+- Conflict scenes
+- Climactic moments
+- Breakthrough realizations
+- Emotional confrontations
+- Historical turning points
+
+## Combination Notes
+
+Works especially well with:
+- realistic: powerful drama
+- ink-brush: martial arts climax
+- ligne-claire: historical pivots
+- manga: shonen battles
+
+Avoid with: chalk (style mismatch)
@@ -0,0 +1,105 @@
+# energetic
+
+活力基调 - Bright, dynamic, exciting
+
+## Overview
+
+High-energy atmosphere for exciting, discovery-filled content. Bright colors, dynamic compositions, and movement create engaging visuals for younger audiences.
+
+## Mood Characteristics
+
+- Excitement and wonder
+- Discovery and learning
+- Energy and enthusiasm
+- Movement and action
+- Youthful spirit
+
+## Color Modifiers
+
+When applied to any art style:
+
+| Adjustment | Direction |
+|------------|-----------|
+| Saturation | High (vibrant) |
+| Contrast | Medium-high |
+| Temperature | Variable, punchy |
+| Brightness | Bright, clean |
+
+## Color Palette
+
+Shift toward vibrant tones:
+
+| Role | Color | Hex |
+|------|-------|-----|
+| Primary Red | Bright red | #F56565 |
+| Primary Yellow | Sunny yellow | #F6E05E |
+| Primary Blue | Sky blue | #63B3ED |
+| Accent 1 | Magenta | #D53F8C |
+| Accent 2 | Lime green | #68D391 |
+| Background | Clean white | #FFFFFF |
+| Background Alt | Bright pastels | Various |
+
+## Lighting
+
+- Bright, clear lighting
+- Clean shadows
+- High energy
+- Spotlight effects for emphasis
+- Dynamic light sources
+
+## Dynamic Elements
+
+**Energy effects** (add to compositions):
+
+| Element | Usage |
+|---------|-------|
+| Speed lines | Motion, excitement |
+| Sparkles | Discoveries |
+| Burst effects | Aha moments |
+| Motion blur | Fast action |
+| Star bursts | Emphasis |
+| Sweat drops | Effort/surprise |
+
+## Emotional Range
+
+| Emotion | Expression |
+|---------|-----------|
+| Excitement | Wide eyes, big smile |
+| Surprise | Dramatic reaction |
+| Determination | Intense focus |
+| Wonder | Sparkling eyes |
+
+## Composition
+
+- Dynamic angles
+- Action-oriented layouts
+- Movement emphasis
+- Clean, punchy designs
+- Energy flows
+
+## Visual Style
+
+- Expressive, animated characters
+- Wide eyes, big reactions
+- Dynamic poses
+- Motion and action focus
+- Simplified backgrounds for energy
+
+## Best For
+
+- Science explanations
+- "Aha" moments
+- Young audience content
+- Discovery narratives
+- Learning adventures
+- Action tutorials
+
+## Combination Notes
+
+Works especially well with:
+- manga: shonen energy
+- chalk: fun education
+
+Avoid with:
+- realistic: style mismatch
+- ink-brush: style mismatch
@@ -0,0 +1,63 @@
+# neutral
+
+中性基调 - Balanced, rational, educational
+
+## Overview
+
+Default balanced tone suitable for educational and informative content. Neither overly emotional nor cold - creates accessible, professional atmosphere.
+
+## Mood Characteristics
+
+- Balanced emotional register
+- Clear, rational presentation
+- Educational focus
+- Professional but approachable
+- Objective storytelling
+
+## Color Modifiers
+
+When applied to any art style:
+
+| Adjustment | Direction |
+|------------|-----------|
+| Saturation | Standard (no shift) |
+| Contrast | Balanced |
+| Temperature | Neutral |
+| Brightness | Slightly bright |
+
+## Lighting
+
+- Even, clear lighting
+- Minimal dramatic shadows
+- Consistent across panels
+- Natural light sources
+- No extreme contrast
+
+## Emotional Range
+
+| Emotion | Expression Level |
+|---------|-----------------|
+| Joy | Moderate smile |
+| Concern | Thoughtful expression |
+| Surprise | Mild widening of eyes |
+| Frustration | Slight frown |
+
+## Composition
+
+- Balanced panel layouts
+- Clear focal points
+- Readable hierarchies
+- Standard framing
+- Functional compositions
+
+## Best For
+
+- Educational content
+- Technical tutorials
+- Informative biographies
+- Documentary style
+- Professional topics
+
+## Usage Notes
+
+Neutral is the default tone. Combine with any art style for baseline professional output. Most versatile tone option.
@@ -0,0 +1,100 @@
+# romantic
+
+浪漫基调 - Soft, beautiful, emotionally delicate
+
+## Overview
+
+Soft, dreamy atmosphere for romantic and emotionally delicate content. Features decorative elements, sparkles, and beautiful compositions that emphasize feeling and beauty.
+
+## Mood Characteristics
+
+- Romance and love
+- Beauty and elegance
+- Emotional delicacy
+- Dreams and hopes
+- Youth and idealism
+
+## Color Modifiers
+
+When applied to any art style:
+
+| Adjustment | Direction |
+|------------|-----------|
+| Saturation | Soft pastels |
+| Contrast | Low, gentle |
+| Temperature | Slightly warm pink |
+| Brightness | Soft, glowing |
+
+## Color Palette
+
+Shift toward romantic tones:
+
+| Role | Color | Hex |
+|------|-------|-----|
+| Primary | Soft pink | #FFB6C1 |
+| Secondary | Lavender | #E6E6FA |
+| Accent | Rose | #FF69B4 |
+| Highlight | Pearl white | #FFFAF0 |
+| Gold | Gold sparkle | #FFD700 |
+| Skin | Porcelain | #FFF5EE |
+| Blush | Soft blush | #FFE4E1 |
+| Background | Soft cream | #FFF8DC |
+
+## Lighting
+
+- Soft, diffused light
+- Glowing effects
+- Backlighting halos
+- Sparkle highlights
+- Dreamy atmospheres
+
+## Decorative Elements
+
+**Essential decorations** (add to compositions):
+
+| Element | Usage |
+|---------|-------|
+| Flower petals | Floating, framing |
+| Sparkles | Emotional highlights |
+| Bubbles | Dreamy moments |
+| Feathers | Gentle floating |
+| Stars | Night scenes, wonder |
+| Hearts | Love emphasis |
+| Light halos | Character highlights |
+
+## Emotional Range
+
+| Emotion | Expression |
+|---------|-----------|
+| Love | Soft gaze, blush |
+| Longing | Distant, beautiful sadness |
+| Joy | Radiant smile, sparkles |
+| Shyness | Downcast eyes, blush |
+
+## Composition
+
+- Elegant, flowing layouts
+- Soft focus backgrounds
+- Characters framed by decorations
+- Beautiful angles (3/4 profiles)
+- Screen tone gradients
+
+## Best For
+
+- Romance stories
+- Coming-of-age
+- Friendship narratives
+- Emotional drama
+- School life
+- Beautiful moments
+
+## Combination Notes
+
+Works especially well with:
+- manga: classic shoujo style
+
+Avoid with:
+- realistic: style mismatch
+- ink-brush: style mismatch
+- ligne-claire: style mismatch
+- chalk: style mismatch
@@ -0,0 +1,104 @@
+# vintage
+
+复古基调 - Historical, aged, period authenticity
+
+## Overview
+
+Historical atmosphere with aged paper effects and period-appropriate aesthetics. Creates sense of time, authenticity, and historical distance.
+
+## Mood Characteristics
+
+- Historical authenticity
+- Period distance
+- Archival quality
+- Time and memory
+- Classical elegance
+
+## Color Modifiers
+
+When applied to any art style:
+
+| Adjustment | Direction |
+|------------|-----------|
+| Saturation | Reduced, muted |
+| Contrast | Medium, aged |
+| Temperature | Sepia shift |
+| Brightness | Slightly faded |
+
+## Color Palette
+
+Shift toward aged tones:
+
+| Role | Color | Hex |
+|------|-------|-----|
+| Primary | Sepia brown | #8B7355 |
+| Background | Aged paper | #F5E6D3 |
+| Accent 1 | Faded teal | #6B8E8E |
+| Accent 2 | Muted burgundy | #7B3F3F |
+| Ink | Aged black | #3D3D3D |
+| Yellowed | Paper yellow | #F5DEB3 |
+
+## Visual Effects
+
+**Aging effects** (apply subtly):
+
+| Effect | Application |
+|--------|-------------|
+| Paper aging | Background texture |
+| Faded edges | Vignette effect |
+| Dust specks | Subtle overlay |
+| Yellowing | Color shift |
+| Wear marks | Corner/edge details |
+
+## Period Elements
+
+- Historical typography
+- Period-accurate details
+- Archival presentation
+- Classical compositions
+- Formal framing
+
+## Lighting
+
+- Natural, period-appropriate
+- Oil lamp/candle warmth
+- Soft, diffused light
+- Indoor historical lighting
+- Photographic quality
+
+## Emotional Range
+
+| Emotion | Expression |
+|---------|-----------|
+| Dignity | Formal, composed |
+| Sorrow | Restrained, elegant |
+| Pride | Classical posture |
+| Wisdom | Aged grace |
+
+## Composition
+
+- Classical framing
+- Formal compositions
+- Period-appropriate staging
+- Documentary style
+- Historical accuracy priority
+
+## Best For
+
+- Pre-1950s stories
+- Classical science history
+- Historical biographies
+- Period pieces
+- Documentary comics
+- Archival narratives
+
+## Combination Notes
+
+Works especially well with:
+- realistic: period drama
+- ligne-claire: historical adventure
+- ink-brush: classical Asian stories
+
+Avoid with:
+- manga: style mismatch (too modern)
+- chalk: style mismatch (modern educational)
@@ -0,0 +1,94 @@
+# warm
+
+温馨基调 - Nostalgic, personal, comforting
+
+## Overview
+
+Warm, inviting atmosphere for personal stories and nostalgic content. Creates emotional connection through cozy aesthetics and comforting visuals.
+
+## Mood Characteristics
+
+- Nostalgic feeling
+- Personal, intimate atmosphere
+- Comforting and healing
+- Memory and reflection
+- Gentle emotional warmth
+
+## Color Modifiers
+
+When applied to any art style:
+
+| Adjustment | Direction |
+|------------|-----------|
+| Saturation | Slightly reduced |
+| Contrast | Softer |
+| Temperature | Warm shift (+15%) |
+| Brightness | Soft, golden |
+
+## Color Temperature
+
+Shift palette toward warm tones:
+
+| Original | Warm Shift |
+|----------|-----------|
+| Cool blue | Soft teal |
+| Pure white | Cream |
+| Gray | Warm gray |
+| Black | Soft charcoal |
+
+## Accent Colors
+
+- Golden yellow (#D69E2E)
+- Soft orange (#DD6B20)
+- Warm brown (#8B6F47)
+- Sunset tones
+
+## Lighting
+
+- Golden hour lighting
+- Soft, diffused light
+- Warm indoor glow
+- Candle/lamp warmth
+- Gentle shadows
+
+## Emotional Range
+
+| Emotion | Expression |
+|---------|-----------|
+| Joy | Genuine warm smile |
+| Sadness | Gentle melancholy |
+| Love | Soft, tender expressions |
+| Memory | Distant, reflective gaze |
+
+## Composition
+
+- Intimate framing
+- Cozy environments
+- Soft focus backgrounds
+- Welcoming spaces
+- Personal moments highlighted
+
+## Visual Elements
+
+- Warm light rays
+- Soft edges
+- Nostalgic props (old photos, keepsakes)
+- Comfort objects (blankets, tea cups)
+- Nature elements (autumn leaves, sunset)
+
+## Best For
+
+- Personal stories
+- Childhood memories
+- Mentorship narratives
+- Family histories
+- Gentle biographies
+- Healing journeys
+
+## Combination Notes
+
+Works especially well with:
+- ligne-claire: nostalgic European comics
+- realistic: touching human stories
+- manga: slice-of-life warmth
+- chalk: nostalgic education
@@ -0,0 +1,505 @@
+# Complete Workflow
+
+Full workflow for generating knowledge comics.
+
+## Progress Checklist
+
+Copy and track progress:
+
+```
+Comic Progress:
+- [ ] Step 1: Setup & Analyze
+  - [ ] 1.1 Load preferences
+  - [ ] 1.2 Analyze content
+  - [ ] 1.3 Check existing ⚠️ REQUIRED
+- [ ] Step 2: Confirmation 1 - Style & options ⚠️ REQUIRED
+- [ ] Step 3: Generate storyboard + characters
+- [ ] Step 4: Review outline (conditional)
+- [ ] Step 5: Generate prompts
+- [ ] Step 6: Review prompts (conditional)
+- [ ] Step 7: Generate images
+- [ ] Step 8: Merge to PDF
+- [ ] Step 9: Completion report
+```
+
+## Flow Diagram
+
+```
+Input → Preferences → Analyze → [Check Existing?] → [Confirm 1: Style + Reviews] → Storyboard → [Review Outline?] → Prompts → [Review Prompts?] → Images → PDF → Complete
+```
+
+---
+
+## Step 1: Setup & Analyze
+
+### 1.1 Load Preferences (EXTEND.md)
+
+Use Bash to check EXTEND.md existence (priority order):
+
+```bash
+# Check project-level first
+test -f .baoyu-skills/baoyu-comic/EXTEND.md && echo "project"
+
+# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
+test -f "$HOME/.baoyu-skills/baoyu-comic/EXTEND.md" && echo "user"
+```
+
+| Path | Location |
+|------|----------|
+| `.baoyu-skills/baoyu-comic/EXTEND.md` | Project directory |
+| `$HOME/.baoyu-skills/baoyu-comic/EXTEND.md` | User home |
+
+**When EXTEND.md Found** → Read, parse, **output summary to user**:
+
+```
+📋 Loaded preferences from [full path]
+├─ Watermark: [enabled/disabled] [content if enabled]
+├─ Art Style: [style name or "auto-select"]
+├─ Tone: [tone name or "auto-select"]
+├─ Layout: [layout or "auto-select"]
+├─ Language: [language or "auto-detect"]
+└─ Character presets: [count] defined
+```
+
+**MUST output this summary** so user knows their current configuration. Do not skip or silently load.
+
+**When EXTEND.md Not Found** → First-time setup:
+
+1. Inform user: "No preferences found. Let's set up your defaults."
+2. Use AskUserQuestion to collect preferences (see `config/first-time-setup.md`)
+3. Create EXTEND.md at user-chosen location
+4. Confirm: "✓ Preferences saved to [path]"
+
+**EXTEND.md Supports**: Watermark | Preferred art/tone/layout | Custom style definitions | Character presets | Language preference
+
+Schema: `config/preferences-schema.md`
+
+**Important**: Once EXTEND.md exists, watermark, language, and style defaults are NOT asked again in Confirmation 1 or 2. These are session-persistent settings.
+
+### 1.2 Analyze Content → `analysis.md`
+
+Read source content, save it if needed, and perform deep 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. Read source content
+3. **Deep analysis** following `analysis-framework.md`:
+   - Target audience identification
+   - Value proposition for readers
+   - Core themes and narrative potential
+   - Key figures and their story arcs
+4. Detect source language
+5. **Determine language**:
+   - If EXTEND.md has `language` → use it
+   - Else if `--lang` option provided → use it
+   - Else → use detected source language
+6. Determine recommended page count:
+   - Short story: 5-8 pages
+   - Medium complexity: 9-15 pages
+   - Full biography: 16-25 pages
+7. Analyze content signals for art/tone/layout recommendations
+8. **Save to `analysis.md`**
+
+**analysis.md Format**: YAML front matter (title, topic, time_span, source_language, user_language, aspect_ratio, recommended_page_count, recommended_art, recommended_tone) + sections for Target Audience, Value Proposition, Core Themes, Key Figures & Story Arcs, Content Signals, Recommended Approaches. See `analysis-framework.md` for full template.
+
+### 1.3 Check Existing Content ⚠️ REQUIRED
+
+**MUST execute before proceeding to Step 2.**
+
+Use Bash to check if output directory exists:
+
+```bash
+test -d "comic/{topic-slug}" && echo "exists"
+```
+
+**If directory exists**, use AskUserQuestion:
+
+```
+header: "Existing"
+question: "Existing content found. How to proceed?"
+options:
+  - label: "Regenerate storyboard"
+    description: "Keep images, regenerate storyboard and characters only"
+  - label: "Regenerate images"
+    description: "Keep storyboard, regenerate images only"
+  - label: "Backup and regenerate"
+    description: "Backup to {slug}-backup-{timestamp}, then regenerate all"
+  - label: "Exit"
+    description: "Cancel, keep existing content unchanged"
+```
+
+Save result and handle accordingly:
+- **Regenerate storyboard**: Skip to Step 3, preserve `prompts/` and images
+- **Regenerate images**: Skip to Step 7, use existing prompts
+- **Backup and regenerate**: Move directory, start fresh from Step 2
+- **Exit**: End workflow immediately
+
+---
+
+## Step 2: Confirmation 1 - Style & Options ⚠️
+
+**Purpose**: Select visual style + decide whether to review outline before generation. **Do NOT skip.**
+
+**Note**: Watermark and language already configured in EXTEND.md (Step 1).
+
+**Display summary**:
+- Content type + topic identified
+- Key figures extracted
+- Time span detected
+- Recommended page count
+- Language: [from EXTEND.md or detected]
+- **Recommended style**: [art] + [tone] (based on content signals)
+
+**Use AskUserQuestion** for:
+
+### Question 1: Visual Style
+
+If a preset is recommended (see `auto-selection.md`), show it first:
+
+```
+header: "Style"
+question: "Which visual style for this comic?"
+options:
+  - label: "[preset name] preset (Recommended)"       # If preset recommended
+    description: "[preset description] - includes special rules"
+  - label: "[recommended art] + [recommended tone] (Recommended)"  # If no preset
+    description: "Best match for your content based on analysis"
+  - label: "ligne-claire + neutral"
+    description: "Classic educational, Logicomix style"
+  - label: "ohmsha preset"
+    description: "Educational manga with visual metaphors, gadgets, NO talking heads"
+  - label: "Custom"
+    description: "Specify your own art + tone or preset"
+```
+
+**Preset vs Art+Tone**: Presets include special rules beyond art+tone. `ohmsha` = manga + neutral + visual metaphor rules + character roles + NO talking heads. Plain `manga + neutral` does NOT include these rules.
+
+### Question 2: Narrative Focus (multiSelect: true)
+
+```
+header: "Focus"
+question: "What should the comic emphasize? (Select all that apply)"
+options:
+  - label: "Biography/life story"
+    description: "Follow a person's journey through key life events"
+  - label: "Concept explanation"
+    description: "Break down complex ideas visually"
+  - label: "Historical event"
+    description: "Dramatize important historical moments"
+  - label: "Tutorial/how-to"
+    description: "Step-by-step educational guide"
+```
+
+### Question 3: Target Audience
+
+```
+header: "Audience"
+question: "Who is the primary reader?"
+options:
+  - label: "General readers"
+    description: "Broad appeal, accessible content"
+  - label: "Students/learners"
+    description: "Educational focus, clear explanations"
+  - label: "Industry professionals"
+    description: "Technical depth, domain knowledge"
+  - label: "Children/young readers"
+    description: "Simplified language, engaging visuals"
+```
+
+### Question 4: Outline Review
+
+```
+header: "Review"
+question: "Do you want to review the outline before image generation?"
+options:
+  - label: "Yes, let me review (Recommended)"
+    description: "Review storyboard and characters before generating images"
+  - label: "No, generate directly"
+    description: "Skip outline review, start generating immediately"
+```
+
+### Question 5: Prompt Review
+
+```
+header: "Prompts"
+question: "Review prompts before generating images?"
+options:
+  - label: "Yes, review prompts (Recommended)"
+    description: "Review image generation prompts before generating"
+  - label: "No, skip prompt review"
+    description: "Proceed directly to image generation"
+```
+
+**After response**:
+1. Update `analysis.md` with user preferences
+2. **Store `skip_outline_review`** flag based on Question 4 response
+3. **Store `skip_prompt_review`** flag based on Question 5 response
+4. → Step 3
+
+---
+
+## Step 3: Generate Storyboard + Characters
+
+Create storyboard and character definitions using the confirmed style from Step 2.
+
+**Loading Style References**:
+- Art style: `art-styles/{art}.md`
+- Tone: `tones/{tone}.md`
+- If preset (ohmsha/wuxia/shoujo): also load `presets/{preset}.md`
+
+**Generate**:
+
+1. **Storyboard** (`storyboard.md`):
+   - YAML front matter with art_style, tone, layout, aspect_ratio
+   - Cover design
+   - Each page: layout, panel breakdown, visual prompts
+   - **Written in user's preferred language** (from Step 1)
+   - Reference: `storyboard-template.md`
+   - **If using preset**: Load and apply preset rules from `presets/`
+
+2. **Character definitions** (`characters/characters.md`):
+   - Visual specs matching the art style (in user's preferred language)
+   - Include Reference Sheet Prompt for later image generation
+   - Reference: `character-template.md`
+   - **If using ohmsha preset**: Use default Doraemon characters (see below)
+
+**Ohmsha Default Characters** (use these unless user specifies `--characters`):
+
+| Role | Character | Visual Description |
+|------|-----------|-------------------|
+| Student | 大雄 (Nobita) | Japanese boy, 10yo, round glasses, black hair parted in middle, yellow shirt, navy shorts |
+| Mentor | 哆啦A梦 (Doraemon) | Round blue robot cat, big white eyes, red nose, whiskers, white belly with 4D pocket, golden bell, no ears |
+| Challenge | 胖虎 (Gian) | Stocky boy, rough features, small eyes, orange shirt |
+| Support | 静香 (Shizuka) | Cute girl, black short hair, pink dress, gentle expression |
+
+These are the canonical ohmsha-style characters. Do NOT create custom characters for ohmsha unless explicitly requested.
+
+**After generation**:
+- If `skip_outline_review` is true → Skip Step 4, go directly to Step 5
+- If `skip_outline_review` is false → Continue to Step 4
+
+---
+
+## Step 4: Review Outline (Conditional)
+
+**Skip this step** if user selected "No, generate directly" in Step 2.
+
+**Purpose**: User reviews and confirms storyboard + characters before generation.
+
+**Display**:
+- Page count and structure
+- Art style + Tone combination
+- Page-by-page summary (Cover → P1 → P2...)
+- Character list with brief descriptions
+
+**Use AskUserQuestion**:
+
+```
+header: "Confirm"
+question: "Ready to generate images with this outline?"
+options:
+  - label: "Yes, proceed (Recommended)"
+    description: "Generate character sheet and comic pages"
+  - label: "Edit storyboard first"
+    description: "I'll modify storyboard.md before continuing"
+  - label: "Edit characters first"
+    description: "I'll modify characters/characters.md before continuing"
+  - label: "Edit both"
+    description: "I'll modify both files before continuing"
+```
+
+**After response**:
+1. If user wants to edit → Wait for user to finish editing, then ask again
+2. If user confirms → Continue to Step 5
+
+---
+
+## Step 5: Generate Prompts
+
+Create image generation prompts for all pages.
+
+**Style Reference Loading**:
+- Read `art-styles/{art}.md` for rendering guidelines
+- Read `tones/{tone}.md` for mood/color adjustments
+- If preset: Read `presets/{preset}.md` for special rules
+
+**For each page (cover + pages)**:
+1. Create prompt following art style + tone guidelines
+2. Include character visual descriptions for consistency
+3. Save to `prompts/NN-{cover|page}-[slug].md`
+
+**Prompt File Format**:
+```markdown
+# Page NN: [Title]
+
+## Visual Style
+Art: [art style] | Tone: [tone] | Layout: [layout type]
+
+## Character Reference
+[Character descriptions from characters/characters.md]
+
+## Panel Breakdown
+[From storyboard.md - panel descriptions, actions, dialogue]
+
+## Generation Prompt
+[Combined prompt for image generation skill]
+```
+
+**Watermark Application** (if enabled in preferences):
+Add to each prompt:
+```
+Include a subtle watermark "[content]" positioned at [position]
+with approximately [opacity*100]% visibility. The watermark should
+be legible but not distracting from the comic panels and storytelling.
+Ensure watermark does not overlap speech bubbles or key action.
+```
+Reference: `config/watermark-guide.md`
+
+**After generation**:
+- If `skip_prompt_review` is true → Skip Step 6, go directly to Step 7
+- If `skip_prompt_review` is false → Continue to Step 6
+
+---
+
+## Step 6: Review Prompts (Conditional)
+
+**Skip this step** if user selected "No, skip prompt review" in Step 2.
+
+**Purpose**: User reviews and confirms prompts before image generation.
+
+**Display prompt summary table**:
+
+| Page | Title | Key Elements |
+|------|-------|--------------|
+| Cover | [title] | [main visual] |
+| P1 | [title] | [key elements] |
+| ... | ... | ... |
+
+**Use AskUserQuestion**:
+
+```
+header: "Confirm"
+question: "Ready to generate images with these prompts?"
+options:
+  - label: "Yes, proceed (Recommended)"
+    description: "Generate all comic page images"
+  - label: "Edit prompts first"
+    description: "I'll modify prompts/*.md before continuing"
+  - label: "Regenerate prompts"
+    description: "Regenerate all prompts with different approach"
+```
+
+**After response**:
+1. If user wants to edit → Wait for user to finish editing, then ask again
+2. If user wants to regenerate → Go back to Step 5
+3. If user confirms → Continue to Step 7
+
+---
+
+## Step 7: Generate Images
+
+With confirmed prompts from Step 5/6:
+
+### 7.1 Generate Character Reference Sheet (first)
+
+1. Use Reference Sheet Prompt from `characters/characters.md`
+2. Generate → `characters/characters.png`
+3. This ensures visual consistency for all subsequent pages
+
+### 7.2 Generate Comic Pages
+
+**CRITICAL: Character Reference is MANDATORY** for visual consistency across all pages.
+
+**Before generating any page**:
+1. Read the image generation skill's SKILL.md
+2. Check if it supports reference image input (`--ref`, `--reference`, etc.)
+3. Choose the appropriate strategy below
+
+**Character Reference Strategy**:
+
+| Skill Capability | Strategy | Action |
+|------------------|----------|--------|
+| Supports `--ref` | **Strategy A** | Pass `characters/characters.png` with EVERY page |
+| Does NOT support `--ref` | **Strategy B** | Prepend character descriptions to EVERY prompt |
+
+**Strategy A: Using `--ref` parameter** (e.g., baoyu-image-gen)
+
+```bash
+# Each page generation MUST include --ref
+npx -y bun ${SKILL_DIR}/../baoyu-image-gen/scripts/main.ts \
+  --promptfiles prompts/01-page-xxx.md \
+  --image 01-page-xxx.png \
+  --ar 3:4 \
+  --ref characters/characters.png
+```
+
+**Strategy B: Embedding character descriptions in prompt**
+
+When skill does NOT support reference images, create combined prompt files:
+
+```markdown
+# prompts/01-page-xxx.md (with embedded character reference)
+
+## Character Reference (maintain consistency)
+[Copy relevant sections from characters/characters.md here]
+- 大雄: Japanese boy, round glasses, yellow shirt, navy shorts...
+- 哆啦A梦: Round blue robot cat, white belly, red nose, golden bell...
+
+## Page Content
+[Original page prompt here]
+```
+
+**For each page (cover + pages)**:
+1. Read prompt from `prompts/NN-{cover|page}-[slug].md`
+2. Generate image using Strategy A or B (based on skill capability)
+3. Save to `NN-{cover|page}-[slug].png`
+4. Report progress after each generation: "Generated X/N: [page title]"
+
+**Session Management**:
+If image generation skill supports `--sessionId`:
+1. Generate unique session ID: `comic-{topic-slug}-{timestamp}`
+2. Use same session ID for all pages
+3. Ensures visual consistency across generated images
+
+---
+
+## Step 8: Merge to PDF
+
+After all images generated:
+
+```bash
+npx -y bun ${SKILL_DIR}/scripts/merge-to-pdf.ts <comic-dir>
+```
+
+Creates `{topic-slug}.pdf` with all pages as full-page images.
+
+---
+
+## Step 9: Completion Report
+
+```
+Comic Complete!
+Title: [title] | Art: [art] | Tone: [tone] | Pages: [count] | Aspect: [ratio] | Language: [lang]
+Watermark: [enabled/disabled]
+Location: [path]
+✓ analysis.md
+✓ characters.png
+✓ 00-cover-[slug].png ... NN-page-[slug].png
+✓ {topic-slug}.pdf
+```
+
+---
+
+## Page Modification
+
+| Action | Steps |
+|--------|-------|
+| **Edit** | Update prompt → Regenerate image → Regenerate PDF |
+| **Add** | Create prompt at position → Generate image → Renumber subsequent (NN+1) → Update storyboard → Regenerate PDF |
+| **Delete** | Remove files → Renumber subsequent (NN-1) → Update storyboard → Regenerate PDF |
+
+**File naming**: `NN-{cover|page}-[slug].png` (e.g., `03-page-enigma-machine.png`)
+- Slugs: kebab-case, unique, derived from content
+- Renumbering: Update NN prefix only, slugs unchanged
@@ -1,188 +1,89 @@
 ---
 name: baoyu-compress-image
-description: Cross-platform image compression skill. Converts images to WebP by default with PNG-to-PNG support. Uses system tools (sips, cwebp, ImageMagick) with Sharp fallback.
+description: Compresses images to WebP (default) or PNG with automatic tool selection. Use when user asks to "compress image", "optimize image", "convert to webp", or reduce image file size.
 ---

 # Image Compressor

-Cross-platform image compression with WebP default output, PNG-to-PNG support, preferring system tools with Sharp fallback.
+Compresses images using best available tool (sips → cwebp → ImageMagick → Sharp).

 ## Script Directory

-**Important**: All scripts are located in the `scripts/` subdirectory of this skill.
+Scripts in `scripts/` subdirectory. Replace `${SKILL_DIR}` with this SKILL.md's directory path.

-**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 compression |
+| `scripts/main.ts` | Image compression CLI |

-## Quick Start
+## Preferences (EXTEND.md)
+
+Use Bash to check EXTEND.md existence (priority order):

 ```bash
-# Compress to WebP (default)
-npx -y bun ${SKILL_DIR}/scripts/main.ts image.png
+# Check project-level first
+test -f .baoyu-skills/baoyu-compress-image/EXTEND.md && echo "project"

-# Keep original format (PNG → PNG)
-npx -y bun ${SKILL_DIR}/scripts/main.ts image.png --format png
-
-# Custom quality
-npx -y bun ${SKILL_DIR}/scripts/main.ts image.png -q 75
-
-# Process directory
-npx -y bun ${SKILL_DIR}/scripts/main.ts ./images/ -r
+# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
+test -f "$HOME/.baoyu-skills/baoyu-compress-image/EXTEND.md" && echo "user"
 ```

-## Commands
+┌────────────────────────────────────────────────────────┬───────────────────┐
+│                          Path                          │     Location      │
+├────────────────────────────────────────────────────────┼───────────────────┤
+│ .baoyu-skills/baoyu-compress-image/EXTEND.md           │ Project directory │
+├────────────────────────────────────────────────────────┼───────────────────┤
+│ $HOME/.baoyu-skills/baoyu-compress-image/EXTEND.md     │ User home         │
+└────────────────────────────────────────────────────────┴───────────────────┘

-### Single File Compression
+┌───────────┬───────────────────────────────────────────────────────────────────────────┐
+│  Result   │                                  Action                                   │
+├───────────┼───────────────────────────────────────────────────────────────────────────┤
+│ Found     │ Read, parse, apply settings                                               │
+├───────────┼───────────────────────────────────────────────────────────────────────────┤
+│ Not found │ Use defaults                                                              │
+└───────────┴───────────────────────────────────────────────────────────────────────────┘
+
+**EXTEND.md Supports**: Default format | Default quality | Keep original preference
+
+## Usage

 ```bash
-# Basic (converts to WebP, replaces original)
-npx -y bun ${SKILL_DIR}/scripts/main.ts image.png
-
-# Custom output path
-npx -y bun ${SKILL_DIR}/scripts/main.ts image.png -o compressed.webp
-
-# Keep original file
-npx -y bun ${SKILL_DIR}/scripts/main.ts image.png --keep
-
-# Custom quality (0-100, default: 80)
-npx -y bun ${SKILL_DIR}/scripts/main.ts image.png -q 75
-
-# Keep original format
-npx -y bun ${SKILL_DIR}/scripts/main.ts image.png -f png
-```
-
-### Directory Processing
-
-```bash
-# Process all images in directory
-npx -y bun ${SKILL_DIR}/scripts/main.ts ./images/
-
-# Recursive processing
-npx -y bun ${SKILL_DIR}/scripts/main.ts ./images/ -r
-
-# With custom quality
-npx -y bun ${SKILL_DIR}/scripts/main.ts ./images/ -r -q 75
-```
-
-### Output Formats
-
-```bash
-# Plain text (default)
-npx -y bun ${SKILL_DIR}/scripts/main.ts image.png
-
-# JSON output
-npx -y bun ${SKILL_DIR}/scripts/main.ts image.png --json
+npx -y bun ${SKILL_DIR}/scripts/main.ts <input> [options]
 ```

 ## Options

 | Option | Short | Description | Default |
 |--------|-------|-------------|---------|
-| `<input>` | | Input file or directory | Required |
-| `--output <path>` | `-o` | Output path | Same path, new extension |
-| `--format <fmt>` | `-f` | webp, png, jpeg | webp |
-| `--quality <n>` | `-q` | Quality 0-100 | 80 |
-| `--keep` | `-k` | Keep original file | false |
-| `--recursive` | `-r` | Process directories recursively | false |
+| `<input>` | | File or directory | Required |
+| `--output` | `-o` | Output path | Same path, new ext |
+| `--format` | `-f` | webp, png, jpeg | webp |
+| `--quality` | `-q` | Quality 0-100 | 80 |
+| `--keep` | `-k` | Keep original | false |
+| `--recursive` | `-r` | Process subdirs | false |
 | `--json` | | JSON output | false |
-| `--help` | `-h` | Show help | |

-## Compressor Selection
+## Examples

-Priority order (auto-detected):
+```bash
+# Single file → WebP (replaces original)
+npx -y bun ${SKILL_DIR}/scripts/main.ts image.png

-1. **sips** (macOS built-in, WebP support since macOS 11)
-2. **cwebp** (Google's official WebP tool)
-3. **ImageMagick** (`convert` command)
-4. **Sharp** (npm package, auto-installed by Bun)
+# Keep PNG format
+npx -y bun ${SKILL_DIR}/scripts/main.ts image.png -f png --keep

-The skill automatically selects the best available compressor.
+# Directory recursive
+npx -y bun ${SKILL_DIR}/scripts/main.ts ./images/ -r -q 75

-## Output Format
-
-### Text Mode (default)
+# JSON output
+npx -y bun ${SKILL_DIR}/scripts/main.ts image.png --json
+```

+**Output**:
 ```
 image.png → image.webp (245KB → 89KB, 64% reduction)
 ```

-### JSON Mode
-
-```json
-{
-  "input": "image.png",
-  "output": "image.webp",
-  "inputSize": 250880,
-  "outputSize": 91136,
-  "ratio": 0.36,
-  "compressor": "sips"
-}
-```
-
-### Directory JSON Mode
-
-```json
-{
-  "files": [...],
-  "summary": {
-    "totalFiles": 10,
-    "totalInputSize": 2508800,
-    "totalOutputSize": 911360,
-    "ratio": 0.36,
-    "compressor": "sips"
-  }
-}
-```
-
-## Examples
-
-### Compress single image
-
-```bash
-npx -y bun ${SKILL_DIR}/scripts/main.ts photo.png
-# photo.png → photo.webp (1.2MB → 340KB, 72% reduction)
-```
-
-### Compress with custom quality
-
-```bash
-npx -y bun ${SKILL_DIR}/scripts/main.ts photo.png -q 60
-# photo.png → photo.webp (1.2MB → 280KB, 77% reduction)
-```
-
-### Keep original format
-
-```bash
-npx -y bun ${SKILL_DIR}/scripts/main.ts screenshot.png -f png --keep
-# screenshot.png → screenshot-compressed.png (500KB → 380KB, 24% reduction)
-```
-
-### Process entire directory
-
-```bash
-npx -y bun ${SKILL_DIR}/scripts/main.ts ./screenshots/ -r
-# Processed 15 files: 12.5MB → 4.2MB (66% reduction)
-```
-
-### Get JSON for scripting
-
-```bash
-npx -y bun ${SKILL_DIR}/scripts/main.ts image.png --json | jq '.ratio'
-```
-
 ## Extension Support

-Custom configurations via EXTEND.md.
-
-**Check paths** (priority order):
-1. `.baoyu-skills/baoyu-compress-image/EXTEND.md` (project)
-2. `~/.baoyu-skills/baoyu-compress-image/EXTEND.md` (user)
-
-If found, load before workflow. Extension content overrides defaults.
+Custom configurations via EXTEND.md. See **Preferences** section for paths and supported options.
@@ -1,35 +1,34 @@
 ---
 name: baoyu-cover-image
-description: Generate elegant cover images for articles. Analyzes content and creates eye-catching hand-drawn style cover images with multiple style options. Use when user asks to "generate cover image", "create article cover", or "make a cover for article".
+description: Generates article cover images with 4 dimensions (type, style, text, mood) and 20 hand-drawn styles. Supports cinematic (2.35:1), widescreen (16:9), and square (1:1) aspects. Use when user asks to "generate cover image", "create article cover", "make cover", or mentions "封面图".
 ---

 # Cover Image Generator

-Generate hand-drawn style cover images for articles with multiple style options.
+Generate elegant cover images for articles with 4-dimensional customization.

 ## Usage

 ```bash
-# From markdown file (auto-select style based on content)
+# Auto-select all dimensions based on content
 /baoyu-cover-image path/to/article.md

-# Specify a style
-/baoyu-cover-image path/to/article.md --style blueprint
-/baoyu-cover-image path/to/article.md --style warm
-/baoyu-cover-image path/to/article.md --style dark-atmospheric
+# Quick mode: skip confirmation, use auto-selection
+/baoyu-cover-image article.md --quick

-# Without title text
-/baoyu-cover-image path/to/article.md --no-title
+# Specify dimensions
+/baoyu-cover-image article.md --type conceptual --style blueprint
+/baoyu-cover-image article.md --text title-subtitle --mood bold

-# Combine options
-/baoyu-cover-image path/to/article.md --style minimal --no-title
+# Visual only (no title text)
+/baoyu-cover-image article.md --no-title

-# From direct text input
+# Direct content input
 /baoyu-cover-image
-[paste content or describe the topic]
+[paste content]

-# Direct input with style
-/baoyu-cover-image --style playful
+# Direct input with options
+/baoyu-cover-image --style notion --aspect 1:1 --quick
 [paste content]
 ```

@@ -37,249 +36,667 @@ Generate hand-drawn style cover images for articles with multiple style options.

 | Option | Description |
 |--------|-------------|
-| `--style <name>` | Specify cover style (see Style Gallery below) |
-| `--aspect <ratio>` | Aspect ratio: 2.35:1 (cinematic, default), 16:9 (widescreen), 1:1 (social) |
-| `--lang <code>` | Output language for title text (en, zh, ja, etc.) |
-| `--no-title` | Generate cover without title text (visual only) |
+| `--type <name>` | Cover type: hero, conceptual, typography, metaphor, scene, minimal |
+| `--style <name>` | Cover style (see Style Gallery) |
+| `--text <level>` | Text density: none, title-only, title-subtitle, text-rich |
+| `--mood <level>` | Emotional intensity: subtle, balanced, bold |
+| `--aspect <ratio>` | 16:9 (default), 2.35:1, 4:3, 3:2, 1:1, 3:4 |
+| `--lang <code>` | Title language (en, zh, ja, etc.) |
+| `--no-title` | Alias for `--text none` |
+| `--quick` | Skip confirmation, use auto-selection for missing dimensions |
+
+## Four Dimensions
+
+| Dimension | Controls | Values | Default |
+|-----------|----------|--------|---------|
+| **Type** | Visual composition, information structure | hero, conceptual, typography, metaphor, scene, minimal | auto |
+| **Style** | Visual aesthetics, colors, technique | 20 built-in styles | auto |
+| **Text** | Text density, information hierarchy | none, title-only, title-subtitle, text-rich | title-only |
+| **Mood** | Emotional intensity, visual weight | subtle, balanced, bold | balanced |
+
+Dimensions can be freely combined. Example: `--type conceptual --style blueprint --text title-only --mood subtle` creates a calm technical concept visualization.
+
+## Type Gallery
+
+| Type | Description | Best For |
+|------|-------------|----------|
+| `hero` | Large visual impact, title overlay | Product launch, brand promotion, major announcements |
+| `conceptual` | Concept visualization, abstract core ideas | Technical articles, methodology, architecture design |
+| `typography` | Text-focused layout, prominent title | Opinion pieces, quotes, insights |
+| `metaphor` | Visual metaphor, concrete expressing abstract | Philosophy, growth, personal development |
+| `scene` | Atmospheric scene, narrative feel | Stories, travel, lifestyle |
+| `minimal` | Minimalist composition, generous whitespace | Zen, focus, core concepts |
+
+## Auto Type Selection
+
+When `--type` is omitted, select based on content signals:
+
+| Signals | Type |
+|---------|------|
+| Product, launch, announcement, release, reveal | `hero` |
+| Architecture, framework, system, API, technical, model | `conceptual` |
+| Quote, opinion, insight, thought, headline, statement | `typography` |
+| Philosophy, growth, abstract, meaning, reflection | `metaphor` |
+| Story, journey, travel, lifestyle, experience, narrative | `scene` |
+| Zen, focus, essential, core, simple, pure | `minimal` |

 ## Style Gallery

 | Style | Description |
 |-------|-------------|
-| `elegant` (Default) | Refined, sophisticated, understated |
-| `flat-doodle` | Bold outlines, pastel colors, cute rounded shapes |
-| `blueprint` | Technical schematics, engineering precision |
-| `bold-editorial` | Magazine cover impact, dramatic typography |
-| `chalkboard` | Black chalkboard, colorful chalk drawings |
-| `dark-atmospheric` | Cinematic dark mode, glowing accents |
-| `editorial-infographic` | Magazine explainer, visual storytelling |
-| `fantasy-animation` | Ghibli/Disney inspired, whimsical charm |
-| `intuition-machine` | Technical briefing, bilingual labels |
-| `minimal` | Ultra-clean, zen-like, focused |
-| `nature` | Organic, calm, earthy |
-| `notion` | Clean SaaS dashboard, productivity styling |
-| `pixel-art` | Retro 8-bit, nostalgic gaming aesthetic |
-| `playful` | Fun, creative, whimsical |
-| `retro` | Halftone dots, vintage badges, classic |
-| `sketch-notes` | Hand-drawn, educational, warm |
-| `vector-illustration` | Flat vector, black outlines, retro colors |
-| `vintage` | Aged paper, historical, expedition style |
-| `warm` | Friendly, approachable, human-centered |
-| `watercolor` | Soft hand-painted, natural warmth |
+| `elegant` (default) | Refined, sophisticated |
+| `blueprint` | Technical schematics |
+| `bold-editorial` | Magazine impact |
+| `chalkboard` | Chalk on blackboard |
+| `dark-atmospheric` | Cinematic dark mode |
+| `editorial-infographic` | Visual storytelling |
+| `fantasy-animation` | Ghibli/Disney inspired |
+| `flat-doodle` | Pastel, cute shapes |
+| `intuition-machine` | Technical, bilingual |
+| `minimal` | Ultra-clean, zen |
+| `nature` | Organic, earthy |
+| `notion` | SaaS dashboard |
+| `pixel-art` | Retro 8-bit |
+| `playful` | Fun, whimsical |
+| `retro` | Halftone, vintage |
+| `sketch-notes` | Hand-drawn, warm |
+| `vector-illustration` | Flat vector |
+| `vintage` | Aged, expedition |
+| `warm` | Friendly, human |
+| `watercolor` | Soft hand-painted |

-Detailed style definitions: `references/styles/<style>.md`
+Style definitions: [references/styles/](references/styles/)

 ## Auto Style Selection

-When no `--style` is specified, the system analyzes content to select the best style:
+When `--style` is omitted, select based on content signals:

-| Content Signals | Selected Style |
-|----------------|----------------|
-| Architecture, system design, engineering | `blueprint` |
-| Product launch, keynote, marketing, brand | `bold-editorial` |
-| Education, classroom, tutorial, teaching | `chalkboard` |
-| Entertainment, creative, premium, cinematic | `dark-atmospheric` |
-| Technology explainer, science, research | `editorial-infographic` |
-| Storytelling, children, fantasy, magical | `fantasy-animation` |
-| Technical docs, academic, bilingual | `intuition-machine` |
-| Personal story, emotion, growth, life | `warm` |
-| Simple, zen, focus, essential | `minimal` |
-| Fun, easy, beginner, casual | `playful` |
-| Nature, eco, wellness, health, organic | `nature` |
-| Pop culture, 80s/90s nostalgia, badges | `retro` |
-| Product, SaaS, dashboard, productivity | `notion` |
-| Productivity, workflow, app, tools, cute | `flat-doodle` |
-| Gaming, retro tech, developer, 8-bit | `pixel-art` |
-| Educational, tutorial, knowledge sharing | `sketch-notes` |
-| Creative proposals, brand, toy-like | `vector-illustration` |
-| History, exploration, heritage, biography | `vintage` |
-| Lifestyle, travel, food, personal | `watercolor` |
-| Business, professional, strategy, analysis | `elegant` |
+| Signals | Style |
+|---------|-------|
+| Architecture, system design | `blueprint` |
+| Product launch, marketing | `bold-editorial` |
+| Education, tutorial | `chalkboard` |
+| Entertainment, premium | `dark-atmospheric` |
+| Tech explainer, research | `editorial-infographic` |
+| Fantasy, children | `fantasy-animation` |
+| Technical docs, bilingual | `intuition-machine` |
+| Personal story, emotion | `warm` |
+| Zen, focus, essential | `minimal` |
+| Fun, beginner, casual | `playful` |
+| Nature, wellness, eco | `nature` |
+| SaaS, dashboard | `notion` |
+| Workflow, productivity | `flat-doodle` |
+| Gaming, retro tech | `pixel-art` |
+| Knowledge sharing | `sketch-notes` |
+| Creative proposals | `vector-illustration` |
+| History, exploration | `vintage` |
+| Lifestyle, travel | `watercolor` |
+| Business, professional | `elegant` |

-## File Management
+## Text Dimension

-### Output Directory
+| Value | Title | Subtitle | Tags | Use Case |
+|-------|:-----:|:--------:|:----:|----------|
+| `none` | - | - | - | Pure visual, no text |
+| `title-only` | ✓ (≤8字) | - | - | Simple headline (default) |
+| `title-subtitle` | ✓ | ✓ (≤15字) | - | Title + supporting context |
+| `text-rich` | ✓ | ✓ | ✓ (2-4) | Information-dense |
+
+Full guide: [references/dimensions/text.md](references/dimensions/text.md)
+
+## Auto Text Selection
+
+When `--text` is omitted, select based on content signals:
+
+| Signals | Text Level |
+|---------|------------|
+| Visual-only, photography, abstract, art | `none` |
+| Article, blog, standard cover | `title-only` |
+| Series, tutorial, technical with context | `title-subtitle` |
+| Announcement, features, multiple points, infographic | `text-rich` |
+
+Default: `title-only`
+
+## Mood Dimension
+
+| Value | Contrast | Saturation | Weight | Use Case |
+|-------|:--------:|:----------:|:------:|----------|
+| `subtle` | Low | Muted | Light | Corporate, thought leadership |
+| `balanced` | Medium | Normal | Medium | General articles (default) |
+| `bold` | High | Vivid | Heavy | Announcements, promotions |
+
+Full guide: [references/dimensions/mood.md](references/dimensions/mood.md)
+
+## Auto Mood Selection
+
+When `--mood` is omitted, select based on content signals:
+
+| Signals | Mood Level |
+|---------|------------|
+| Professional, corporate, thought leadership, academic, luxury | `subtle` |
+| General, educational, standard, blog, documentation | `balanced` |
+| Launch, announcement, promotion, event, gaming, entertainment | `bold` |
+
+Default: `balanced`
+
+## Compatibility Matrices
+
+### Type × Style
+
+| | elegant | blueprint | notion | warm | minimal | watercolor | bold-editorial | dark-atmospheric |
+|---|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
+| hero | ✓✓ | ✓ | ✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓✓ |
+| conceptual | ✓✓ | ✓✓ | ✓✓ | ✓ | ✓✓ | ✗ | ✓ | ✓ |
+| typography | ✓✓ | ✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✓✓ | ✓✓ |
+| metaphor | ✓✓ | ✗ | ✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✓ |
+| scene | ✓ | ✗ | ✗ | ✓✓ | ✓ | ✓✓ | ✓ | ✓✓ |
+| minimal | ✓✓ | ✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✗ | ✓ |
+
+### Type × Text
+
+| | none | title-only | title-subtitle | text-rich |
+|---|:---:|:---:|:---:|:---:|
+| hero | ✓ | ✓✓ | ✓✓ | ✓ |
+| conceptual | ✓✓ | ✓✓ | ✓ | ✓ |
+| typography | ✗ | ✓ | ✓✓ | ✓✓ |
+| metaphor | ✓✓ | ✓ | ✓ | ✗ |
+| scene | ✓✓ | ✓ | ✓ | ✗ |
+| minimal | ✓✓ | ✓✓ | ✓ | ✗ |
+
+### Type × Mood
+
+| | subtle | balanced | bold |
+|---|:---:|:---:|:---:|
+| hero | ✓ | ✓✓ | ✓✓ |
+| conceptual | ✓✓ | ✓✓ | ✓ |
+| typography | ✓ | ✓✓ | ✓✓ |
+| metaphor | ✓✓ | ✓✓ | ✓ |
+| scene | ✓✓ | ✓✓ | ✓ |
+| minimal | ✓✓ | ✓✓ | ✗ |
+
+✓✓ = highly recommended | ✓ = compatible | ✗ = not recommended
+
+## File Structure

 Each session creates an independent directory named by content slug:

 ```
 cover-image/{topic-slug}/
 ├── source-{slug}.{ext}    # Source files (text, images, etc.)
-├── prompts/
-│   └── cover.md
-└── cover.png
+├── prompts/cover.md       # Generation prompt
+└── cover.png              # Output image
 ```

 **Slug Generation**:
 1. Extract main topic from content (2-4 words, kebab-case)
 2. Example: "The Future of AI" → `future-of-ai`

-### Conflict Resolution
-
+**Conflict Resolution**:
 If `cover-image/{topic-slug}/` already exists:
 - Append timestamp: `{topic-slug}-YYYYMMDD-HHMMSS`
 - Example: `ai-future` exists → `ai-future-20260118-143052`

-### Source Files
-
+**Source Files**:
 Copy all sources with naming `source-{slug}.{ext}`:
- `source-article.md` (main text content)
- `source-logo.png` (image from conversation)
-
-Multiple sources supported: text, images, files from conversation.
+- `source-article.md`, `source-reference.png`, etc.
+- Multiple sources supported: text, images, files from conversation

 ## Workflow

+### Progress Checklist
+
+Copy and track progress:
+
+```
+Cover Image Progress:
+- [ ] Step 0: Check preferences (EXTEND.md) ⚠️ REQUIRED if not found
+- [ ] Step 1: Analyze content
+- [ ] Step 2: Confirm options (4 dimensions) ⚠️ REQUIRED unless --quick or all specified
+- [ ] Step 3: Create prompt
+- [ ] Step 4: Generate image
+- [ ] Step 5: Completion report
+```
+
+### Flow
+
+```
+Input → [Step 0: Preferences/Setup] → Analyze → [Confirm: 4 Dimensions] → Prompt → Generate → Complete
+                                                      ↓
+                                              (skip if --quick or all dimensions specified)
+```
+
+### Step 0: Load Preferences (EXTEND.md) ⚠️
+
+**Purpose**: Load user preferences or run first-time setup. **Do NOT skip setup if EXTEND.md not found.**
+
+Use Bash to check EXTEND.md existence (priority order):
+
+```bash
+# Check project-level first
+test -f .baoyu-skills/baoyu-cover-image/EXTEND.md && echo "project"
+
+# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
+test -f "$HOME/.baoyu-skills/baoyu-cover-image/EXTEND.md" && echo "user"
+```
+
+┌──────────────────────────────────────────────────┬───────────────────┐
+│                       Path                       │     Location      │
+├──────────────────────────────────────────────────┼───────────────────┤
+│ .baoyu-skills/baoyu-cover-image/EXTEND.md        │ Project directory │
+├──────────────────────────────────────────────────┼───────────────────┤
+│ $HOME/.baoyu-skills/baoyu-cover-image/EXTEND.md  │ User home         │
+└──────────────────────────────────────────────────┴───────────────────┘
+
+┌───────────┬───────────────────────────────────────────────────────────────────────────┐
+│  Result   │                                  Action                                   │
+├───────────┼───────────────────────────────────────────────────────────────────────────┤
+│ Found     │ Read, parse, display preferences summary (see below) → Continue to Step 1 │
+├───────────┼───────────────────────────────────────────────────────────────────────────┤
+│ Not found │ ⚠️ MUST run first-time setup (see below) → Then continue to Step 1        │
+└───────────┴───────────────────────────────────────────────────────────────────────────┘
+
+**Preferences Summary** (when EXTEND.md found):
+
+Display loaded preferences:
+
+```
+Preferences loaded from [project/user]:
+• Watermark: [enabled/disabled] [content if enabled]
+• Type: [preferred_type or "auto"]
+• Style: [preferred_style or "auto"]
+• Text: [preferred_text or "title-only"]
+• Mood: [preferred_mood or "balanced"]
+• Aspect: [default_aspect]
+• Quick mode: [enabled/disabled]
+• Language: [language or "auto"]
+```
+
+**First-Time Setup** (when EXTEND.md not found):
+
+**Language**: Use user's input language or saved language preference.
+
+Use AskUserQuestion with ALL questions in ONE call:
+
+**Q1: Watermark**
+```yaml
+header: "Watermark"
+question: "Watermark text for generated cover images?"
+options:
+  - label: "No watermark (Recommended)"
+    description: "Clean covers, can enable later in EXTEND.md"
+```
+
+**Q2: Preferred Type**
+```yaml
+header: "Type"
+question: "Default cover type preference?"
+options:
+  - label: "Auto-select (Recommended)"
+    description: "Choose based on content analysis each time"
+  - label: "hero"
+    description: "Large visual impact - product launch, announcements"
+  - label: "conceptual"
+    description: "Concept visualization - technical, architecture"
+```
+
+**Q3: Preferred Style**
+```yaml
+header: "Style"
+question: "Default cover style preference?"
+options:
+  - label: "Auto-select (Recommended)"
+    description: "Choose based on content analysis each time"
+  - label: "elegant"
+    description: "Refined, sophisticated - professional business"
+  - label: "notion"
+    description: "SaaS dashboard - productivity/tech content"
+```
+
+**Q4: Default Aspect Ratio**
+```yaml
+header: "Aspect"
+question: "Default aspect ratio for cover images?"
+options:
+  - label: "16:9 (Recommended)"
+    description: "Standard widescreen - YouTube, presentations, versatile"
+  - label: "2.35:1"
+    description: "Cinematic widescreen - article headers, blog posts"
+  - label: "1:1"
+    description: "Square - Instagram, WeChat, social cards"
+  - label: "3:4"
+    description: "Portrait - Xiaohongshu, Pinterest, mobile content"
+```
+
+Note: More ratios (4:3, 3:2) available during generation. This sets the default recommendation.
+
+**Q5: Quick Mode**
+```yaml
+header: "Quick"
+question: "Enable quick mode by default?"
+options:
+  - label: "No (Recommended)"
+    description: "Confirm dimension choices each time"
+  - label: "Yes"
+    description: "Skip confirmation, use auto-selection"
+```
+
+**Q6: Save Location**
+```yaml
+header: "Save"
+question: "Where to save preferences?"
+options:
+  - label: "Project (Recommended)"
+    description: ".baoyu-skills/ (this project only)"
+  - label: "User"
+    description: "~/.baoyu-skills/ (all projects)"
+```
+
+**After setup**: Create EXTEND.md with user choices, then continue to Step 1.
+
+Full setup details: `references/config/first-time-setup.md`
+
+**EXTEND.md Supports**: Watermark | Preferred type | Preferred style | Preferred text | Preferred mood | Default aspect ratio | Quick mode | Custom style definitions | Language preference
+
+Schema: `references/config/preferences-schema.md`
+
 ### Step 1: Analyze Content

+Read source content, save it if needed, and perform 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. Read source content
+3. **Content analysis**:
+   - Extract: topic, core message, tone, keywords
+   - Identify visual metaphor opportunities
+   - Detect content type (technical/personal/business/creative)
+4. **Language detection**:
+   - Detect source content language
+   - Note user's input language (from conversation)
+   - Compare with language preference in EXTEND.md

-2. **Extract key information**:
-   - **Main topic**: What is the article about?
-   - **Core message**: What's the key takeaway?
-   - **Tone**: Serious, playful, inspiring, educational?
-   - **Keywords**: Identify style-signaling words
+### Step 2: Confirm Options ⚠️

-3. **Language detection**:
-   - Detect **source language** from content
-   - Detect **user language** from conversation context
-   - Note if source_language ≠ user_language (will ask in Step 3)
+**Purpose**: Validate all 4 dimensions + aspect ratio.

-### Step 2: Determine Options
+**Skip Conditions**:
+| Condition | Skipped Questions | Still Asked |
+|-----------|-------------------|-------------|
+| `--quick` flag | Type, Style, Text, Mood | **Aspect Ratio** (unless `--aspect` specified) |
+| All 4 dimensions + `--aspect` specified | All | None |
+| `quick_mode: true` in EXTEND.md | Type, Style, Text, Mood | **Aspect Ratio** (unless `--aspect` specified) |
+| Otherwise | None | All 5 questions |

-1. **Style selection**:
-   - If `--style` specified, use that style
-   - Otherwise, scan content for style signals and auto-select 3 candidates
-   - Default to `elegant` if no clear signals
+**Important**: Aspect ratio is ALWAYS asked unless explicitly specified via `--aspect` CLI flag. User presets in EXTEND.md are shown as recommended option, not auto-selected.

-2. **Aspect ratio**:
-   - If `--aspect` specified, use that ratio
-   - Otherwise, prepare options: 2.35:1 (cinematic), 16:9 (widescreen), 1:1 (social)
+**Quick Mode Output** (when skipping 4 dimensions):

-### Step 3: Confirm Options
+```
+Quick Mode: Auto-selected dimensions
+• Type: [type] ([reason])
+• Style: [style] ([reason])
+• Text: [text] ([reason])
+• Mood: [mood] ([reason])

-**Purpose**: Let user confirm all options in a single step before generation.
-
-**IMPORTANT**: Present ALL options in a single confirmation step using AskUserQuestion. Do NOT interrupt workflow with multiple separate confirmations.
-
-**Determine which questions to ask**:
-
-| Question | When to Ask |
-|----------|-------------|
-| Style | Always (required) |
-| Aspect ratio | Always (offer common options) |
-| Language | Only if `source_language ≠ user_language` |
-
-**Present options** (use AskUserQuestion with all applicable questions):
-
-**Question 1 (Style)** - always:
- Style A (recommended): [style name] - [brief description]
- Style B: [style name] - [brief description]
- Style C: [style name] - [brief description]
- Custom: Provide custom style reference
-
-**Question 2 (Aspect)** - always:
- 2.35:1 Cinematic (Recommended) - ultra-wide, dramatic
- 16:9 Widescreen - standard video/presentation
- 1:1 Square - social media optimized
-
-**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 (e.g., "Title will be in Chinese")
- If different: Ask which language to use for title text
-
-### Step 4: Generate Cover Concept
-
-Create a cover image concept based on selected style:
-
-**Title** (if included, max 8 characters):
- Distill the core message into a punchy headline
- Use hooks: numbers, questions, contrasts, pain points
- Skip if `--no-title` flag is used
-
-**Visual Elements**:
- Style-appropriate imagery and icons
- 1-2 symbolic elements representing the topic
- Metaphors or analogies that fit the style
-
-### Step 5: Create Prompt File
-
-Save prompt to `prompts/cover.md` with confirmed options.
-
-**All prompts are written in the user's confirmed language preference.**
-
-**Prompt Format**:
-
-```markdown
-Cover theme: [topic in 2-3 words]
-Style: [selected style name]
-Aspect ratio: [confirmed aspect ratio]
-
-[If title included:]
-Title text: [8 characters or less, in confirmed language]
-Subtitle: [optional, in confirmed language]
-
-Visual composition:
- Main visual: [description matching style]
- Layout: [positioning based on title inclusion and aspect ratio]
- Decorative elements: [style-appropriate elements]
-
-Color scheme:
- Primary: [style primary color]
- Background: [style background color]
- Accent: [style accent color]
-
-Style notes: [specific style characteristics to emphasize]
-
-[If no title:]
-Note: No title text, pure visual illustration only.
+[Then ask Question 5: Aspect Ratio]
 ```

-### Step 6: Generate Image
+**Confirmation Flow** (when NOT skipping):
+
+**Language**: Auto-determined (user's input language > saved preference > source language). No need to ask.
+
+Present options using AskUserQuestion:
+
+**Question 1: Type** (if not specified via `--type`)
+- Show recommended type based on content analysis + preferred type from EXTEND.md
+
+```yaml
+header: "Type"
+question: "Which cover type?"
+multiSelect: false
+options:
+  - label: "[auto-recommended type] (Recommended)"
+    description: "[reason based on content signals]"
+  - label: "hero"
+    description: "Large visual impact, title overlay - product launch, announcements"
+  - label: "conceptual"
+    description: "Concept visualization - technical, architecture"
+  - label: "typography"
+    description: "Text-focused layout - opinions, quotes"
+```
+
+**Question 2: Style** (if not specified via `--style`)
+- Based on selected Type, show compatible styles (✓✓ first from compatibility matrix)
+- Format: `[style name] - [why it fits this content]`
+
+```yaml
+header: "Style"
+question: "Which cover style?"
+multiSelect: false
+options:
+  - label: "[best compatible style] (Recommended)"
+    description: "[reason based on type + content]"
+  - label: "[style2]"
+    description: "[reason]"
+  - label: "[style3]"
+    description: "[reason]"
+```
+
+**Question 3: Text** (if not specified via `--text`)
+- Based on selected Type, show compatible text levels (✓✓ first from compatibility matrix)
+
+```yaml
+header: "Text"
+question: "Text density level?"
+multiSelect: false
+options:
+  - label: "title-only (Recommended)"
+    description: "Simple headline, ≤8 characters"
+  - label: "none"
+    description: "Pure visual, no text elements"
+  - label: "title-subtitle"
+    description: "Title + supporting context"
+  - label: "text-rich"
+    description: "Title + subtitle + keyword tags"
+```
+
+**Question 4: Mood** (if not specified via `--mood`)
+- Based on content analysis, show recommended mood
+
+```yaml
+header: "Mood"
+question: "Emotional intensity?"
+multiSelect: false
+options:
+  - label: "balanced (Recommended)"
+    description: "Medium contrast and saturation, versatile"
+  - label: "subtle"
+    description: "Low contrast, muted colors, calm"
+  - label: "bold"
+    description: "High contrast, vivid colors, dynamic"
+```
+
+**Question 5: Aspect Ratio** (ALWAYS ask unless `--aspect` specified via CLI)
+
+Note: Even if user has a preset in EXTEND.md, still ask this question. The preset is shown as the recommended option.
+
+```yaml
+header: "Aspect"
+question: "Cover aspect ratio?"
+multiSelect: false
+options:
+  - label: "[user preset or 16:9] (Recommended)"
+    description: "[based on preset or default: Standard widescreen, versatile]"
+  - label: "2.35:1"
+    description: "Cinematic widescreen - article headers, blog posts"
+  - label: "4:3"
+    description: "Traditional screen - PPT slides, classic displays"
+  - label: "3:2"
+    description: "Photography ratio - blog articles, Medium posts"
+  - label: "1:1"
+    description: "Square - Instagram, WeChat moments, social cards"
+  - label: "3:4"
+    description: "Portrait - Xiaohongshu, Pinterest, mobile-first content"
+```
+
+**After response**: Proceed to Step 3 with confirmed dimensions.
+
+### Step 3: Create Prompt
+
+Save to `prompts/cover.md`:
+
+```markdown
+# Content Context
+Article title: [full original title from source]
+Content summary: [2-3 sentence summary of key points and themes]
+Keywords: [5-8 key terms extracted from content]
+
+# Visual Design
+Cover theme: [2-3 words visual interpretation]
+Type: [confirmed type]
+Style: [confirmed style]
+Text level: [confirmed text level]
+Mood: [confirmed mood]
+Aspect ratio: [confirmed ratio]
+Language: [confirmed language]
+
+# Text Elements
+[Based on text level:]
+- none: "No text elements"
+- title-only: "Title: [max 8 chars headline]"
+- title-subtitle: "Title: [headline] / Subtitle: [max 15 chars context]"
+- text-rich: "Title: [headline] / Subtitle: [context] / Tags: [2-4 keywords]"
+
+# Mood Application
+[Based on mood level:]
+- subtle: "Use low contrast, muted colors, light visual weight, calm aesthetic"
+- balanced: "Use medium contrast, normal saturation, balanced visual weight"
+- bold: "Use high contrast, vivid saturated colors, heavy visual weight, dynamic energy"
+
+# Composition
+Type composition:
+- [Type-specific layout and structure]
+
+Visual composition:
+- Main visual: [metaphor derived from content meaning]
+- Layout: [positioning based on type and aspect ratio]
+- Decorative: [style elements that reinforce content theme]
+
+Color scheme: [primary, background, accent from style, adjusted by mood]
+Type notes: [key characteristics from type definition]
+Style notes: [key characteristics from style definition]
+
+[Watermark section if enabled]
+```
+
+**Content-Driven Design**:
+- Article title and summary inform the visual metaphor choice
+- Keywords guide decorative elements and symbols
+- The skill controls visual style; the content drives meaning
+
+**Type-Specific Composition**:
+
+| Type | Composition Guidelines |
+|------|------------------------|
+| `hero` | Large focal visual (60-70% area), title overlay on visual, dramatic composition |
+| `conceptual` | Abstract shapes representing core concepts, information hierarchy, clean zones |
+| `typography` | Title as primary element (40%+ area), minimal supporting visuals, strong hierarchy |
+| `metaphor` | Concrete object/scene representing abstract idea, symbolic elements, emotional resonance |
+| `scene` | Atmospheric environment, narrative elements, mood-setting lighting and colors |
+| `minimal` | Single focal element, generous whitespace (60%+), essential shapes only |
+
+**Title guidelines** (when text level includes title):
+- Max 8 characters, punchy headline
+- Use hooks: numbers, questions, contrasts
+- Match confirmed language
+
+**Watermark Application** (if enabled in preferences):
+Add to prompt:
+```
+Include a subtle watermark "[content]" positioned at [position]
+with approximately [opacity*100]% visibility. The watermark should
+be legible but not distracting from the main content.
+```
+Reference: `references/config/watermark-guide.md`
+
+### Step 4: Generate Image
+
+**Backup Existing Cover** (if regenerating):
+If `cover.png` already exists in the output directory:
+- Rename to `cover-backup-YYYYMMDD-HHMMSS.png`

 **Image Generation Skill Selection**:
 1. Check available image generation skills
-2. If multiple skills available, ask user to choose
+2. If multiple skills available, ask user preference
+3. Call selected skill with:
+   - Prompt file path
+   - Output image path: `cover.png`
+   - Aspect ratio parameter

-**Generation**:
-Call selected image generation skill with prompt file, output path, and confirmed aspect ratio.
+**On failure**: Auto-retry once before reporting error.

-### Step 7: Output Summary
+### Step 5: Completion Report

 ```
-Cover Image Generated!
+Cover Generated!

 Topic: [topic]
+Type: [type name]
 Style: [style name]
-Aspect: [aspect ratio]
-Title: [cover title] (or "No title - visual only")
-Language: [confirmed language]
-Location: [output path]
+Text: [text level]
+Mood: [mood level]
+Aspect: [ratio]
+Title: [title text or "visual only"]
+Language: [lang]
+Watermark: [enabled/disabled]
+Location: [directory path]

-Preview the image to verify it matches your expectations.
+Files:
+✓ source-{slug}.{ext}
+✓ prompts/cover.md
+✓ cover.png
+[✓ cover-backup-{timestamp}.png (if regenerated)]
 ```

+## Image Modification
+
+| Action | Steps |
+|--------|-------|
+| **Regenerate** | Backup existing → Update prompt → Regenerate with same settings |
+| **Change type** | Backup existing → Confirm new type → Update prompt → Regenerate |
+| **Change style** | Backup existing → Confirm new style → Update prompt → Regenerate |
+| **Change text** | Backup existing → Confirm new text level → Update prompt → Regenerate |
+| **Change mood** | Backup existing → Confirm new mood → Update prompt → Regenerate |
+| **Change aspect** | Backup existing → Confirm new aspect → Update prompt → Regenerate |
+
+All modifications automatically backup the existing `cover.png` before regenerating.
+
 ## Notes

- Cover should be instantly understandable at small preview sizes
- Title (if included) must be readable and impactful
- Visual metaphors work better than literal representations
- Maintain style consistency throughout the cover
- Image generation typically takes 10-30 seconds
- Title text uses user's confirmed language preference
- Aspect ratio: 2.35:1 for cinematic/dramatic, 16:9 for widescreen, 1:1 for social media
+- Cover must be readable at small preview sizes
+- Visual metaphors > literal representations
+- Title: max 8 chars, readable, impactful
+- **Two confirmation points**: Step 0 (first-time setup if no EXTEND.md) + Step 2 (options) - can skip Step 2 with `--quick`
+- Use confirmed language for title text
+- Maintain watermark consistency if enabled
+- Check compatibility matrices when selecting combinations
+- `--no-title` is preserved as alias for `--text none`
+
+## References
+
+**Dimensions**:
+- `references/dimensions/text.md` - Text density dimension
+- `references/dimensions/mood.md` - Mood intensity dimension
+
+**Styles**: `references/styles/<name>.md` - Style definitions
+
+**Config**:
+- `references/config/preferences-schema.md` - EXTEND.md schema
+- `references/config/first-time-setup.md` - First-time setup flow
+- `references/config/watermark-guide.md` - Watermark configuration

 ## Extension Support

-Custom styles and configurations via EXTEND.md.
-
-**Check paths** (priority order):
-1. `.baoyu-skills/baoyu-cover-image/EXTEND.md` (project)
-2. `~/.baoyu-skills/baoyu-cover-image/EXTEND.md` (user)
-
-If found, load before Step 1. Extension content overrides defaults.
+Custom configurations via EXTEND.md. See **Step 0** for paths and supported options.
@@ -13,14 +13,49 @@ Create a WeChat article cover image following these guidelines:
 - Ample whitespace, highlight core message, avoid cluttered layouts
 - Main visual elements centered or slightly left (leave right side for title area if title included)

+## Four Dimensions
+
+### Type (Visual Composition)
+- `hero`: Large focal visual (60-70% area), dramatic composition
+- `conceptual`: Abstract shapes, information hierarchy, clean zones
+- `typography`: Title as primary element (40%+ area), minimal visuals
+- `metaphor`: Concrete object representing abstract idea, symbolic elements
+- `scene`: Atmospheric environment, narrative elements, mood lighting
+- `minimal`: Single focal element, generous whitespace (60%+)
+
+### Style (Visual Aesthetics)
+Apply the specified style's color palette, visual elements, and typography characteristics.
+
+### Text (Density Level)
+- `none`: No text elements, full visual area
+- `title-only`: Single headline (≤8 characters), 85% visual area
+- `title-subtitle`: Title + context (≤15 chars), 75% visual area
+- `text-rich`: Title + subtitle + 2-4 keyword tags, 60% visual area
+
+### Mood (Emotional Intensity)
+- `subtle`: Low contrast, muted/desaturated colors, light visual weight, calm aesthetic
+- `balanced`: Medium contrast, normal saturation, balanced visual weight
+- `bold`: High contrast, vivid/saturated colors, heavy visual weight, dynamic energy
+
 ## Text Style (When Title Included)

 - **ALL text MUST be hand-drawn style**
 - Title text: Large, eye-catching, max 8 characters
- May include 1 line of subtitle or keyword tags
+- Subtitle: Secondary, max 15 characters (if title-subtitle or text-rich)
+- Tags: 2-4 keyword badges (if text-rich)
 - Font style harmonizes with illustration style
 - **DO NOT use realistic or computer-generated fonts**

+## Mood Application
+
+Apply mood adjustments to the base style:
+
+| Mood | Contrast | Saturation | Weight |
+|------|----------|------------|--------|
+| subtle | Reduce 20-30% | Desaturate 20-30% | Lighter strokes/fills |
+| balanced | Standard | Standard | Standard |
+| bold | Increase 20-30% | Increase 20-30% | Heavier strokes/fills |
+
 ## Language

 - Use the same language as the content provided below for any text elements
@@ -0,0 +1,170 @@
+---
+name: first-time-setup
+description: First-time setup flow for baoyu-cover-image preferences
+---
+
+# First-Time Setup
+
+## Overview
+
+When no EXTEND.md is found, guide user through preference setup.
+
+## Setup Flow
+
+```
+No EXTEND.md found
+        │
+        ▼
+┌─────────────────────┐
+│ AskUserQuestion     │
+│ (all questions)     │
+└─────────────────────┘
+        │
+        ▼
+┌─────────────────────┐
+│ Create EXTEND.md    │
+└─────────────────────┘
+        │
+        ▼
+    Continue to Step 1
+```
+
+## Questions
+
+**Language**: Use user's input language or saved language preference.
+
+Use single AskUserQuestion with multiple questions (AskUserQuestion auto-adds "Other" option):
+
+### Question 1: Watermark
+
+```
+header: "Watermark"
+question: "Watermark text for generated cover images? Type your watermark content (e.g., name, @handle)"
+options:
+  - label: "No watermark (Recommended)"
+    description: "No watermark, can enable later in EXTEND.md"
+```
+
+Position defaults to bottom-right.
+
+### Question 2: Preferred Type
+
+```
+header: "Type"
+question: "Default cover type preference?"
+options:
+  - label: "None (Recommended)"
+    description: "Auto-select based on content analysis"
+  - label: "hero"
+    description: "Large visual impact - product launch, announcements"
+  - label: "conceptual"
+    description: "Concept visualization - technical, architecture"
+  - label: "typography"
+    description: "Text-focused layout - opinions, quotes"
+```
+
+### Question 3: Preferred Style
+
+```
+header: "Style"
+question: "Default cover style preference? Or type another style name"
+options:
+  - label: "None (Recommended)"
+    description: "Auto-select based on content analysis"
+  - label: "elegant"
+    description: "Refined, sophisticated - professional business"
+  - label: "blueprint"
+    description: "Technical schematics - architecture/system design"
+  - label: "notion"
+    description: "SaaS dashboard - productivity/tech content"
+```
+
+### Question 4: Default Aspect Ratio
+
+```
+header: "Aspect"
+question: "Default aspect ratio for cover images?"
+options:
+  - label: "2.35:1 (Recommended)"
+    description: "Cinematic widescreen, best for article headers"
+  - label: "16:9"
+    description: "Standard widescreen, versatile"
+  - label: "1:1"
+    description: "Square, social media friendly"
+```
+
+### Question 5: Quick Mode
+
+```
+header: "Quick"
+question: "Enable quick mode by default?"
+options:
+  - label: "No (Recommended)"
+    description: "Confirm dimension choices each time"
+  - label: "Yes"
+    description: "Skip confirmation, use auto-selection"
+```
+
+### Question 6: Save Location
+
+```
+header: "Save"
+question: "Where to save preferences?"
+options:
+  - label: "Project"
+    description: ".baoyu-skills/ (this project only)"
+  - label: "User"
+    description: "~/.baoyu-skills/ (all projects)"
+```
+
+## Save Locations
+
+| Choice | Path | Scope |
+|--------|------|-------|
+| Project | `.baoyu-skills/baoyu-cover-image/EXTEND.md` | Current project |
+| User | `~/.baoyu-skills/baoyu-cover-image/EXTEND.md` | All projects |
+
+## After Setup
+
+1. Create directory if needed
+2. Write EXTEND.md with frontmatter
+3. Confirm: "Preferences saved to [path]"
+4. Continue to Step 1
+
+## EXTEND.md Template
+
+```yaml
+---
+version: 2
+watermark:
+  enabled: [true/false]
+  content: "[user input or empty]"
+  position: bottom-right
+  opacity: 0.7
+preferred_type: [selected type or null]
+preferred_style: [selected style or null]
+preferred_text: title-only
+preferred_mood: balanced
+default_aspect: [2.35:1/16:9/1:1]
+quick_mode: [true/false]
+language: null
+custom_styles: []
+---
+```
+
+## New Fields in v2
+
+| Field | Default | Description |
+|-------|---------|-------------|
+| `preferred_text` | title-only | Text density (none, title-only, title-subtitle, text-rich) |
+| `preferred_mood` | balanced | Mood intensity (subtle, balanced, bold) |
+| `quick_mode` | false | Skip confirmation step when true |
+
+Note: Text and Mood preferences use sensible defaults (title-only, balanced) and don't require setup questions. Users can modify these in EXTEND.md directly.
+
+## Modifying Preferences Later
+
+Users can edit EXTEND.md directly or run setup again:
+- Delete EXTEND.md to trigger setup
+- Edit YAML frontmatter for quick changes
+- Full schema: `config/preferences-schema.md`
@@ -0,0 +1,188 @@
+---
+name: preferences-schema
+description: EXTEND.md YAML schema for baoyu-cover-image user preferences
+---
+
+# Preferences Schema
+
+## Full Schema
+
+```yaml
+---
+version: 2
+
+watermark:
+  enabled: false
+  content: ""
+  position: bottom-right  # bottom-right|bottom-left|bottom-center|top-right
+  opacity: 0.7            # 0.1-1.0
+
+preferred_type: null      # hero|conceptual|typography|metaphor|scene|minimal or null for auto-select
+
+preferred_style: null     # Built-in style name or null for auto-select
+
+preferred_text: title-only  # none|title-only|title-subtitle|text-rich
+
+preferred_mood: balanced    # subtle|balanced|bold
+
+default_aspect: "2.35:1"  # 2.35:1|16:9|1:1
+
+quick_mode: false         # Skip confirmation when true
+
+language: null            # zh|en|ja|ko|auto (null = auto-detect)
+
+custom_styles:
+  - name: my-style
+    description: "Style description"
+    color_palette:
+      primary: ["#1E3A5F", "#4A90D9"]
+      background: "#F5F7FA"
+      accents: ["#00B4D8"]
+    visual_elements: "Clean lines, geometric shapes"
+    typography: "Modern sans-serif"
+    best_for: "Business, tech content"
+---
+```
+
+## Field Reference
+
+| Field | Type | Default | Description |
+|-------|------|---------|-------------|
+| `version` | int | 2 | Schema version |
+| `watermark.enabled` | bool | false | Enable watermark |
+| `watermark.content` | string | "" | Watermark text (@username or custom) |
+| `watermark.position` | enum | bottom-right | Position on image |
+| `watermark.opacity` | float | 0.7 | Transparency (0.1-1.0) |
+| `preferred_type` | string | null | Type name or null for auto |
+| `preferred_style` | string | null | Style name or null for auto |
+| `preferred_text` | string | title-only | Text density level |
+| `preferred_mood` | string | balanced | Mood intensity level |
+| `default_aspect` | string | "2.35:1" | Default aspect ratio |
+| `quick_mode` | bool | false | Skip confirmation step |
+| `language` | string | null | Output language (null = auto-detect) |
+| `custom_styles` | array | [] | User-defined styles |
+
+## Type Options
+
+| Value | Description |
+|-------|-------------|
+| `hero` | Large visual impact, title overlay |
+| `conceptual` | Concept visualization, abstract core ideas |
+| `typography` | Text-focused layout, prominent title |
+| `metaphor` | Visual metaphor, concrete expressing abstract |
+| `scene` | Atmospheric scene, narrative feel |
+| `minimal` | Minimalist composition, generous whitespace |
+
+## Text Options
+
+| Value | Description |
+|-------|-------------|
+| `none` | Pure visual, no text elements |
+| `title-only` | Single headline (≤8 characters) |
+| `title-subtitle` | Title + subtitle (≤15 characters) |
+| `text-rich` | Title + subtitle + keyword tags (2-4) |
+
+## Mood Options
+
+| Value | Description |
+|-------|-------------|
+| `subtle` | Low contrast, muted colors, calm aesthetic |
+| `balanced` | Medium contrast, normal saturation, versatile |
+| `bold` | High contrast, vivid colors, dynamic energy |
+
+## Position Options
+
+| Value | Description |
+|-------|-------------|
+| `bottom-right` | Lower right corner (default, most common) |
+| `bottom-left` | Lower left corner |
+| `bottom-center` | Bottom center |
+| `top-right` | Upper right corner |
+
+## Aspect Ratio Options
+
+| Value | Description | Best For |
+|-------|-------------|----------|
+| `2.35:1` | Cinematic widescreen | Article headers, blog covers |
+| `16:9` | Standard widescreen | Presentations, video thumbnails |
+| `1:1` | Square | Social media, profile images |
+
+## Custom Style Fields
+
+| Field | Required | Description |
+|-------|----------|-------------|
+| `name` | Yes | Unique style identifier (kebab-case) |
+| `description` | Yes | What the style conveys |
+| `color_palette.primary` | No | Main colors (array) |
+| `color_palette.background` | No | Background color |
+| `color_palette.accents` | No | Accent colors (array) |
+| `visual_elements` | No | Decorative elements |
+| `typography` | No | Font/lettering style |
+| `best_for` | No | Recommended content types |
+
+## Example: Minimal Preferences
+
+```yaml
+---
+version: 2
+watermark:
+  enabled: true
+  content: "@myhandle"
+preferred_type: null
+preferred_style: elegant
+preferred_text: title-only
+preferred_mood: balanced
+quick_mode: false
+---
+```
+
+## Example: Full Preferences
+
+```yaml
+---
+version: 2
+watermark:
+  enabled: true
+  content: "myblog.com"
+  position: bottom-right
+  opacity: 0.5
+
+preferred_type: conceptual
+
+preferred_style: blueprint
+
+preferred_text: title-subtitle
+
+preferred_mood: subtle
+
+default_aspect: "16:9"
+
+quick_mode: true
+
+language: en
+
+custom_styles:
+  - name: corporate-tech
+    description: "Professional B2B tech style"
+    color_palette:
+      primary: ["#1E3A5F", "#4A90D9"]
+      background: "#F5F7FA"
+      accents: ["#00B4D8", "#48CAE4"]
+    visual_elements: "Clean lines, subtle gradients, circuit patterns"
+    typography: "Modern sans-serif, professional"
+    best_for: "SaaS, enterprise, technical"
+---
+```
+
+## Migration from v1
+
+When loading v1 schema, auto-upgrade:
+
+| v1 Field | v2 Field | Default Value |
+|----------|----------|---------------|
+| (missing) | `version` | 2 |
+| (missing) | `preferred_text` | title-only |
+| (missing) | `preferred_mood` | balanced |
+| (missing) | `quick_mode` | false |
+
+v1 `--no-title` flag maps to `preferred_text: none`.
@@ -0,0 +1,81 @@
+---
+name: watermark-guide
+description: Watermark configuration guide for baoyu-cover-image
+---
+
+# Watermark Guide
+
+## Position Diagram
+
+```
+┌─────────────────────────────┐
+│                  [top-right]│
+│                             │
+│                             │
+│       COVER IMAGE           │
+│                             │
+│                             │
+│[bottom-left][bottom-center][bottom-right]│
+└─────────────────────────────┘
+```
+
+## Position Recommendations
+
+| Position | Best For | Avoid When |
+|----------|----------|------------|
+| `bottom-right` | Default choice, most common | Title in bottom-right |
+| `bottom-left` | Right-heavy layouts | Key visual in bottom-left |
+| `bottom-center` | Centered designs | Text-heavy bottom area |
+| `top-right` | Bottom-heavy content | Title/header in top-right |
+
+## Opacity Examples
+
+| Opacity | Visual Effect | Use Case |
+|---------|---------------|----------|
+| 0.3 | Very subtle, barely visible | Clean aesthetic priority |
+| 0.5 | Balanced, noticeable but not distracting | Default recommendation |
+| 0.7 | Clearly visible | Brand recognition priority |
+| 0.9 | Strong presence | Anti-copy protection |
+
+## Content Format
+
+| Format | Example | Style |
+|--------|---------|-------|
+| Handle | `@username` | Social media |
+| Domain | `myblog.com` | Cross-platform |
+| Brand | `MyBrand` | Simple branding |
+| Chinese | `博客名` | Chinese platforms |
+
+## Best Practices
+
+1. **Consistency**: Use same watermark across all covers
+2. **Legibility**: Ensure watermark readable on both light/dark areas
+3. **Size**: Keep subtle - should not distract from content
+4. **Contrast**: Adjust opacity based on cover background
+
+## Prompt Integration
+
+When watermark is enabled, add to image generation prompt:
+
+```
+Include a subtle watermark "[content]" positioned at [position]
+with approximately [opacity*100]% visibility. The watermark should
+be legible but not distracting from the main content.
+```
+
+## Cover-Specific Considerations
+
+| Aspect Ratio | Recommended Position | Notes |
+|--------------|---------------------|-------|
+| 2.35:1 | bottom-right | Cinematic - keep corners clean |
+| 16:9 | bottom-right | Standard - flexible placement |
+| 1:1 | bottom-center | Square - centered often works better |
+
+## Common Issues
+
+| Issue | Solution |
+|-------|----------|
+| Watermark invisible | Increase opacity or adjust position |
+| Watermark too prominent | Decrease opacity (0.3-0.5) |
+| Watermark overlaps title | Change position or reduce title area |
+| Inconsistent appearance | Use fixed opacity/position in preferences |
@@ -0,0 +1,125 @@
+---
+name: mood-dimension
+description: Emotional intensity dimension for cover images
+---
+
+# Mood Dimension
+
+Controls emotional intensity and visual weight of cover images.
+
+## Values
+
+| Value | Contrast | Saturation | Weight | Energy |
+|-------|:--------:|:----------:|:------:|:------:|
+| `subtle` | Low | Muted | Light | Calm |
+| `balanced` | Medium | Normal | Medium | Moderate |
+| `bold` | High | Vivid | Heavy | Dynamic |
+
+## Detail
+
+### subtle
+
+Calm, understated visual presence.
+
+**Characteristics**:
+- Low contrast between elements
+- Muted, desaturated colors
+- Light visual weight
+- Gentle, refined aesthetic
+- Soft edges and transitions
+
+**Use Cases**:
+- Thought leadership content
+- Professional/corporate communications
+- Meditation, wellness topics
+- Academic or scholarly articles
+- Luxury brand aesthetics
+
+**Color Guidance**:
+- Pastels, earth tones, neutrals
+- Low saturation (30-50%)
+- Soft gradients
+- Minimal color variety (2-3 colors)
+
+### balanced
+
+Versatile, harmonious visual presence.
+
+**Characteristics**:
+- Medium contrast
+- Natural saturation levels
+- Balanced visual weight
+- Clear but not aggressive
+- Standard aesthetic approach
+
+**Use Cases**:
+- General articles (default)
+- Most blog content
+- Educational material
+- Product documentation
+- News and updates
+
+**Color Guidance**:
+- Standard saturation (50-70%)
+- Complementary color schemes
+- Clear foreground/background separation
+- Moderate color variety (3-4 colors)
+
+### bold
+
+Dynamic, high-impact visual presence.
+
+**Characteristics**:
+- High contrast between elements
+- Vivid, saturated colors
+- Heavy visual weight
+- Energetic, attention-grabbing
+- Sharp edges and strong shapes
+
+**Use Cases**:
+- Product launches
+- Promotional announcements
+- Event marketing
+- Call-to-action content
+- Entertainment/gaming topics
+
+**Color Guidance**:
+- High saturation (70-100%)
+- Vibrant, primary colors
+- Strong contrast ratios
+- Dynamic color combinations (4+ colors)
+
+## Type Compatibility
+
+| Type | subtle | balanced | bold |
+|------|:------:|:--------:|:----:|
+| hero | ✓ | ✓✓ | ✓✓ |
+| conceptual | ✓✓ | ✓✓ | ✓ |
+| typography | ✓ | ✓✓ | ✓✓ |
+| metaphor | ✓✓ | ✓✓ | ✓ |
+| scene | ✓✓ | ✓✓ | ✓ |
+| minimal | ✓✓ | ✓✓ | ✗ |
+
+✓✓ = highly recommended | ✓ = compatible | ✗ = not recommended
+
+## Style Interaction
+
+Mood modifies the base style characteristics:
+
+| Style Category | subtle | balanced | bold |
+|----------------|--------|----------|------|
+| Technical (blueprint, notion) | Lighter lines, softer colors | Standard rendering | Stronger contrast, sharper edges |
+| Artistic (watercolor, sketch-notes) | More whitespace, lighter strokes | Standard rendering | Deeper colors, heavier strokes |
+| Editorial (bold-editorial, dark-atmospheric) | Reduced contrast, softer tones | Standard rendering | Maximum impact, vivid colors |
+
+## Auto Selection
+
+When `--mood` is omitted, select based on signals:
+
+| Signals | Mood Level |
+|---------|------------|
+| Professional, corporate, thought leadership, academic, luxury | `subtle` |
+| General, educational, standard, blog, documentation | `balanced` |
+| Launch, announcement, promotion, event, gaming, entertainment | `bold` |
+
+Default: `balanced`
@@ -0,0 +1,122 @@
+---
+name: text-dimension
+description: Text density dimension for cover images
+---
+
+# Text Dimension
+
+Controls text density and information hierarchy on cover images.
+
+## Values
+
+| Value | Title | Subtitle | Tags | Visual Area |
+|-------|:-----:|:--------:|:----:|:-----------:|
+| `none` | - | - | - | 100% |
+| `title-only` | ✓ (≤8字) | - | - | 85% |
+| `title-subtitle` | ✓ | ✓ (≤15字) | - | 75% |
+| `text-rich` | ✓ | ✓ | ✓ (2-4) | 60% |
+
+## Detail
+
+### none
+
+Pure visual cover with no text elements.
+
+**Use Cases**:
+- Photography-focused covers
+- Abstract art pieces
+- Visual-only social sharing
+- When title added externally
+
+**Composition**:
+- Full visual area available
+- No reserved text zones
+- Emphasis on visual metaphor
+
+### title-only
+
+Single headline, maximum impact.
+
+**Use Cases**:
+- Most article covers (default)
+- Clear single message
+- Strong brand recognition
+
+**Composition**:
+- Title: ≤8 characters, prominent
+- Reserved zone: top or bottom 15%
+- Visual supports title message
+
+**Title Guidelines**:
+- Punchy, action-oriented
+- Numbers, questions, contrasts work well
+- Match content language
+
+### title-subtitle
+
+Title with supporting context.
+
+**Use Cases**:
+- Technical articles needing clarification
+- Series with episode/part info
+- Content with dual messages
+
+**Composition**:
+- Title: ≤8 characters, primary
+- Subtitle: ≤15 characters, secondary
+- Reserved zone: 25%
+- Clear hierarchy between title/subtitle
+
+**Subtitle Guidelines**:
+- Clarify or contextualize title
+- Can include series name, author, date
+- Smaller, less prominent than title
+
+### text-rich
+
+Information-dense cover with multiple text elements.
+
+**Use Cases**:
+- Infographic-style covers
+- Event announcements with details
+- Promotional material with features
+- Content with multiple key points
+
+**Composition**:
+- Title: primary focus
+- Subtitle: supporting info
+- Tags: 2-4 keyword labels
+- Reserved zone: 40%
+- Clear visual hierarchy
+
+**Tag Guidelines**:
+- 2-4 tags maximum
+- Short keywords (1-2 words each)
+- Positioned as badges/labels
+- Can highlight: category, date, author, key features
+
+## Type Compatibility
+
+| Type | none | title-only | title-subtitle | text-rich |
+|------|:----:|:----------:|:--------------:|:---------:|
+| hero | ✓ | ✓✓ | ✓✓ | ✓ |
+| conceptual | ✓✓ | ✓✓ | ✓ | ✓ |
+| typography | ✗ | ✓ | ✓✓ | ✓✓ |
+| metaphor | ✓✓ | ✓ | ✓ | ✗ |
+| scene | ✓✓ | ✓ | ✓ | ✗ |
+| minimal | ✓✓ | ✓✓ | ✓ | ✗ |
+
+✓✓ = highly recommended | ✓ = compatible | ✗ = not recommended
+
+## Auto Selection
+
+When `--text` is omitted, select based on signals:
+
+| Signals | Text Level |
+|---------|------------|
+| Visual-only, photography, abstract, art | `none` |
+| Article, blog, standard cover | `title-only` |
+| Series, tutorial, technical with context | `title-subtitle` |
+| Announcement, features, multiple points, infographic | `text-rich` |
+
+Default: `title-only`
@@ -1,15 +1,11 @@
 ---
 name: baoyu-danger-gemini-web
-description: Image generation skill using Gemini Web. Generates images from text prompts via Google Gemini. Also supports text generation. Use as the image generation backend for other skills like cover-image, xhs-images, article-illustrator.
+description: Generates images and text via reverse-engineered Gemini Web API. Supports text generation, image generation from prompts, reference images for vision input, and multi-turn conversations. Use when other skills need image generation backend, or when user requests "generate image with Gemini", "Gemini text generation", or needs vision-capable AI generation.
 ---

 # Gemini Web Client

-Supports:
- Text generation
- Image generation (download + save)
- Reference images for vision input (attach local images)
- Multi-turn conversations via persisted `--sessionId`
+Text/image generation via Gemini Web API. Supports reference images and multi-turn conversations.

 ## Script Directory

@@ -26,146 +22,73 @@ Supports:
 | `scripts/main.ts` | CLI entry point for text/image generation |
 | `scripts/gemini-webapi/*` | TypeScript port of `gemini_webapi` (GeminiClient, types, utils) |

-## ⚠️ Disclaimer (REQUIRED)
+## Consent Check (REQUIRED)

-**Before using this skill**, the consent check MUST be performed.
+Before first use, verify user consent for reverse-engineered API usage.

-### Consent Check Flow
+**Consent file locations**:
+- macOS: `~/Library/Application Support/baoyu-skills/gemini-web/consent.json`
+- Linux: `~/.local/share/baoyu-skills/gemini-web/consent.json`
+- Windows: `%APPDATA%\baoyu-skills\gemini-web\consent.json`

-**Step 1**: Check consent file
-
-```bash
-# macOS
-cat ~/Library/Application\ Support/baoyu-skills/gemini-web/consent.json 2>/dev/null
-
-# Linux
-cat ~/.local/share/baoyu-skills/gemini-web/consent.json 2>/dev/null
-
-# Windows (PowerShell)
-Get-Content "$env:APPDATA\baoyu-skills\gemini-web\consent.json" 2>$null
-```
-
-**Step 2**: If consent exists and `accepted: true` with matching `disclaimerVersion: "1.0"`:
-
-Print warning and proceed:
-```
-⚠️  Warning: Using reverse-engineered Gemini Web API (not official). Accepted on: <acceptedAt date>
-```
-
-**Step 3**: If consent file doesn't exist or `disclaimerVersion` mismatch:
-
-Display disclaimer and ask user:
-
-```
-⚠️  DISCLAIMER
-
-This tool uses a reverse-engineered Gemini Web API, NOT an official Google API.
-
-Risks:
- May break without notice if Google changes their API
- No official support or guarantees
- Use at your own risk
-
-Do you accept these terms and wish to continue?
-```
-
-Use `AskUserQuestion` tool with options:
- **Yes, I accept** - Continue and save consent
- **No, I decline** - Exit immediately
-
-**Step 4**: On acceptance, create consent file:
-
-```bash
-# macOS
-mkdir -p ~/Library/Application\ Support/baoyu-skills/gemini-web
-cat > ~/Library/Application\ Support/baoyu-skills/gemini-web/consent.json << 'EOF'
-{
-  "version": 1,
-  "accepted": true,
-  "acceptedAt": "<ISO timestamp>",
-  "disclaimerVersion": "1.0"
-}
-EOF
-
-# Linux
-mkdir -p ~/.local/share/baoyu-skills/gemini-web
-cat > ~/.local/share/baoyu-skills/gemini-web/consent.json << 'EOF'
-{
-  "version": 1,
-  "accepted": true,
-  "acceptedAt": "<ISO timestamp>",
-  "disclaimerVersion": "1.0"
-}
-EOF
-```
-
-**Step 5**: On decline, output message and stop:
-```
-User declined the disclaimer. Exiting.
-```
+**Flow**:
+1. Check if consent file exists with `accepted: true` and `disclaimerVersion: "1.0"`
+2. If valid consent exists → print warning with `acceptedAt` date, proceed
+3. If no consent → show disclaimer, ask user via `AskUserQuestion`:
+   - "Yes, I accept" → create consent file with ISO timestamp, proceed
+   - "No, I decline" → output decline message, stop
+4. Consent file format: `{"version":1,"accepted":true,"acceptedAt":"<ISO>","disclaimerVersion":"1.0"}`

 ---

-## Quick start
+## Preferences (EXTEND.md)
+
+Use Bash to check EXTEND.md existence (priority order):

 ```bash
-npx -y bun ${SKILL_DIR}/scripts/main.ts "Hello, Gemini"
-npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "Explain quantum computing"
+# Check project-level first
+test -f .baoyu-skills/baoyu-danger-gemini-web/EXTEND.md && echo "project"
+
+# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
+test -f "$HOME/.baoyu-skills/baoyu-danger-gemini-web/EXTEND.md" && echo "user"
+```
+
+┌──────────────────────────────────────────────────────────┬───────────────────┐
+│                           Path                           │     Location      │
+├──────────────────────────────────────────────────────────┼───────────────────┤
+│ .baoyu-skills/baoyu-danger-gemini-web/EXTEND.md          │ Project directory │
+├──────────────────────────────────────────────────────────┼───────────────────┤
+│ $HOME/.baoyu-skills/baoyu-danger-gemini-web/EXTEND.md    │ User home         │
+└──────────────────────────────────────────────────────────┴───────────────────┘
+
+┌───────────┬───────────────────────────────────────────────────────────────────────────┐
+│  Result   │                                  Action                                   │
+├───────────┼───────────────────────────────────────────────────────────────────────────┤
+│ Found     │ Read, parse, apply settings                                               │
+├───────────┼───────────────────────────────────────────────────────────────────────────┤
+│ Not found │ Use defaults                                                              │
+└───────────┴───────────────────────────────────────────────────────────────────────────┘
+
+**EXTEND.md Supports**: Default model | Proxy settings | Custom data directory
+
+## Usage
+
+```bash
+# Text generation
+npx -y bun ${SKILL_DIR}/scripts/main.ts "Your prompt"
+npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "Your prompt" --model gemini-2.5-pro
+
+# Image generation
 npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A cute cat" --image cat.png
 npx -y bun ${SKILL_DIR}/scripts/main.ts --promptfiles system.md content.md --image out.png

-# Multi-turn conversation (agent generates unique sessionId)
-npx -y bun ${SKILL_DIR}/scripts/main.ts "Remember this: 42" --sessionId my-unique-id-123
-npx -y bun ${SKILL_DIR}/scripts/main.ts "What number?" --sessionId my-unique-id-123
-```
+# Vision input (reference images)
+npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "Describe this" --reference image.png
+npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "Create variation" --reference a.png --image out.png

-## Commands
-
-### Text generation
-
-```bash
-# Simple prompt (positional)
-npx -y bun ${SKILL_DIR}/scripts/main.ts "Your prompt here"
-
-# Explicit prompt flag
-npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "Your prompt here"
-npx -y bun ${SKILL_DIR}/scripts/main.ts -p "Your prompt here"
-
-# With model selection
-npx -y bun ${SKILL_DIR}/scripts/main.ts -p "Hello" -m gemini-2.5-pro
-
-# Pipe from stdin
-echo "Summarize this" | npx -y bun ${SKILL_DIR}/scripts/main.ts
-```
-
-### Image generation
-
-```bash
-# Generate image with default path (./generated.png)
-npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A sunset over mountains" --image
-
-# Generate image with custom path
-npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A cute robot" --image robot.png
-
-# Shorthand
-npx -y bun ${SKILL_DIR}/scripts/main.ts "A dragon" --image=dragon.png
-```
-
-### Vision input (reference images)
-
-```bash
-# Text + image -> text
-npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "Describe this image" --reference a.png
-
-# Text + image -> image
-npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "Generate a variation" --reference a.png --image out.png
-```
-
-### Output formats
-
-```bash
-# Plain text (default)
-npx -y bun ${SKILL_DIR}/scripts/main.ts "Hello"
+# Multi-turn conversation
+npx -y bun ${SKILL_DIR}/scripts/main.ts "Remember: 42" --sessionId session-abc
+npx -y bun ${SKILL_DIR}/scripts/main.ts "What number?" --sessionId session-abc

 # JSON output
 npx -y bun ${SKILL_DIR}/scripts/main.ts "Hello" --json
@@ -175,45 +98,35 @@ npx -y bun ${SKILL_DIR}/scripts/main.ts "Hello" --json

 | Option | Description |
 |--------|-------------|
-| `--prompt <text>`, `-p` | Prompt text |
-| `--promptfiles <files...>` | Read prompt from files (concatenated in order) |
-| `--model <id>`, `-m` | Model: gemini-3-pro (default), gemini-2.5-pro, gemini-2.5-flash |
-| `--image [path]` | Generate image, save to path (default: generated.png) |
-| `--reference <files...>`, `--ref <files...>` | Reference images for vision input |
-| `--sessionId <id>` | Session ID for multi-turn conversation (agent generates unique ID) |
-| `--list-sessions` | List saved sessions (max 100, sorted by update time) |
+| `--prompt`, `-p` | Prompt text |
+| `--promptfiles` | Read prompt from files (concatenated) |
+| `--model`, `-m` | Model: gemini-3-pro (default), gemini-2.5-pro, gemini-2.5-flash |
+| `--image [path]` | Generate image (default: generated.png) |
+| `--reference`, `--ref` | Reference images for vision input |
+| `--sessionId` | Session ID for multi-turn conversation |
+| `--list-sessions` | List saved sessions |
 | `--json` | Output as JSON |
-| `--login` | Refresh cookies only, then exit |
-| `--cookie-path <path>` | Custom cookie file path |
-| `--profile-dir <path>` | Chrome profile directory |
-| `--help`, `-h` | Show help |
-
-CLI note: `scripts/main.ts` supports text generation, image generation, reference images (`--reference/--ref`), and multi-turn conversations via `--sessionId`.
+| `--login` | Refresh cookies, then exit |
+| `--cookie-path` | Custom cookie file path |
+| `--profile-dir` | Chrome profile directory |

 ## Models

- `gemini-3-pro` - Default, latest model
- `gemini-2.5-pro` - Previous generation pro
- `gemini-2.5-flash` - Fast, lightweight
+| Model | Description |
+|-------|-------------|
+| `gemini-3-pro` | Default, latest |
+| `gemini-2.5-pro` | Previous pro |
+| `gemini-2.5-flash` | Fast, lightweight |

 ## Authentication

-First run opens a browser to authenticate with Google. Cookies are cached for subsequent runs.
+First run opens browser for Google auth. Cookies cached automatically.

-**Supported browsers** (auto-detected in order):
- Google Chrome
- Google Chrome Canary / Beta
- Chromium
- Microsoft Edge
+Supported browsers (auto-detected): Chrome, Chrome Canary/Beta, Chromium, Edge.

-Override with `GEMINI_WEB_CHROME_PATH` environment variable if needed.
+Force refresh: `--login` flag. Override browser: `GEMINI_WEB_CHROME_PATH` env var.

-```bash
-# Force cookie refresh
-npx -y bun ${SKILL_DIR}/scripts/main.ts --login
-```
-
-## Environment variables
+## Environment Variables

 | Variable | Description |
 |----------|-------------|
@@ -221,72 +134,14 @@ npx -y bun ${SKILL_DIR}/scripts/main.ts --login
 | `GEMINI_WEB_COOKIE_PATH` | Cookie file path |
 | `GEMINI_WEB_CHROME_PROFILE_DIR` | Chrome profile directory |
 | `GEMINI_WEB_CHROME_PATH` | Chrome executable path |
+| `HTTP_PROXY`, `HTTPS_PROXY` | Proxy for Google access (set inline with command) |

-## Proxy Configuration
+## Sessions

-If you need a proxy to access Google services (e.g., in China), set `HTTP_PROXY` and `HTTPS_PROXY` environment variables before running:
+Session files stored in data directory under `sessions/<id>.json`.

-```bash
-# Example with local proxy
-HTTP_PROXY=http://127.0.0.1:7890 HTTPS_PROXY=http://127.0.0.1:7890 npx -y bun ${SKILL_DIR}/scripts/main.ts "Hello"
-
-# Image generation with proxy
-HTTP_PROXY=http://127.0.0.1:7890 HTTPS_PROXY=http://127.0.0.1:7890 npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A cat" --image cat.png
-
-# Cookie refresh with proxy
-HTTP_PROXY=http://127.0.0.1:7890 HTTPS_PROXY=http://127.0.0.1:7890 npx -y bun ${SKILL_DIR}/scripts/main.ts --login
-```
-
-**Note**: Environment variables must be set inline with the command. Shell profile settings (e.g., `.bashrc`) may not be inherited by subprocesses.
-
-## Examples
-
-### Generate text response
-```bash
-npx -y bun ${SKILL_DIR}/scripts/main.ts "What is the capital of France?"
-```
-
-### Generate image
-```bash
-npx -y bun ${SKILL_DIR}/scripts/main.ts "A photorealistic image of a golden retriever puppy" --image puppy.png
-```
-
-### Get JSON output for parsing
-```bash
-npx -y bun ${SKILL_DIR}/scripts/main.ts "Hello" --json | jq '.text'
-```
-
-### Generate image from prompt files
-```bash
-# Concatenate system.md + content.md as prompt
-npx -y bun ${SKILL_DIR}/scripts/main.ts --promptfiles system.md content.md --image output.png
-```
-
-### Multi-turn conversation
-```bash
-# Start a session with unique ID (agent generates this)
-npx -y bun ${SKILL_DIR}/scripts/main.ts "You are a helpful math tutor." --sessionId task-abc123
-
-# Continue the conversation (remembers context)
-npx -y bun ${SKILL_DIR}/scripts/main.ts "What is 2+2?" --sessionId task-abc123
-npx -y bun ${SKILL_DIR}/scripts/main.ts "Now multiply that by 10" --sessionId task-abc123
-
-# List recent sessions (max 100, sorted by update time)
-npx -y bun ${SKILL_DIR}/scripts/main.ts --list-sessions
-```
-
-Session files are stored in `~/Library/Application Support/baoyu-skills/gemini-web/sessions/<id>.json` and contain:
- `id`: Session ID
- `metadata`: Gemini chat metadata for continuation
- `messages`: Array of `{role, content, timestamp, error?}`
- `createdAt`, `updatedAt`: Timestamps
+Contains: `id`, `metadata` (Gemini chat state), `messages` array, timestamps.

 ## Extension Support

-Custom configurations via EXTEND.md.
-
-**Check paths** (priority order):
-1. `.baoyu-skills/baoyu-danger-gemini-web/EXTEND.md` (project)
-2. `~/.baoyu-skills/baoyu-danger-gemini-web/EXTEND.md` (user)
-
-If found, load before workflow. Extension content overrides defaults.
+Custom configurations via EXTEND.md. See **Preferences** section for paths and supported options.
@@ -1,119 +1,107 @@
 ---
 name: baoyu-danger-x-to-markdown
-description: Convert X (Twitter) tweet or article URL to markdown. Uses reverse-engineered X API (private). Requires user consent before use.
+description: Converts X (Twitter) tweets and articles to markdown with YAML front matter. Uses reverse-engineered API requiring user consent. Use when user mentions "X to markdown", "tweet to markdown", "save tweet", or provides x.com/twitter.com URLs for conversion.
 ---

 # X to Markdown

-Converts X (Twitter) content to markdown format:
- Tweet threads → Markdown with YAML front matter
- X Articles → Full article content extraction
+Converts X content to markdown:
+- Tweets/threads → Markdown with YAML front matter
+- X Articles → Full content extraction

 ## Script Directory

-**Important**: All scripts are located in the `scripts/` subdirectory of this skill.
+Scripts located in `scripts/` subdirectory.

-**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
+**Path Resolution**:
+1. `SKILL_DIR` = this SKILL.md's directory
+2. Script path = `${SKILL_DIR}/scripts/main.ts`

-**Script Reference**:
-| Script | Purpose |
-|--------|---------|
-| `scripts/main.ts` | CLI entry point for URL conversion |
+## Consent Requirement

-## ⚠️ Disclaimer (REQUIRED)
+**Before any conversion**, check and obtain consent.

-**Before using this skill**, the consent check MUST be performed.
-
-### Consent Check Flow
+### Consent Flow

 **Step 1**: Check consent file

 ```bash
 # macOS
-cat ~/Library/Application\ Support/baoyu-skills/x-to-markdown/consent.json 2>/dev/null
+cat ~/Library/Application\ Support/baoyu-skills/x-to-markdown/consent.json

 # Linux
-cat ~/.local/share/baoyu-skills/x-to-markdown/consent.json 2>/dev/null
-
-# Windows (PowerShell)
-Get-Content "$env:APPDATA\baoyu-skills\x-to-markdown\consent.json" 2>$null
+cat ~/.local/share/baoyu-skills/x-to-markdown/consent.json
 ```

-**Step 2**: If consent exists and `accepted: true` with matching `disclaimerVersion: "1.0"`:
-
-Print warning and proceed:
+**Step 2**: If `accepted: true` and `disclaimerVersion: "1.0"` → print warning and proceed:
 ```
-⚠️  Warning: Using reverse-engineered X API (not official). Accepted on: <acceptedAt date>
+Warning: Using reverse-engineered X API. Accepted on: <acceptedAt>
 ```

-**Step 3**: If consent file doesn't exist or `disclaimerVersion` mismatch:
-
-Display disclaimer and ask user:
-
+**Step 3**: If missing or version mismatch → display disclaimer:
 ```
-⚠️  DISCLAIMER
+DISCLAIMER

-This tool uses a reverse-engineered X (Twitter) API, NOT an official API.
+This tool uses a reverse-engineered X API, NOT official.

 Risks:
- May break without notice if X changes their API
- No official support or guarantees
- Account restrictions possible if API usage detected
+- May break if X changes API
+- No guarantees or support
+- Possible account restrictions
 - Use at your own risk

-Do you accept these terms and wish to continue?
+Accept terms and continue?
 ```

-Use `AskUserQuestion` tool with options:
- **Yes, I accept** - Continue and save consent
- **No, I decline** - Exit immediately
+Use `AskUserQuestion` with options: "Yes, I accept" | "No, I decline"

-**Step 4**: On acceptance, create consent file:
+**Step 4**: On accept → create consent file:
+```json
+{
+  "version": 1,
+  "accepted": true,
+  "acceptedAt": "<ISO timestamp>",
+  "disclaimerVersion": "1.0"
+}
+```
+
+**Step 5**: On decline → output "User declined. Exiting." and stop.
+
+## Preferences (EXTEND.md)
+
+Use Bash to check EXTEND.md existence (priority order):

 ```bash
-# macOS
-mkdir -p ~/Library/Application\ Support/baoyu-skills/x-to-markdown
-cat > ~/Library/Application\ Support/baoyu-skills/x-to-markdown/consent.json << 'EOF'
-{
-  "version": 1,
-  "accepted": true,
-  "acceptedAt": "<ISO timestamp>",
-  "disclaimerVersion": "1.0"
-}
-EOF
+# Check project-level first
+test -f .baoyu-skills/baoyu-danger-x-to-markdown/EXTEND.md && echo "project"

-# Linux
-mkdir -p ~/.local/share/baoyu-skills/x-to-markdown
-cat > ~/.local/share/baoyu-skills/x-to-markdown/consent.json << 'EOF'
-{
-  "version": 1,
-  "accepted": true,
-  "acceptedAt": "<ISO timestamp>",
-  "disclaimerVersion": "1.0"
-}
-EOF
+# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
+test -f "$HOME/.baoyu-skills/baoyu-danger-x-to-markdown/EXTEND.md" && echo "user"
 ```

-**Step 5**: On decline, output message and stop:
-```
-User declined the disclaimer. Exiting.
-```
+┌────────────────────────────────────────────────────────────┬───────────────────┐
+│                            Path                            │     Location      │
+├────────────────────────────────────────────────────────────┼───────────────────┤
+│ .baoyu-skills/baoyu-danger-x-to-markdown/EXTEND.md         │ Project directory │
+├────────────────────────────────────────────────────────────┼───────────────────┤
+│ $HOME/.baoyu-skills/baoyu-danger-x-to-markdown/EXTEND.md   │ User home         │
+└────────────────────────────────────────────────────────────┴───────────────────┘

---
+┌───────────┬───────────────────────────────────────────────────────────────────────────┐
+│  Result   │                                  Action                                   │
+├───────────┼───────────────────────────────────────────────────────────────────────────┤
+│ Found     │ Read, parse, apply settings                                               │
+├───────────┼───────────────────────────────────────────────────────────────────────────┤
+│ Not found │ Use defaults                                                              │
+└───────────┴───────────────────────────────────────────────────────────────────────────┘
+
+**EXTEND.md Supports**: Default output directory | Output format preferences

 ## Usage

 ```bash
-# Convert tweet (outputs markdown path)
 npx -y bun ${SKILL_DIR}/scripts/main.ts <url>
-
-# Save to specific file
 npx -y bun ${SKILL_DIR}/scripts/main.ts <url> -o output.md
-
-# JSON output
 npx -y bun ${SKILL_DIR}/scripts/main.ts <url> --json
 ```

@@ -122,56 +110,35 @@ npx -y bun ${SKILL_DIR}/scripts/main.ts <url> --json
 | Option | Description |
 |--------|-------------|
 | `<url>` | Tweet or article URL |
-| `-o <path>` | Output path (file or dir) |
-| `--json` | Output as JSON |
+| `-o <path>` | Output path |
+| `--json` | JSON output |
 | `--login` | Refresh cookies only |

-## File Structure
-
-```
-x-to-markdown/
-└── {username}/
-    └── {tweet-id}.md
-```
-
 ## Supported URLs

 - `https://x.com/<user>/status/<id>`
 - `https://twitter.com/<user>/status/<id>`
 - `https://x.com/i/article/<id>`

-## Output Format
+## Output

 ```markdown
 ---
-url: https://x.com/username/status/123
-author: "Display Name (@username)"
+url: https://x.com/user/status/123
+author: "Name (@user)"
 tweet_count: 3
 ---

-Tweet content...
-
---
-
-Thread continuation...
+Content...
 ```

+**File structure**: `x-to-markdown/{username}/{tweet-id}.md`
+
 ## Authentication

-**Option 1**: Environment variables (recommended)
- `X_AUTH_TOKEN` - auth_token cookie
- `X_CT0` - ct0 cookie
-
-**Option 2**: Chrome login (auto if env vars not set)
- First run opens Chrome for login
- Cookies cached locally
+1. **Environment variables** (preferred): `X_AUTH_TOKEN`, `X_CT0`
+2. **Chrome login** (fallback): Auto-opens Chrome, caches cookies locally

 ## Extension Support

-Custom configurations via EXTEND.md.
-
-**Check paths** (priority order):
-1. `.baoyu-skills/baoyu-danger-x-to-markdown/EXTEND.md` (project)
-2. `~/.baoyu-skills/baoyu-danger-x-to-markdown/EXTEND.md` (user)
-
-If found, load before workflow. Extension content overrides defaults.
+Custom configurations via EXTEND.md. See **Preferences** section for paths and supported options.
@@ -0,0 +1,130 @@
+---
+name: baoyu-image-gen
+description: Generates images using official OpenAI and Google APIs via AI SDK. Supports text-to-image, reference images, aspect ratios, and quality presets. Use when user asks to "generate image with API", "use official API for images", "create image with OpenAI/Google", or needs API-based generation instead of browser-based.
+---
+
+# Image Generation (AI SDK)
+
+Official API-based image generation. Supports OpenAI and Google providers.
+
+## Script Directory
+
+**Agent Execution**:
+1. `SKILL_DIR` = this SKILL.md file's directory
+2. Script path = `${SKILL_DIR}/scripts/main.ts`
+
+## Preferences (EXTEND.md)
+
+Use Bash to check EXTEND.md existence (priority order):
+
+```bash
+# Check project-level first
+test -f .baoyu-skills/baoyu-image-gen/EXTEND.md && echo "project"
+
+# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
+test -f "$HOME/.baoyu-skills/baoyu-image-gen/EXTEND.md" && echo "user"
+```
+
+┌──────────────────────────────────────────────────┬───────────────────┐
+│                       Path                       │     Location      │
+├──────────────────────────────────────────────────┼───────────────────┤
+│ .baoyu-skills/baoyu-image-gen/EXTEND.md          │ Project directory │
+├──────────────────────────────────────────────────┼───────────────────┤
+│ $HOME/.baoyu-skills/baoyu-image-gen/EXTEND.md    │ User home         │
+└──────────────────────────────────────────────────┴───────────────────┘
+
+┌───────────┬───────────────────────────────────────────────────────────────────────────┐
+│  Result   │                                  Action                                   │
+├───────────┼───────────────────────────────────────────────────────────────────────────┤
+│ Found     │ Read, parse, apply settings                                               │
+├───────────┼───────────────────────────────────────────────────────────────────────────┤
+│ Not found │ Use defaults                                                              │
+└───────────┴───────────────────────────────────────────────────────────────────────────┘
+
+**EXTEND.md Supports**: Default provider | Default quality | Default aspect ratio
+
+## Usage
+
+```bash
+# Basic
+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 out.png --ar 16:9
+
+# High quality
+npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A cat" --image out.png --quality 2k
+
+# 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
+
+# Specific provider
+npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A cat" --image out.png --provider openai
+```
+
+## 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: 2k) |
+| `--imageSize 1K\|2K\|4K` | Image size for Google (default: from quality) |
+| `--ref <files...>` | Reference images (Google multimodal only) |
+| `--n <count>` | Number of images |
+| `--json` | JSON output |
+
+## Environment Variables
+
+| Variable | Description |
+|----------|-------------|
+| `OPENAI_API_KEY` | OpenAI API key |
+| `GOOGLE_API_KEY` | Google API key |
+| `OPENAI_IMAGE_MODEL` | OpenAI model override |
+| `GOOGLE_IMAGE_MODEL` | Google model override |
+| `OPENAI_BASE_URL` | Custom OpenAI endpoint |
+| `GOOGLE_BASE_URL` | Custom Google endpoint |
+
+**Load Priority**: CLI args > env vars > `<cwd>/.baoyu-skills/.env` > `~/.baoyu-skills/.env`
+
+## Provider Selection
+
+1. `--provider` specified → use it
+2. Only one API key available → use that provider
+3. Both available → default to Google
+
+## Quality Presets
+
+| Preset | Google imageSize | OpenAI Size | Use Case |
+|--------|------------------|-------------|----------|
+| `normal` | 1K | 1024px | Quick previews |
+| `2k` (default) | 2K | 2048px | Covers, illustrations, infographics |
+
+**Google imageSize**: Can be overridden with `--imageSize 1K|2K|4K`
+
+## Aspect Ratios
+
+Supported: `1:1`, `16:9`, `9:16`, `4:3`, `3:4`, `2.35:1`
+
+- Google multimodal: uses `imageConfig.aspectRatio`
+- Google Imagen: uses `aspectRatio` parameter
+- OpenAI: maps to closest supported size
+
+## Error Handling
+
+- Missing API key → error with setup instructions
+- Generation failure → auto-retry once
+- Invalid aspect ratio → warning, proceed with default
+- Reference images with non-multimodal model → warning, ignore refs
+
+## Extension Support
+
+Custom configurations via EXTEND.md. See **Preferences** section for paths and supported options.
@@ -0,0 +1,345 @@
+import path from "node:path";
+import process from "node:process";
+import { homedir } from "node:os";
+import { mkdir, readFile, writeFile } from "node:fs/promises";
+import type { CliArgs, Provider } from "./types";
+
+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: 2k)
+  --imageSize 1K|2K|4K      Image size for Google (default: from quality)
+  --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
+  GEMINI_API_KEY            Gemini API key (alias for 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: "2k",
+    imageSize: null,
+    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 === "--imageSize") {
+      const v = argv[++i]?.toUpperCase();
+      if (v !== "1K" && v !== "2K" && v !== "4K") throw new Error(`Invalid imageSize: ${v}`);
+      out.imageSize = 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 || process.env.GEMINI_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, GEMINI_API_KEY, or OPENAI_API_KEY.\n" +
+      "Create ~/.baoyu-skills/.env or <cwd>/.baoyu-skills/.env with your keys."
+  );
+}
+
+type ProviderModule = {
+  getDefaultModel: () => string;
+  generateImage: (prompt: string, model: string, args: CliArgs) => Promise<Uint8Array>;
+};
+
+async function loadProviderModule(provider: Provider): Promise<ProviderModule> {
+  if (provider === "google") {
+    return (await import("./providers/google")) as ProviderModule;
+  }
+  return (await import("./providers/openai")) as ProviderModule;
+}
+
+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 providerModule = await loadProviderModule(provider);
+  const model = args.model || providerModule.getDefaultModel();
+  const outputPath = normalizeOutputImagePath(args.imagePath);
+
+  let imageData: Uint8Array;
+  let retried = false;
+
+  while (true) {
+    try {
+      imageData = await providerModule.generateImage(prompt, model, 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,229 @@
+import path from "node:path";
+import { readFile } from "node:fs/promises";
+import type { CliArgs } from "../types";
+
+const GOOGLE_MULTIMODAL_MODELS = ["gemini-3-pro-image-preview", "gemini-3-flash-preview"];
+const GOOGLE_IMAGEN_MODELS = ["imagen-3.0-generate-002", "imagen-3.0-generate-001"];
+
+export function getDefaultModel(): string {
+  return process.env.GOOGLE_IMAGE_MODEL || "gemini-3-pro-image-preview";
+}
+
+function normalizeGoogleModelId(model: string): string {
+  return model.startsWith("models/") ? model.slice("models/".length) : model;
+}
+
+function isGoogleMultimodal(model: string): boolean {
+  const normalized = normalizeGoogleModelId(model);
+  return GOOGLE_MULTIMODAL_MODELS.some((m) => normalized.includes(m));
+}
+
+function isGoogleImagen(model: string): boolean {
+  const normalized = normalizeGoogleModelId(model);
+  return GOOGLE_IMAGEN_MODELS.some((m) => normalized.includes(m));
+}
+
+function getGoogleApiKey(): string | null {
+  return process.env.GOOGLE_API_KEY || process.env.GEMINI_API_KEY || null;
+}
+
+function getGoogleImageSize(args: CliArgs): "1K" | "2K" | "4K" {
+  if (args.imageSize) return args.imageSize as "1K" | "2K" | "4K";
+  return args.quality === "2k" ? "2K" : "1K";
+}
+
+function getGoogleBaseUrl(): string {
+  const base = process.env.GOOGLE_BASE_URL || "https://generativelanguage.googleapis.com";
+  return base.replace(/\/+$/g, "");
+}
+
+function buildGoogleUrl(pathname: string): string {
+  const base = getGoogleBaseUrl();
+  const cleanedPath = pathname.replace(/^\/+/g, "");
+  if (base.endsWith("/v1beta")) return `${base}/${cleanedPath}`;
+  return `${base}/v1beta/${cleanedPath}`;
+}
+
+function toModelPath(model: string): string {
+  const modelId = normalizeGoogleModelId(model);
+  return `models/${modelId}`;
+}
+
+async function postGoogleJson<T>(pathname: string, body: unknown): Promise<T> {
+  const apiKey = getGoogleApiKey();
+  if (!apiKey) throw new Error("GOOGLE_API_KEY or GEMINI_API_KEY is required");
+
+  const res = await fetch(buildGoogleUrl(pathname), {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "x-goog-api-key": apiKey,
+    },
+    body: JSON.stringify(body),
+  });
+
+  if (!res.ok) {
+    const err = await res.text();
+    throw new Error(`Google API error (${res.status}): ${err}`);
+  }
+
+  return (await res.json()) as T;
+}
+
+function buildPromptWithAspect(prompt: string, ar: string | null, quality: CliArgs["quality"]): string {
+  let result = prompt;
+  if (ar) {
+    result += ` Aspect ratio: ${ar}.`;
+  }
+  if (quality === "2k") {
+    result += " High resolution 2048px.";
+  }
+  return result;
+}
+
+function addAspectRatioToPrompt(prompt: string, ar: string | null): string {
+  if (!ar) return prompt;
+  return `${prompt} Aspect ratio: ${ar}.`;
+}
+
+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 };
+}
+
+function extractInlineImageData(response: {
+  candidates?: Array<{ content?: { parts?: Array<{ inlineData?: { data?: string } }> } }>;
+}): string | null {
+  for (const candidate of response.candidates || []) {
+    for (const part of candidate.content?.parts || []) {
+      const data = part.inlineData?.data;
+      if (typeof data === "string" && data.length > 0) return data;
+    }
+  }
+  return null;
+}
+
+function extractPredictedImageData(response: {
+  predictions?: Array<any>;
+  generatedImages?: Array<any>;
+}): string | null {
+  const candidates = [...(response.predictions || []), ...(response.generatedImages || [])];
+  for (const candidate of candidates) {
+    if (!candidate || typeof candidate !== "object") continue;
+    if (typeof candidate.imageBytes === "string") return candidate.imageBytes;
+    if (typeof candidate.bytesBase64Encoded === "string") return candidate.bytesBase64Encoded;
+    if (typeof candidate.data === "string") return candidate.data;
+    const image = candidate.image;
+    if (image && typeof image === "object") {
+      if (typeof image.imageBytes === "string") return image.imageBytes;
+      if (typeof image.bytesBase64Encoded === "string") return image.bytesBase64Encoded;
+      if (typeof image.data === "string") return image.data;
+    }
+  }
+  return null;
+}
+
+async function generateWithGemini(
+  prompt: string,
+  model: string,
+  args: CliArgs
+): Promise<Uint8Array> {
+  const promptWithAspect = addAspectRatioToPrompt(prompt, args.aspectRatio);
+  const parts: Array<{ text?: string; inlineData?: { data: string; mimeType: string } }> = [];
+  for (const refPath of args.referenceImages) {
+    const { data, mimeType } = await readImageAsBase64(refPath);
+    parts.push({ inlineData: { data, mimeType } });
+  }
+  parts.push({ text: promptWithAspect });
+
+  const imageConfig: { imageSize: "1K" | "2K" | "4K" } = {
+    imageSize: getGoogleImageSize(args),
+  };
+
+  console.log("Generating image with Gemini...", imageConfig);
+  const response = await postGoogleJson<{
+    candidates?: Array<{ content?: { parts?: Array<{ inlineData?: { data?: string } }> } }>;
+  }>(`${toModelPath(model)}:generateContent`, {
+    contents: [
+      {
+        role: "user",
+        parts,
+      },
+    ],
+    generationConfig: {
+      responseModalities: ["IMAGE"],
+      imageConfig,
+    },
+  });
+  console.log("Generation completed.");
+
+  const imageData = extractInlineImageData(response);
+  if (imageData) return Uint8Array.from(Buffer.from(imageData, "base64"));
+
+  throw new Error("No image in response");
+}
+
+async function generateWithImagen(
+  prompt: string,
+  model: string,
+  args: CliArgs
+): Promise<Uint8Array> {
+  const fullPrompt = buildPromptWithAspect(prompt, args.aspectRatio, args.quality);
+  const imageSize = getGoogleImageSize(args);
+  if (imageSize === "4K") {
+    console.error("Warning: Imagen models do not support 4K imageSize, using 2K instead.");
+  }
+
+  const parameters: Record<string, unknown> = {
+    sampleCount: args.n,
+  };
+  if (args.aspectRatio) {
+    parameters.aspectRatio = args.aspectRatio;
+  }
+  if (imageSize === "1K" || imageSize === "2K") {
+    parameters.imageSize = imageSize;
+  } else {
+    parameters.imageSize = "2K";
+  }
+
+  const response = await postGoogleJson<{
+    predictions?: Array<any>;
+    generatedImages?: Array<any>;
+  }>(`${toModelPath(model)}:predict`, {
+    instances: [
+      {
+        prompt: fullPrompt,
+      },
+    ],
+    parameters,
+  });
+
+  const imageData = extractPredictedImageData(response);
+  if (imageData) return Uint8Array.from(Buffer.from(imageData, "base64"));
+
+  throw new Error("No image in response");
+}
+
+export async function generateImage(
+  prompt: string,
+  model: string,
+  args: CliArgs
+): Promise<Uint8Array> {
+  if (isGoogleImagen(model)) {
+    if (args.referenceImages.length > 0) {
+      console.error("Warning: Reference images not supported with Imagen models, ignoring.");
+    }
+    return generateWithImagen(prompt, model, args);
+  }
+
+  if (!isGoogleMultimodal(model) && args.referenceImages.length > 0) {
+    console.error("Warning: Reference images are only supported with Gemini multimodal models.");
+  }
+
+  return generateWithGemini(prompt, model, args);
+}
@@ -0,0 +1,114 @@
+import type { CliArgs } from "../types";
+
+export function getDefaultModel(): string {
+  return process.env.OPENAI_IMAGE_MODEL || "gpt-image-1.5";
+}
+
+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 };
+}
+
+type SizeMapping = {
+  square: string;
+  landscape: string;
+  portrait: string;
+};
+
+function getOpenAISize(
+  model: string,
+  ar: string | null,
+  quality: CliArgs["quality"]
+): string {
+  const isDalle3 = model.includes("dall-e-3");
+  const isDalle2 = model.includes("dall-e-2");
+
+  if (isDalle2) {
+    return "1024x1024";
+  }
+
+  const sizes: SizeMapping = isDalle3
+    ? {
+        square: "1024x1024",
+        landscape: "1792x1024",
+        portrait: "1024x1792",
+      }
+    : {
+        square: "1024x1024",
+        landscape: "1536x1024",
+        portrait: "1024x1536",
+      };
+
+  if (!ar) return sizes.square;
+
+  const parsed = parseAspectRatio(ar);
+  if (!parsed) return sizes.square;
+
+  const ratio = parsed.width / parsed.height;
+
+  if (Math.abs(ratio - 1) < 0.1) return sizes.square;
+  if (ratio > 1.5) return sizes.landscape;
+  if (ratio < 0.67) return sizes.portrait;
+  return sizes.square;
+}
+
+export async function generateImage(
+  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");
+
+  if (args.referenceImages.length > 0) {
+    console.error("Warning: Reference images not supported with OpenAI, ignoring.");
+  }
+
+  const size = args.size || getOpenAISize(model, 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");
+}
@@ -0,0 +1,18 @@
+export type Provider = "google" | "openai";
+export type Quality = "normal" | "2k";
+
+export type CliArgs = {
+  prompt: string | null;
+  promptFiles: string[];
+  imagePath: string | null;
+  provider: Provider | null;
+  model: string | null;
+  aspectRatio: string | null;
+  size: string | null;
+  quality: Quality;
+  imageSize: string | null;
+  referenceImages: string[];
+  n: number;
+  json: boolean;
+  help: boolean;
+};
@@ -1,74 +1,47 @@
 ---
 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".
+description: Generates 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", "信息图", "visual summary", or "可视化".
 ---

 # Infographic Generator

-Generate professional infographics with two dimensions: layout (information structure) and style (visual aesthetics).
+Two dimensions: **layout** (information structure) × **style** (visual aesthetics). Freely combine any layout with any style.

 ## 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]
+/baoyu-infographic path/to/content.md --layout hierarchical-layers --style technical-schematic
+/baoyu-infographic path/to/content.md --aspect portrait --lang zh
+/baoyu-infographic  # then 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.
+| Option | Values |
+|--------|--------|
+| `--layout` | 20 options (see Layout Gallery), default: bento-grid |
+| `--style` | 17 options (see Style Gallery), default: craft-handmade |
+| `--aspect` | landscape (16:9), portrait (9:16), square (1:1) |
+| `--lang` | en, zh, ja, etc. |

 ## Layout Gallery

 | Layout | Best For |
 |--------|----------|
-| `linear-progression` | Timelines, step-by-step processes, tutorials |
+| `linear-progression` | Timelines, processes, tutorials |
 | `binary-comparison` | A vs B, before-after, pros-cons |
 | `comparison-matrix` | Multi-factor comparisons |
-| `hierarchical-layers` | Pyramids, concentric circles, priority levels |
+| `hierarchical-layers` | Pyramids, priority levels |
 | `tree-branching` | Categories, taxonomies |
 | `hub-spoke` | Central concept with related items |
-| `structural-breakdown` | Exploded views, cross-sections, part labeling |
+| `structural-breakdown` | Exploded views, cross-sections |
 | `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 |
+| `bridge` | Problem-solution |
+| `funnel` | Conversion, filtering |
+| `isometric-map` | Spatial relationships |
+| `dashboard` | Metrics, KPIs |
 | `periodic-table` | Categorized collections |
 | `comic-strip` | Narratives, sequences |
 | `story-mountain` | Plot structure, tension arcs |
@@ -77,415 +50,170 @@ Layout × Style can be freely combined. Example: `--layout hierarchical-layers -
 | `winding-roadmap` | Journey, milestones |
 | `circular-flow` | Cycles, recurring processes |

-Detailed layout definitions: `references/layouts/<layout>.md`
+Full 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 |
+| `craft-handmade` | Hand-drawn, paper craft (default) |
+| `claymation` | 3D clay figures, stop-motion |
+| `kawaii` | Japanese cute, pastels |
+| `storybook-watercolor` | Soft painted, whimsical |
+| `chalkboard` | Chalk on black board |
+| `cyberpunk-neon` | Neon glow, futuristic |
+| `bold-graphic` | Comic style, halftone |
+| `aged-academia` | Vintage science, sepia |
+| `corporate-memphis` | Flat vector, vibrant |
+| `technical-schematic` | Blueprint, engineering |
+| `origami` | Folded paper, geometric |
+| `pixel-art` | Retro 8-bit |
+| `ui-wireframe` | Grayscale interface mockup |
+| `subway-map` | Transit diagram |
+| `ikea-manual` | Minimal line art |
+| `knolling` | Organized flat-lay |
+| `lego-brick` | Toy brick construction |

-Detailed style definitions: `references/styles/<style>.md`
+Full definitions: `references/styles/<style>.md`

 ## Recommended Combinations

-Based on content analysis, the system recommends 3-5 layout×style combinations:
-
-| Content Type | Recommended Combination |
-|--------------|------------------------|
+| Content Type | Layout + Style |
+|--------------|----------------|
 | 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` |
+| Step-by-step | `linear-progression` + `ikea-manual` |
+| A vs B | `binary-comparison` + `corporate-memphis` |
+| Hierarchy | `hierarchical-layers` + `craft-handmade` |
+| Overlap | `venn-diagram` + `craft-handmade` |
+| Conversion | `funnel` + `corporate-memphis` |
+| Cycles | `circular-flow` + `craft-handmade` |
+| Technical | `structural-breakdown` + `technical-schematic` |
+| Metrics | `dashboard` + `corporate-memphis` |
+| Educational | `bento-grid` + `chalkboard` |
+| Journey | `winding-roadmap` + `storybook-watercolor` |
+| Categories | `periodic-table` + `bold-graphic` |

-**Default combination**: `bento-grid` + `craft-handmade`
+Default: `bento-grid` + `craft-handmade`

-## File Structure
-
-Each session creates an independent directory:
+## Output Structure

 ```
 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
+├── source-{slug}.{ext}
+├── analysis.md
+├── structured-content.md
+├── prompts/infographic.md
+└── infographic.png
 ```

-**Slug Generation**:
-1. Extract main topic from content (2-4 words, kebab-case)
-2. Example: "Machine Learning Basics" → `ml-basics`
+Slug: 2-4 words kebab-case from topic. Conflict: append `-YYYYMMDD-HHMMSS`.

-**Conflict Resolution**:
-If `infographic/{topic-slug}/` already exists:
- Append timestamp: `{topic-slug}-YYYYMMDD-HHMMSS`
- Example: `ml-basics` exists → `ml-basics-20260120-103052`
+## Core Principles

-## 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
+- Preserve all source data **verbatim**—no summarization or rephrasing
+- Define learning objectives before structuring content
+- Structure for visual communication (headlines, labels, visual elements)

 ## Workflow

-### Step 1: Analyze Content → `analysis.md`
+### Step 1: Setup & Analyze

-Read source content and perform deep instructional analysis.
+**1.1 Load Preferences (EXTEND.md)**

-**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
+Use Bash to check EXTEND.md existence (priority order):

-2. **Deep reading**:
-   - Read the entire document thoroughly
-   - Develop deep understanding before proceeding
-   - Identify the core message and purpose
+```bash
+# Check project-level first
+test -f .baoyu-skills/baoyu-infographic/EXTEND.md && echo "project"

-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]
+# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
+test -f "$HOME/.baoyu-skills/baoyu-infographic/EXTEND.md" && echo "user"
 ```

+┌────────────────────────────────────────────────────┬───────────────────┐
+│                        Path                        │     Location      │
+├────────────────────────────────────────────────────┼───────────────────┤
+│ .baoyu-skills/baoyu-infographic/EXTEND.md          │ Project directory │
+├────────────────────────────────────────────────────┼───────────────────┤
+│ $HOME/.baoyu-skills/baoyu-infographic/EXTEND.md    │ User home         │
+└────────────────────────────────────────────────────┴───────────────────┘
+
+┌───────────┬───────────────────────────────────────────────────────────────────────────┐
+│  Result   │                                  Action                                   │
+├───────────┼───────────────────────────────────────────────────────────────────────────┤
+│ Found     │ Read, parse, display summary                                              │
+├───────────┼───────────────────────────────────────────────────────────────────────────┤
+│ Not found │ Ask user with AskUserQuestion (see references/config/first-time-setup.md) │
+└───────────┴───────────────────────────────────────────────────────────────────────────┘
+
+**EXTEND.md Supports**: Preferred layout/style | Default aspect ratio | Custom style definitions | Language preference
+
+Schema: `references/config/preferences-schema.md`
+
+**1.2 Analyze Content → `analysis.md`**
+
+1. Save source content (file path or paste → `source.md`)
+2. Analyze: topic, data type, complexity, tone, audience
+3. Detect source language and user language
+4. Extract design instructions from user input
+5. Save analysis
+
+See `references/analysis-framework.md` for detailed format.
+
 ### Step 2: Generate Structured Content → `structured-content.md`

-Transform analyzed content into a structured format for the infographic designer.
+Transform content into infographic structure:
+1. Title and learning objectives
+2. Sections with: key concept, content (verbatim), visual element, text labels
+3. Data points (all statistics/quotes copied exactly)
+4. Design instructions from user

-**Instructional Design Process**:
+**Rules**: Markdown only. No new information. All data verbatim.

-1. **Create high-level outline**:
-   - Title that captures the essence
-   - List all main learning objectives
-   - Identify the logical flow
+See `references/structured-content-template.md` for detailed format.

-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
+### Step 3: Recommend Combinations

-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]
-```
+Recommend 3-5 layout×style combinations based on:
+- Data structure → matching layout
+- Content tone → matching style
+- Audience expectations
+- User design instructions

 ### 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
+Present all options in single confirmation:
+1. **Combination** (always): 3+ options with rationale
+2. **Aspect** (always): landscape/portrait/square
+3. **Language** (only if source ≠ user language): which language for 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]
-```
+Combine:
+1. Layout definition from `references/layouts/<layout>.md`
+2. Style definition from `references/styles/<style>.md`
+3. Base template from `references/base-prompt.md`
+4. Structured content from Step 2
+5. All text in confirmed language

 ### 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
+1. Select available image generation skill (ask user if multiple)
+2. Call with prompt file and output path
+3. On failure, auto-retry once

 ### 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
+Report: topic, layout, style, aspect, language, output path, files created.

 ## 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**
+- `references/analysis-framework.md` - Analysis methodology
+- `references/structured-content-template.md` - Content format
+- `references/base-prompt.md` - Prompt template
+- `references/layouts/<layout>.md` - 20 layout definitions
+- `references/styles/<style>.md` - 17 style definitions

 ## 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.
+Custom configurations via EXTEND.md. See **Step 1.1** for paths and supported options.
@@ -36,6 +36,6 @@ Modular grid layout with varied cell sizes, like a bento box.

 ## Recommended Pairings

- `cartoon-hand-drawn`: Friendly overviews (default)
+- `craft-handmade`: Friendly overviews (default)
 - `corporate-memphis`: Business summaries
 - `pixel-art`: Retro feature grids
@@ -21,8 +21,16 @@ Hand-drawn and paper craft aesthetic with warm, organic feel.
 - Organic, slightly imperfect shapes
 - Layered depth with shadows (paper variant)
 - Simple cartoon elements and icons
+- Character illustrations (people, personalities in cartoon form)
 - Ample whitespace, clean composition
 - Keywords and core concepts highlighted
+- **Strictly hand-drawn—no realistic or photographic elements**
+
+## Style Enforcement
+
+- All imagery must maintain cartoon/illustrated aesthetic
+- Replace real photos or realistic figures with hand-drawn equivalents
+- Maintain consistent line weight and illustration style throughout

 ## Typography

@@ -1,84 +1,94 @@
 ---
 name: baoyu-post-to-wechat
-description: Post content to WeChat Official Account (微信公众号). Supports both article posting (文章) and image-text posting (图文).
+description: Posts content to WeChat Official Account (微信公众号) via Chrome CDP automation. Supports article posting (文章) with full markdown formatting and image-text posting (图文) with multiple images. Use when user mentions "发布公众号", "post to wechat", "微信公众号", or "图文/文章".
 ---

-# Post to WeChat Official Account (微信公众号)
-
-Post content to WeChat Official Account using Chrome CDP automation.
+# Post to WeChat Official Account

 ## Script Directory

-**Important**: All scripts are located in the `scripts/` subdirectory of this skill.
+**Agent Execution**: Determine this SKILL.md directory as `SKILL_DIR`, then use `${SKILL_DIR}/scripts/<name>.ts`.

-**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/wechat-browser.ts` | Image-text posts (图文) |
-| `scripts/wechat-article.ts` | Full article posting (文章) |
-| `scripts/md-to-wechat.ts` | Markdown → WeChat HTML conversion |
-| `scripts/copy-to-clipboard.ts` | Copy content to clipboard |
-| `scripts/paste-from-clipboard.ts` | Send real paste keystroke |
+| `scripts/wechat-article.ts` | Article posting (文章) |
+| `scripts/md-to-wechat.ts` | Markdown → WeChat HTML |

-## Quick Usage
+## Preferences (EXTEND.md)

-### Image-Text (图文) - Multiple images with title/content
+Use Bash to check EXTEND.md existence (priority order):

 ```bash
-# From markdown file and image directory
-npx -y bun ${SKILL_DIR}/scripts/wechat-browser.ts --markdown article.md --images ./images/
+# Check project-level first
+test -f .baoyu-skills/baoyu-post-to-wechat/EXTEND.md && echo "project"

-# With explicit parameters
-npx -y bun ${SKILL_DIR}/scripts/wechat-browser.ts --title "标题" --content "内容" --image img1.png --image img2.png --submit
+# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
+test -f "$HOME/.baoyu-skills/baoyu-post-to-wechat/EXTEND.md" && echo "user"
 ```

-### Article (文章) - Full markdown with formatting
+┌────────────────────────────────────────────────────────┬───────────────────┐
+│                          Path                          │     Location      │
+├────────────────────────────────────────────────────────┼───────────────────┤
+│ .baoyu-skills/baoyu-post-to-wechat/EXTEND.md           │ Project directory │
+├────────────────────────────────────────────────────────┼───────────────────┤
+│ $HOME/.baoyu-skills/baoyu-post-to-wechat/EXTEND.md     │ User home         │
+└────────────────────────────────────────────────────────┴───────────────────┘
+
+┌───────────┬───────────────────────────────────────────────────────────────────────────┐
+│  Result   │                                  Action                                   │
+├───────────┼───────────────────────────────────────────────────────────────────────────┤
+│ Found     │ Read, parse, apply settings                                               │
+├───────────┼───────────────────────────────────────────────────────────────────────────┤
+│ Not found │ Use defaults                                                              │
+└───────────┴───────────────────────────────────────────────────────────────────────────┘
+
+**EXTEND.md Supports**: Default theme | Auto-submit preference | Chrome profile path
+
+## Usage
+
+### Image-Text (图文)
+
+```bash
+npx -y bun ${SKILL_DIR}/scripts/wechat-browser.ts --markdown article.md --images ./images/
+npx -y bun ${SKILL_DIR}/scripts/wechat-browser.ts --title "标题" --content "内容" --image img.png --submit
+```
+
+### Article (文章)

 ```bash
-# Post markdown article
 npx -y bun ${SKILL_DIR}/scripts/wechat-article.ts --markdown article.md --theme grace
 ```

-> **Note**: `${SKILL_DIR}` represents this skill's installation directory. Agent replaces with actual path at runtime.
+## Detailed References

-## References
+| Topic | Reference |
+|-------|-----------|
+| Image-text parameters, auto-compression | [references/image-text-posting.md](references/image-text-posting.md) |
+| Article themes, image handling | [references/article-posting.md](references/article-posting.md) |

- **Image-Text Posting**: See `references/image-text-posting.md` for detailed image-text posting guide
- **Article Posting**: See `references/article-posting.md` for detailed article posting guide
-
-## Prerequisites
-
- Google Chrome installed
- `bun` runtime (via `npx -y bun`)
- First run: log in to WeChat Official Account in the opened browser window
-
-## Features
+## Feature Comparison

 | Feature | Image-Text | Article |
 |---------|------------|---------|
 | Multiple images | ✓ (up to 9) | ✓ (inline) |
 | Markdown support | Title/content extraction | Full formatting |
-| Auto title compression | ✓ (to 20 chars) | ✗ |
-| Content compression | ✓ (to 1000 chars) | ✗ |
+| Auto compression | ✓ (title: 20, content: 1000 chars) | ✗ |
 | Themes | ✗ | ✓ (default, grace, simple) |

+## Prerequisites
+
+- Google Chrome
+- First run: log in to WeChat Official Account (session preserved)
+
 ## Troubleshooting

- **Not logged in**: First run opens browser - scan QR code to log in, session is preserved
- **Chrome not found**: Set `WECHAT_BROWSER_CHROME_PATH` environment variable
- **Paste fails**: Check system clipboard permissions
+| Issue | Solution |
+|-------|----------|
+| Not logged in | First run opens browser - scan QR to log in |
+| Chrome not found | Set `WECHAT_BROWSER_CHROME_PATH` env var |
+| Paste fails | Check system clipboard permissions |

 ## Extension Support

-Custom configurations via EXTEND.md.
-
-**Check paths** (priority order):
-1. `.baoyu-skills/baoyu-post-to-wechat/EXTEND.md` (project)
-2. `~/.baoyu-skills/baoyu-post-to-wechat/EXTEND.md` (user)
-
-If found, load before workflow. Extension content overrides defaults.
+Custom configurations via EXTEND.md. See **Preferences** section for paths and supported options.
@@ -1,11 +1,11 @@
 ---
 name: baoyu-post-to-x
-description: Post content and articles to X (Twitter). Supports regular posts with images and X Articles (long-form Markdown). Uses real Chrome with CDP to bypass anti-automation.
+description: Posts content and articles to X (Twitter). Supports regular posts with images/videos and X Articles (long-form Markdown). Uses real Chrome with CDP to bypass anti-automation. Use when user asks to "post to X", "tweet", "publish to Twitter", or "share on X".
 ---

 # Post to X (Twitter)

-Post content, images, and long-form articles to X using real Chrome browser (bypasses anti-bot detection).
+Posts text, images, videos, and long-form articles to X via real Chrome browser (bypasses anti-bot detection).

 ## Script Directory

@@ -20,16 +20,48 @@ Post content, images, and long-form articles to X using real Chrome browser (byp
 | Script | Purpose |
 |--------|---------|
 | `scripts/x-browser.ts` | Regular posts (text + images) |
+| `scripts/x-video.ts` | Video posts (text + video) |
+| `scripts/x-quote.ts` | Quote tweet with comment |
 | `scripts/x-article.ts` | Long-form article publishing (Markdown) |
 | `scripts/md-to-html.ts` | Markdown → HTML conversion |
 | `scripts/copy-to-clipboard.ts` | Copy content to clipboard |
 | `scripts/paste-from-clipboard.ts` | Send real paste keystroke |

+## Preferences (EXTEND.md)
+
+Use Bash to check EXTEND.md existence (priority order):
+
+```bash
+# Check project-level first
+test -f .baoyu-skills/baoyu-post-to-x/EXTEND.md && echo "project"
+
+# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
+test -f "$HOME/.baoyu-skills/baoyu-post-to-x/EXTEND.md" && echo "user"
+```
+
+┌──────────────────────────────────────────────────┬───────────────────┐
+│                       Path                       │     Location      │
+├──────────────────────────────────────────────────┼───────────────────┤
+│ .baoyu-skills/baoyu-post-to-x/EXTEND.md          │ Project directory │
+├──────────────────────────────────────────────────┼───────────────────┤
+│ $HOME/.baoyu-skills/baoyu-post-to-x/EXTEND.md    │ User home         │
+└──────────────────────────────────────────────────┴───────────────────┘
+
+┌───────────┬───────────────────────────────────────────────────────────────────────────┐
+│  Result   │                                  Action                                   │
+├───────────┼───────────────────────────────────────────────────────────────────────────┤
+│ Found     │ Read, parse, apply settings                                               │
+├───────────┼───────────────────────────────────────────────────────────────────────────┤
+│ Not found │ Use defaults                                                              │
+└───────────┴───────────────────────────────────────────────────────────────────────────┘
+
+**EXTEND.md Supports**: Default Chrome profile | Auto-submit preference
+
 ## Prerequisites

- Google Chrome or Chromium installed
- `bun` installed (for running scripts)
- First run: log in to X in the opened browser window
+- Google Chrome or Chromium
+- `bun` runtime
+- First run: log in to X manually (session saved)

 ## References

@@ -43,22 +75,57 @@ Post content, images, and long-form articles to X using real Chrome browser (byp
 Text + up to 4 images.

 ```bash
-# Preview mode (doesn't post)
-npx -y bun ${SKILL_DIR}/scripts/x-browser.ts "Hello from Claude!" --image ./screenshot.png
-
-# Actually post
-npx -y bun ${SKILL_DIR}/scripts/x-browser.ts "Hello!" --image ./photo.png --submit
+npx -y bun ${SKILL_DIR}/scripts/x-browser.ts "Hello!" --image ./photo.png          # Preview
+npx -y bun ${SKILL_DIR}/scripts/x-browser.ts "Hello!" --image ./photo.png --submit  # Post
 ```

-> **Note**: `${SKILL_DIR}` represents this skill's installation directory. Agent replaces with actual path at runtime.
-
 **Parameters**:
 | Parameter | Description |
 |-----------|-------------|
-| `<text>` | Post content (positional argument) |
-| `--image <path>` | Image file path (can be repeated, max 4) |
-| `--submit` | Actually post (default: preview only) |
-| `--profile <dir>` | Custom Chrome profile directory |
+| `<text>` | Post content (positional) |
+| `--image <path>` | Image file (repeatable, max 4) |
+| `--submit` | Post (default: preview) |
+| `--profile <dir>` | Custom Chrome profile |
+
+---
+
+## Video Posts
+
+Text + video file.
+
+```bash
+npx -y bun ${SKILL_DIR}/scripts/x-video.ts "Check this out!" --video ./clip.mp4          # Preview
+npx -y bun ${SKILL_DIR}/scripts/x-video.ts "Amazing content" --video ./demo.mp4 --submit  # Post
+```
+
+**Parameters**:
+| Parameter | Description |
+|-----------|-------------|
+| `<text>` | Post content (positional) |
+| `--video <path>` | Video file (MP4, MOV, WebM) |
+| `--submit` | Post (default: preview) |
+| `--profile <dir>` | Custom Chrome profile |
+
+**Limits**: Regular 140s max, Premium 60min. Processing: 30-60s.
+
+---
+
+## Quote Tweets
+
+Quote an existing tweet with comment.
+
+```bash
+npx -y bun ${SKILL_DIR}/scripts/x-quote.ts https://x.com/user/status/123 "Great insight!"          # Preview
+npx -y bun ${SKILL_DIR}/scripts/x-quote.ts https://x.com/user/status/123 "I agree!" --submit       # Post
+```
+
+**Parameters**:
+| Parameter | Description |
+|-----------|-------------|
+| `<tweet-url>` | URL to quote (positional) |
+| `<comment>` | Comment text (positional, optional) |
+| `--submit` | Post (default: preview) |
+| `--profile <dir>` | Custom Chrome profile |

 ---

@@ -67,47 +134,29 @@ npx -y bun ${SKILL_DIR}/scripts/x-browser.ts "Hello!" --image ./photo.png --subm
 Long-form Markdown articles (requires X Premium).

 ```bash
-# Preview mode
-npx -y bun ${SKILL_DIR}/scripts/x-article.ts article.md
-
-# With cover image
-npx -y bun ${SKILL_DIR}/scripts/x-article.ts article.md --cover ./cover.jpg
-
-# Publish
-npx -y bun ${SKILL_DIR}/scripts/x-article.ts article.md --submit
+npx -y bun ${SKILL_DIR}/scripts/x-article.ts article.md                        # Preview
+npx -y bun ${SKILL_DIR}/scripts/x-article.ts article.md --cover ./cover.jpg    # With cover
+npx -y bun ${SKILL_DIR}/scripts/x-article.ts article.md --submit               # Publish
 ```

 **Parameters**:
 | Parameter | Description |
 |-----------|-------------|
-| `<markdown>` | Markdown file path (positional argument) |
-| `--cover <path>` | Cover image path |
-| `--title <text>` | Override article title |
-| `--submit` | Actually publish (default: preview only) |
+| `<markdown>` | Markdown file (positional) |
+| `--cover <path>` | Cover image |
+| `--title <text>` | Override title |
+| `--submit` | Publish (default: preview) |

-**Frontmatter** (optional):
-```yaml
---
-title: My Article Title
-cover_image: /path/to/cover.jpg
---
-```
+**Frontmatter**: `title`, `cover_image` supported in YAML front matter.

 ---

 ## Notes

- First run requires manual login (session is saved)
- Always preview before using `--submit`
- Browser closes automatically after operation
- Supports macOS, Linux, and Windows
+- First run: manual login required (session persists)
+- Always preview before `--submit`
+- Cross-platform: macOS, Linux, Windows

 ## Extension Support

-Custom configurations via EXTEND.md.
-
-**Check paths** (priority order):
-1. `.baoyu-skills/baoyu-post-to-x/EXTEND.md` (project)
-2. `~/.baoyu-skills/baoyu-post-to-x/EXTEND.md` (user)
-
-If found, load before workflow. Extension content overrides defaults.
+Custom configurations via EXTEND.md. See **Preferences** section for paths and supported options.
@@ -1,12 +1,23 @@
-import { spawn, spawnSync } from 'node:child_process';
+import { spawn } from 'node:child_process';
 import fs from 'node:fs';
 import { mkdir, writeFile } from 'node:fs/promises';
-import net from 'node:net';
 import os from 'node:os';
 import path from 'node:path';
 import process from 'node:process';

 import { parseMarkdown } from './md-to-html.js';
+import {
+  CHROME_CANDIDATES_BASIC,
+  CdpConnection,
+  copyHtmlToClipboard,
+  copyImageToClipboard,
+  findChromeExecutable,
+  getDefaultProfileDir,
+  getFreePort,
+  pasteFromClipboard,
+  sleep,
+  waitForChromeDebugPort,
+} from './x-utils.js';

 const X_ARTICLES_URL = 'https://x.com/compose/articles';

@@ -41,163 +52,6 @@ const I18N_SELECTORS = {
  ],
 };

-function sleep(ms: number): Promise<void> {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
-
-async function getFreePort(): Promise<number> {
-  return new Promise((resolve, reject) => {
-    const server = net.createServer();
-    server.unref();
-    server.on('error', reject);
-    server.listen(0, '127.0.0.1', () => {
-      const address = server.address();
-      if (!address || typeof address === 'string') {
-        server.close(() => reject(new Error('Unable to allocate port')));
-        return;
-      }
-      server.close((err) => (err ? reject(err) : resolve(address.port)));
-    });
-  });
-}
-
-function findChromeExecutable(): string | undefined {
-  const override = process.env.X_BROWSER_CHROME_PATH?.trim();
-  if (override && fs.existsSync(override)) return override;
-
-  const candidates: string[] = [];
-  switch (process.platform) {
-    case 'darwin':
-      candidates.push(
-        '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
-        '/Applications/Google Chrome Canary.app/Contents/MacOS/Google Chrome Canary',
-        '/Applications/Chromium.app/Contents/MacOS/Chromium',
-      );
-      break;
-    case 'win32':
-      candidates.push(
-        'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe',
-        'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe',
-      );
-      break;
-    default:
-      candidates.push('/usr/bin/google-chrome', '/usr/bin/chromium', '/usr/bin/chromium-browser');
-      break;
-  }
-
-  for (const p of candidates) if (fs.existsSync(p)) return p;
-  return undefined;
-}
-
-function getDefaultProfileDir(): string {
-  const base = process.env.XDG_DATA_HOME || path.join(os.homedir(), '.local', 'share');
-  return path.join(base, 'x-browser-profile');
-}
-
-async function fetchJson<T>(url: string): Promise<T> {
-  const res = await fetch(url, { redirect: 'follow' });
-  if (!res.ok) throw new Error(`Request failed: ${res.status}`);
-  return res.json() as Promise<T>;
-}
-
-async function waitForChromeDebugPort(port: number, timeoutMs: number): Promise<string> {
-  const start = Date.now();
-  while (Date.now() - start < timeoutMs) {
-    try {
-      const version = await fetchJson<{ webSocketDebuggerUrl?: string }>(`http://127.0.0.1:${port}/json/version`);
-      if (version.webSocketDebuggerUrl) return version.webSocketDebuggerUrl;
-    } catch {}
-    await sleep(200);
-  }
-  throw new Error('Chrome debug port not ready');
-}
-
-class CdpConnection {
-  private ws: WebSocket;
-  private nextId = 0;
-  private pending = new Map<number, { resolve: (v: unknown) => void; reject: (e: Error) => void; timer: ReturnType<typeof setTimeout> | null }>();
-
-  private constructor(ws: WebSocket) {
-    this.ws = ws;
-    this.ws.addEventListener('message', (event) => {
-      try {
-        const data = typeof event.data === 'string' ? event.data : new TextDecoder().decode(event.data as ArrayBuffer);
-        const msg = JSON.parse(data) as { id?: number; result?: unknown; error?: { message?: string } };
-        if (msg.id) {
-          const pending = this.pending.get(msg.id);
-          if (pending) {
-            this.pending.delete(msg.id);
-            if (pending.timer) clearTimeout(pending.timer);
-            if (msg.error?.message) pending.reject(new Error(msg.error.message));
-            else pending.resolve(msg.result);
-          }
-        }
-      } catch {}
-    });
-    this.ws.addEventListener('close', () => {
-      for (const [id, pending] of this.pending.entries()) {
-        this.pending.delete(id);
-        if (pending.timer) clearTimeout(pending.timer);
-        pending.reject(new Error('CDP connection closed'));
-      }
-    });
-  }
-
-  static async connect(url: string, timeoutMs: number): Promise<CdpConnection> {
-    const ws = new WebSocket(url);
-    await new Promise<void>((resolve, reject) => {
-      const timer = setTimeout(() => reject(new Error('CDP connection timeout')), timeoutMs);
-      ws.addEventListener('open', () => { clearTimeout(timer); resolve(); });
-      ws.addEventListener('error', () => { clearTimeout(timer); reject(new Error('CDP connection failed')); });
-    });
-    return new CdpConnection(ws);
-  }
-
-  async send<T = unknown>(method: string, params?: Record<string, unknown>, options?: { sessionId?: string; timeoutMs?: number }): Promise<T> {
-    const id = ++this.nextId;
-    const message: Record<string, unknown> = { id, method };
-    if (params) message.params = params;
-    if (options?.sessionId) message.sessionId = options.sessionId;
-    const timeoutMs = options?.timeoutMs ?? 30_000;
-
-    return new Promise<T>((resolve, reject) => {
-      const timer = timeoutMs > 0 ? setTimeout(() => { this.pending.delete(id); reject(new Error(`CDP timeout: ${method}`)); }, timeoutMs) : null;
-      this.pending.set(id, { resolve: resolve as (v: unknown) => void, reject, timer });
-      this.ws.send(JSON.stringify(message));
-    });
-  }
-
-  close(): void {
-    try { this.ws.close(); } catch {}
-  }
-}
-
-function getScriptDir(): string {
-  return path.dirname(new URL(import.meta.url).pathname);
-}
-
-function copyImageToClipboard(imagePath: string): boolean {
-  const copyScript = path.join(getScriptDir(), 'copy-to-clipboard.ts');
-  const result = spawnSync('npx', ['-y', 'bun', copyScript, 'image', imagePath], { stdio: 'inherit' });
-  return result.status === 0;
-}
-
-function copyHtmlToClipboard(htmlPath: string): boolean {
-  const copyScript = path.join(getScriptDir(), 'copy-to-clipboard.ts');
-  const result = spawnSync('npx', ['-y', 'bun', copyScript, 'html', '--file', htmlPath], { stdio: 'inherit' });
-  return result.status === 0;
-}
-
-function pasteFromClipboard(targetApp?: string, retries = 3, delayMs = 500): boolean {
-  const pasteScript = path.join(getScriptDir(), 'paste-from-clipboard.ts');
-  const args = ['npx', '-y', 'bun', pasteScript, '--retries', String(retries), '--delay', String(delayMs)];
-  if (targetApp) {
-    args.push('--app', targetApp);
-  }
-  const result = spawnSync(args[0]!, args.slice(1), { stdio: 'inherit' });
-  return result.status === 0;
-}
-
 interface ArticleOptions {
  markdownPath: string;
  coverImage?: string;
@@ -225,7 +79,7 @@ export async function publishArticle(options: ArticleOptions): Promise<void> {
  await writeFile(htmlPath, parsed.html, 'utf-8');
  console.log(`[x-article] HTML saved to: ${htmlPath}`);

-  const chromePath = options.chromePath ?? findChromeExecutable();
+  const chromePath = options.chromePath ?? findChromeExecutable(CHROME_CANDIDATES_BASIC);
  if (!chromePath) throw new Error('Chrome not found');

  await mkdir(profileDir, { recursive: true });
@@ -246,7 +100,7 @@ export async function publishArticle(options: ArticleOptions): Promise<void> {

  try {
    const wsUrl = await waitForChromeDebugPort(port, 30_000);
-    cdp = await CdpConnection.connect(wsUrl, 30_000);
+    cdp = await CdpConnection.connect(wsUrl, 30_000, { defaultTimeoutMs: 30_000 });

    // Get page target
    const targets = await cdp.send<{ targetInfos: Array<{ targetId: string; url: string; type: string }> }>('Target.getTargets');
@@ -1,203 +1,21 @@
-import { spawn, spawnSync } from 'node:child_process';
+import { spawn } from 'node:child_process';
 import fs from 'node:fs';
 import { mkdir } from 'node:fs/promises';
-import net from 'node:net';
-import os from 'node:os';
-import path from 'node:path';
 import process from 'node:process';
+import {
+  CHROME_CANDIDATES_FULL,
+  CdpConnection,
+  copyImageToClipboard,
+  findChromeExecutable,
+  getDefaultProfileDir,
+  getFreePort,
+  pasteFromClipboard,
+  sleep,
+  waitForChromeDebugPort,
+} from './x-utils.js';

 const X_COMPOSE_URL = 'https://x.com/compose/post';

-function getScriptDir(): string {
-  return path.dirname(new URL(import.meta.url).pathname);
-}
-
-function copyImageToClipboard(imagePath: string): boolean {
-  const copyScript = path.join(getScriptDir(), 'copy-to-clipboard.ts');
-  const result = spawnSync('npx', ['-y', 'bun', copyScript, 'image', imagePath], { stdio: 'inherit' });
-  return result.status === 0;
-}
-
-function pasteFromClipboard(targetApp?: string, retries = 3, delayMs = 500): boolean {
-  const pasteScript = path.join(getScriptDir(), 'paste-from-clipboard.ts');
-  const args = ['npx', '-y', 'bun', pasteScript, '--retries', String(retries), '--delay', String(delayMs)];
-  if (targetApp) {
-    args.push('--app', targetApp);
-  }
-  const result = spawnSync(args[0]!, args.slice(1), { stdio: 'inherit' });
-  return result.status === 0;
-}
-
-function sleep(ms: number): Promise<void> {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
-
-async function getFreePort(): Promise<number> {
-  return new Promise((resolve, reject) => {
-    const server = net.createServer();
-    server.unref();
-    server.on('error', reject);
-    server.listen(0, '127.0.0.1', () => {
-      const address = server.address();
-      if (!address || typeof address === 'string') {
-        server.close(() => reject(new Error('Unable to allocate a free TCP port.')));
-        return;
-      }
-      const port = address.port;
-      server.close((err) => {
-        if (err) reject(err);
-        else resolve(port);
-      });
-    });
-  });
-}
-
-function findChromeExecutable(): string | undefined {
-  const override = process.env.X_BROWSER_CHROME_PATH?.trim();
-  if (override && fs.existsSync(override)) return override;
-
-  const candidates: string[] = [];
-  switch (process.platform) {
-    case 'darwin':
-      candidates.push(
-        '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
-        '/Applications/Google Chrome Canary.app/Contents/MacOS/Google Chrome Canary',
-        '/Applications/Google Chrome Beta.app/Contents/MacOS/Google Chrome Beta',
-        '/Applications/Chromium.app/Contents/MacOS/Chromium',
-        '/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge',
-      );
-      break;
-    case 'win32':
-      candidates.push(
-        'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe',
-        'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe',
-        'C:\\Program Files\\Microsoft\\Edge\\Application\\msedge.exe',
-        'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe',
-      );
-      break;
-    default:
-      candidates.push(
-        '/usr/bin/google-chrome',
-        '/usr/bin/google-chrome-stable',
-        '/usr/bin/chromium',
-        '/usr/bin/chromium-browser',
-        '/snap/bin/chromium',
-        '/usr/bin/microsoft-edge',
-      );
-      break;
-  }
-
-  for (const p of candidates) {
-    if (fs.existsSync(p)) return p;
-  }
-  return undefined;
-}
-
-function getDefaultProfileDir(): string {
-  const base = process.env.XDG_DATA_HOME || path.join(os.homedir(), '.local', 'share');
-  return path.join(base, 'x-browser-profile');
-}
-
-async function fetchJson<T = unknown>(url: string): Promise<T> {
-  const res = await fetch(url, { redirect: 'follow' });
-  if (!res.ok) throw new Error(`Request failed: ${res.status} ${res.statusText}`);
-  return (await res.json()) as T;
-}
-
-async function waitForChromeDebugPort(port: number, timeoutMs: number): Promise<string> {
-  const start = Date.now();
-  let lastError: unknown = null;
-
-  while (Date.now() - start < timeoutMs) {
-    try {
-      const version = await fetchJson<{ webSocketDebuggerUrl?: string }>(`http://127.0.0.1:${port}/json/version`);
-      if (version.webSocketDebuggerUrl) return version.webSocketDebuggerUrl;
-      lastError = new Error('Missing webSocketDebuggerUrl');
-    } catch (error) {
-      lastError = error;
-    }
-    await sleep(200);
-  }
-
-  throw new Error(`Chrome debug port not ready: ${lastError instanceof Error ? lastError.message : String(lastError)}`);
-}
-
-class CdpConnection {
-  private ws: WebSocket;
-  private nextId = 0;
-  private pending = new Map<number, { resolve: (v: unknown) => void; reject: (e: Error) => void; timer: ReturnType<typeof setTimeout> | null }>();
-  private eventHandlers = new Map<string, Set<(params: unknown) => void>>();
-
-  private constructor(ws: WebSocket) {
-    this.ws = ws;
-    this.ws.addEventListener('message', (event) => {
-      try {
-        const data = typeof event.data === 'string' ? event.data : new TextDecoder().decode(event.data as ArrayBuffer);
-        const msg = JSON.parse(data) as { id?: number; method?: string; params?: unknown; result?: unknown; error?: { message?: string } };
-
-        if (msg.method) {
-          const handlers = this.eventHandlers.get(msg.method);
-          if (handlers) handlers.forEach((h) => h(msg.params));
-        }
-
-        if (msg.id) {
-          const pending = this.pending.get(msg.id);
-          if (pending) {
-            this.pending.delete(msg.id);
-            if (pending.timer) clearTimeout(pending.timer);
-            if (msg.error?.message) pending.reject(new Error(msg.error.message));
-            else pending.resolve(msg.result);
-          }
-        }
-      } catch {}
-    });
-
-    this.ws.addEventListener('close', () => {
-      for (const [id, pending] of this.pending.entries()) {
-        this.pending.delete(id);
-        if (pending.timer) clearTimeout(pending.timer);
-        pending.reject(new Error('CDP connection closed.'));
-      }
-    });
-  }
-
-  static async connect(url: string, timeoutMs: number): Promise<CdpConnection> {
-    const ws = new WebSocket(url);
-    await new Promise<void>((resolve, reject) => {
-      const timer = setTimeout(() => reject(new Error('CDP connection timeout.')), timeoutMs);
-      ws.addEventListener('open', () => { clearTimeout(timer); resolve(); });
-      ws.addEventListener('error', () => { clearTimeout(timer); reject(new Error('CDP connection failed.')); });
-    });
-    return new CdpConnection(ws);
-  }
-
-  on(method: string, handler: (params: unknown) => void): void {
-    if (!this.eventHandlers.has(method)) this.eventHandlers.set(method, new Set());
-    this.eventHandlers.get(method)!.add(handler);
-  }
-
-  async send<T = unknown>(method: string, params?: Record<string, unknown>, options?: { sessionId?: string; timeoutMs?: number }): Promise<T> {
-    const id = ++this.nextId;
-    const message: Record<string, unknown> = { id, method };
-    if (params) message.params = params;
-    if (options?.sessionId) message.sessionId = options.sessionId;
-
-    const timeoutMs = options?.timeoutMs ?? 15_000;
-
-    const result = await new Promise<unknown>((resolve, reject) => {
-      const timer = timeoutMs > 0 ? setTimeout(() => { this.pending.delete(id); reject(new Error(`CDP timeout: ${method}`)); }, timeoutMs) : null;
-      this.pending.set(id, { resolve, reject, timer });
-      this.ws.send(JSON.stringify(message));
-    });
-
-    return result as T;
-  }
-
-  close(): void {
-    try { this.ws.close(); } catch {}
-  }
-}
-
 interface XBrowserOptions {
  text?: string;
  images?: string[];
@@ -210,7 +28,7 @@ interface XBrowserOptions {
 export async function postToX(options: XBrowserOptions): Promise<void> {
  const { text, images = [], submit = false, timeoutMs = 120_000, profileDir = getDefaultProfileDir() } = options;

-  const chromePath = options.chromePath ?? findChromeExecutable();
+  const chromePath = options.chromePath ?? findChromeExecutable(CHROME_CANDIDATES_FULL);
  if (!chromePath) throw new Error('Chrome not found. Set X_BROWSER_CHROME_PATH env var.');

  await mkdir(profileDir, { recursive: true });
@@ -231,8 +49,8 @@ export async function postToX(options: XBrowserOptions): Promise<void> {
  let cdp: CdpConnection | null = null;

  try {
-    const wsUrl = await waitForChromeDebugPort(port, 30_000);
-    cdp = await CdpConnection.connect(wsUrl, 30_000);
+    const wsUrl = await waitForChromeDebugPort(port, 30_000, { includeLastError: true });
+    cdp = await CdpConnection.connect(wsUrl, 30_000, { defaultTimeoutMs: 15_000 });

    const targets = await cdp.send<{ targetInfos: Array<{ targetId: string; url: string; type: string }> }>('Target.getTargets');
    let pageTarget = targets.targetInfos.find((t) => t.type === 'page' && t.url.includes('x.com'));
@@ -0,0 +1,247 @@
+import { spawn } from 'node:child_process';
+import { mkdir } from 'node:fs/promises';
+import process from 'node:process';
+import {
+  CHROME_CANDIDATES_FULL,
+  CdpConnection,
+  findChromeExecutable,
+  getDefaultProfileDir,
+  getFreePort,
+  sleep,
+  waitForChromeDebugPort,
+} from './x-utils.js';
+
+function extractTweetUrl(urlOrId: string): string | null {
+  // If it's already a full URL, normalize it
+  if (urlOrId.match(/(?:x\.com|twitter\.com)\/\w+\/status\/\d+/)) {
+    return urlOrId.replace(/twitter\.com/, 'x.com').split('?')[0];
+  }
+  return null;
+}
+
+interface QuoteOptions {
+  tweetUrl: string;
+  comment?: string;
+  submit?: boolean;
+  timeoutMs?: number;
+  profileDir?: string;
+  chromePath?: string;
+}
+
+export async function quotePost(options: QuoteOptions): Promise<void> {
+  const { tweetUrl, comment, submit = false, timeoutMs = 120_000, profileDir = getDefaultProfileDir() } = options;
+
+  const chromePath = options.chromePath ?? findChromeExecutable(CHROME_CANDIDATES_FULL);
+  if (!chromePath) throw new Error('Chrome not found. Set X_BROWSER_CHROME_PATH env var.');
+
+  await mkdir(profileDir, { recursive: true });
+
+  const port = await getFreePort();
+  console.log(`[x-quote] Launching Chrome (profile: ${profileDir})`);
+  console.log(`[x-quote] Opening tweet: ${tweetUrl}`);
+
+  const chrome = spawn(chromePath, [
+    `--remote-debugging-port=${port}`,
+    `--user-data-dir=${profileDir}`,
+    '--no-first-run',
+    '--no-default-browser-check',
+    '--disable-blink-features=AutomationControlled',
+    '--start-maximized',
+    tweetUrl,
+  ], { stdio: 'ignore' });
+
+  let cdp: CdpConnection | null = null;
+
+  try {
+    const wsUrl = await waitForChromeDebugPort(port, 30_000, { includeLastError: true });
+    cdp = await CdpConnection.connect(wsUrl, 30_000, { defaultTimeoutMs: 15_000 });
+
+    const targets = await cdp.send<{ targetInfos: Array<{ targetId: string; url: string; type: string }> }>('Target.getTargets');
+    let pageTarget = targets.targetInfos.find((t) => t.type === 'page' && t.url.includes('x.com'));
+
+    if (!pageTarget) {
+      const { targetId } = await cdp.send<{ targetId: string }>('Target.createTarget', { url: tweetUrl });
+      pageTarget = { targetId, url: tweetUrl, type: 'page' };
+    }
+
+    const { sessionId } = await cdp.send<{ sessionId: string }>('Target.attachToTarget', { targetId: pageTarget.targetId, flatten: true });
+
+    await cdp.send('Page.enable', {}, { sessionId });
+    await cdp.send('Runtime.enable', {}, { sessionId });
+
+    console.log('[x-quote] Waiting for tweet to load...');
+    await sleep(3000);
+
+    // Wait for retweet button to appear (indicates tweet loaded and user logged in)
+    const waitForRetweetButton = async (): Promise<boolean> => {
+      const start = Date.now();
+      while (Date.now() - start < timeoutMs) {
+        const result = await cdp!.send<{ result: { value: boolean } }>('Runtime.evaluate', {
+          expression: `!!document.querySelector('[data-testid="retweet"]')`,
+          returnByValue: true,
+        }, { sessionId });
+        if (result.result.value) return true;
+        await sleep(1000);
+      }
+      return false;
+    };
+
+    const retweetFound = await waitForRetweetButton();
+    if (!retweetFound) {
+      console.log('[x-quote] Tweet not found or not logged in. Please log in to X in the browser window.');
+      console.log('[x-quote] Waiting for login...');
+      const loggedIn = await waitForRetweetButton();
+      if (!loggedIn) throw new Error('Timed out waiting for tweet. Please log in first or check the tweet URL.');
+    }
+
+    // Click the retweet button
+    console.log('[x-quote] Clicking retweet button...');
+    await cdp.send('Runtime.evaluate', {
+      expression: `document.querySelector('[data-testid="retweet"]')?.click()`,
+    }, { sessionId });
+    await sleep(1000);
+
+    // Wait for and click the "Quote" option in the menu
+    console.log('[x-quote] Selecting quote option...');
+    const waitForQuoteOption = async (): Promise<boolean> => {
+      const start = Date.now();
+      while (Date.now() - start < 10_000) {
+        const result = await cdp!.send<{ result: { value: boolean } }>('Runtime.evaluate', {
+          expression: `!!document.querySelector('[data-testid="Dropdown"] [role="menuitem"]:nth-child(2)')`,
+          returnByValue: true,
+        }, { sessionId });
+        if (result.result.value) return true;
+        await sleep(200);
+      }
+      return false;
+    };
+
+    const quoteOptionFound = await waitForQuoteOption();
+    if (!quoteOptionFound) {
+      throw new Error('Quote option not found. The menu may not have opened.');
+    }
+
+    // Click the quote option (second menu item)
+    await cdp.send('Runtime.evaluate', {
+      expression: `document.querySelector('[data-testid="Dropdown"] [role="menuitem"]:nth-child(2)')?.click()`,
+    }, { sessionId });
+    await sleep(2000);
+
+    // Wait for the quote compose dialog
+    console.log('[x-quote] Waiting for quote compose dialog...');
+    const waitForQuoteDialog = async (): Promise<boolean> => {
+      const start = Date.now();
+      while (Date.now() - start < 10_000) {
+        const result = await cdp!.send<{ result: { value: boolean } }>('Runtime.evaluate', {
+          expression: `!!document.querySelector('[data-testid="tweetTextarea_0"]')`,
+          returnByValue: true,
+        }, { sessionId });
+        if (result.result.value) return true;
+        await sleep(200);
+      }
+      return false;
+    };
+
+    const dialogFound = await waitForQuoteDialog();
+    if (!dialogFound) {
+      throw new Error('Quote compose dialog not found.');
+    }
+
+    // Type the comment if provided
+    if (comment) {
+      console.log('[x-quote] Typing comment...');
+      // Use CDP Input.insertText for more reliable text insertion
+      await cdp.send('Runtime.evaluate', {
+        expression: `document.querySelector('[data-testid="tweetTextarea_0"]')?.focus()`,
+      }, { sessionId });
+      await sleep(200);
+
+      await cdp.send('Input.insertText', {
+        text: comment,
+      }, { sessionId });
+      await sleep(500);
+    }
+
+    if (submit) {
+      console.log('[x-quote] Submitting quote post...');
+      await cdp.send('Runtime.evaluate', {
+        expression: `document.querySelector('[data-testid="tweetButton"]')?.click()`,
+      }, { sessionId });
+      await sleep(2000);
+      console.log('[x-quote] Quote post submitted!');
+    } else {
+      console.log('[x-quote] Quote composed (preview mode). Add --submit to post.');
+      console.log('[x-quote] Browser will stay open for 30 seconds for preview...');
+      await sleep(30_000);
+    }
+  } finally {
+    if (cdp) {
+      try { await cdp.send('Browser.close', {}, { timeoutMs: 5_000 }); } catch {}
+      cdp.close();
+    }
+
+    setTimeout(() => {
+      if (!chrome.killed) try { chrome.kill('SIGKILL'); } catch {}
+    }, 2_000).unref?.();
+    try { chrome.kill('SIGTERM'); } catch {}
+  }
+}
+
+function printUsage(): never {
+  console.log(`Quote a tweet on X (Twitter) using real Chrome browser
+
+Usage:
+  npx -y bun x-quote.ts <tweet-url> [options] [comment]
+
+Options:
+  --submit         Actually post (default: preview only)
+  --profile <dir>  Chrome profile directory
+  --help           Show this help
+
+Examples:
+  npx -y bun x-quote.ts https://x.com/user/status/123456789 "Great insight!"
+  npx -y bun x-quote.ts https://x.com/user/status/123456789 "I agree!" --submit
+`);
+  process.exit(0);
+}
+
+async function main(): Promise<void> {
+  const args = process.argv.slice(2);
+  if (args.includes('--help') || args.includes('-h')) printUsage();
+
+  let tweetUrl: string | undefined;
+  let submit = false;
+  let profileDir: string | undefined;
+  const commentParts: string[] = [];
+
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i]!;
+    if (arg === '--submit') {
+      submit = true;
+    } else if (arg === '--profile' && args[i + 1]) {
+      profileDir = args[++i];
+    } else if (!arg.startsWith('-')) {
+      // First non-option argument is the tweet URL
+      if (!tweetUrl && arg.match(/(?:x\.com|twitter\.com)\/\w+\/status\/\d+/)) {
+        tweetUrl = extractTweetUrl(arg) ?? undefined;
+      } else {
+        commentParts.push(arg);
+      }
+    }
+  }
+
+  if (!tweetUrl) {
+    console.error('Error: Please provide a tweet URL.');
+    console.error('Example: npx -y bun x-quote.ts https://x.com/user/status/123456789 "Your comment"');
+    process.exit(1);
+  }
+
+  const comment = commentParts.join(' ').trim() || undefined;
+
+  await quotePost({ tweetUrl, comment, submit, profileDir });
+}
+
+await main().catch((err) => {
+  console.error(`Error: ${err instanceof Error ? err.message : String(err)}`);
+  process.exit(1);
+});
@@ -0,0 +1,242 @@
+import { spawnSync } from 'node:child_process';
+import fs from 'node:fs';
+import net from 'node:net';
+import os from 'node:os';
+import path from 'node:path';
+import process from 'node:process';
+
+export type PlatformCandidates = {
+  darwin?: string[];
+  win32?: string[];
+  default: string[];
+};
+
+export const CHROME_CANDIDATES_BASIC: PlatformCandidates = {
+  darwin: [
+    '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+    '/Applications/Google Chrome Canary.app/Contents/MacOS/Google Chrome Canary',
+    '/Applications/Chromium.app/Contents/MacOS/Chromium',
+  ],
+  win32: [
+    'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe',
+    'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe',
+  ],
+  default: [
+    '/usr/bin/google-chrome',
+    '/usr/bin/chromium',
+    '/usr/bin/chromium-browser',
+  ],
+};
+
+export const CHROME_CANDIDATES_FULL: PlatformCandidates = {
+  darwin: [
+    '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+    '/Applications/Google Chrome Canary.app/Contents/MacOS/Google Chrome Canary',
+    '/Applications/Google Chrome Beta.app/Contents/MacOS/Google Chrome Beta',
+    '/Applications/Chromium.app/Contents/MacOS/Chromium',
+    '/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge',
+  ],
+  win32: [
+    'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe',
+    'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe',
+    'C:\\Program Files\\Microsoft\\Edge\\Application\\msedge.exe',
+    'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe',
+  ],
+  default: [
+    '/usr/bin/google-chrome',
+    '/usr/bin/google-chrome-stable',
+    '/usr/bin/chromium',
+    '/usr/bin/chromium-browser',
+    '/snap/bin/chromium',
+    '/usr/bin/microsoft-edge',
+  ],
+};
+
+function getCandidatesForPlatform(candidates: PlatformCandidates): string[] {
+  if (process.platform === 'darwin' && candidates.darwin?.length) return candidates.darwin;
+  if (process.platform === 'win32' && candidates.win32?.length) return candidates.win32;
+  return candidates.default;
+}
+
+export function findChromeExecutable(candidates: PlatformCandidates): string | undefined {
+  const override = process.env.X_BROWSER_CHROME_PATH?.trim();
+  if (override && fs.existsSync(override)) return override;
+
+  for (const candidate of getCandidatesForPlatform(candidates)) {
+    if (fs.existsSync(candidate)) return candidate;
+  }
+  return undefined;
+}
+
+export function getDefaultProfileDir(): string {
+  const base = process.env.XDG_DATA_HOME || path.join(os.homedir(), '.local', 'share');
+  return path.join(base, 'x-browser-profile');
+}
+
+export function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export async function getFreePort(): Promise<number> {
+  return new Promise((resolve, reject) => {
+    const server = net.createServer();
+    server.unref();
+    server.on('error', reject);
+    server.listen(0, '127.0.0.1', () => {
+      const address = server.address();
+      if (!address || typeof address === 'string') {
+        server.close(() => reject(new Error('Unable to allocate a free TCP port.')));
+        return;
+      }
+      const port = address.port;
+      server.close((err) => {
+        if (err) reject(err);
+        else resolve(port);
+      });
+    });
+  });
+}
+
+async function fetchJson<T = unknown>(url: string): Promise<T> {
+  const res = await fetch(url, { redirect: 'follow' });
+  if (!res.ok) throw new Error(`Request failed: ${res.status} ${res.statusText}`);
+  return (await res.json()) as T;
+}
+
+export async function waitForChromeDebugPort(
+  port: number,
+  timeoutMs: number,
+  options?: { includeLastError?: boolean },
+): Promise<string> {
+  const start = Date.now();
+  let lastError: unknown = null;
+
+  while (Date.now() - start < timeoutMs) {
+    try {
+      const version = await fetchJson<{ webSocketDebuggerUrl?: string }>(`http://127.0.0.1:${port}/json/version`);
+      if (version.webSocketDebuggerUrl) return version.webSocketDebuggerUrl;
+      lastError = new Error('Missing webSocketDebuggerUrl');
+    } catch (error) {
+      lastError = error;
+    }
+    await sleep(200);
+  }
+
+  if (options?.includeLastError && lastError) {
+    throw new Error(`Chrome debug port not ready: ${lastError instanceof Error ? lastError.message : String(lastError)}`);
+  }
+  throw new Error('Chrome debug port not ready');
+}
+
+type PendingRequest = {
+  resolve: (value: unknown) => void;
+  reject: (error: Error) => void;
+  timer: ReturnType<typeof setTimeout> | null;
+};
+
+export class CdpConnection {
+  private ws: WebSocket;
+  private nextId = 0;
+  private pending = new Map<number, PendingRequest>();
+  private eventHandlers = new Map<string, Set<(params: unknown) => void>>();
+  private defaultTimeoutMs: number;
+
+  private constructor(ws: WebSocket, options?: { defaultTimeoutMs?: number }) {
+    this.ws = ws;
+    this.defaultTimeoutMs = options?.defaultTimeoutMs ?? 15_000;
+
+    this.ws.addEventListener('message', (event) => {
+      try {
+        const data = typeof event.data === 'string' ? event.data : new TextDecoder().decode(event.data as ArrayBuffer);
+        const msg = JSON.parse(data) as { id?: number; method?: string; params?: unknown; result?: unknown; error?: { message?: string } };
+
+        if (msg.method) {
+          const handlers = this.eventHandlers.get(msg.method);
+          if (handlers) handlers.forEach((h) => h(msg.params));
+        }
+
+        if (msg.id) {
+          const pending = this.pending.get(msg.id);
+          if (pending) {
+            this.pending.delete(msg.id);
+            if (pending.timer) clearTimeout(pending.timer);
+            if (msg.error?.message) pending.reject(new Error(msg.error.message));
+            else pending.resolve(msg.result);
+          }
+        }
+      } catch {}
+    });
+
+    this.ws.addEventListener('close', () => {
+      for (const [id, pending] of this.pending.entries()) {
+        this.pending.delete(id);
+        if (pending.timer) clearTimeout(pending.timer);
+        pending.reject(new Error('CDP connection closed.'));
+      }
+    });
+  }
+
+  static async connect(url: string, timeoutMs: number, options?: { defaultTimeoutMs?: number }): Promise<CdpConnection> {
+    const ws = new WebSocket(url);
+    await new Promise<void>((resolve, reject) => {
+      const timer = setTimeout(() => reject(new Error('CDP connection timeout.')), timeoutMs);
+      ws.addEventListener('open', () => { clearTimeout(timer); resolve(); });
+      ws.addEventListener('error', () => { clearTimeout(timer); reject(new Error('CDP connection failed.')); });
+    });
+    return new CdpConnection(ws, options);
+  }
+
+  on(method: string, handler: (params: unknown) => void): void {
+    if (!this.eventHandlers.has(method)) this.eventHandlers.set(method, new Set());
+    this.eventHandlers.get(method)!.add(handler);
+  }
+
+  async send<T = unknown>(method: string, params?: Record<string, unknown>, options?: { sessionId?: string; timeoutMs?: number }): Promise<T> {
+    const id = ++this.nextId;
+    const message: Record<string, unknown> = { id, method };
+    if (params) message.params = params;
+    if (options?.sessionId) message.sessionId = options.sessionId;
+
+    const timeoutMs = options?.timeoutMs ?? this.defaultTimeoutMs;
+
+    const result = await new Promise<unknown>((resolve, reject) => {
+      const timer = timeoutMs > 0
+        ? setTimeout(() => { this.pending.delete(id); reject(new Error(`CDP timeout: ${method}`)); }, timeoutMs)
+        : null;
+      this.pending.set(id, { resolve, reject, timer });
+      this.ws.send(JSON.stringify(message));
+    });
+
+    return result as T;
+  }
+
+  close(): void {
+    try { this.ws.close(); } catch {}
+  }
+}
+
+export function getScriptDir(): string {
+  return path.dirname(new URL(import.meta.url).pathname);
+}
+
+function runBunScript(scriptPath: string, args: string[]): boolean {
+  const result = spawnSync('npx', ['-y', 'bun', scriptPath, ...args], { stdio: 'inherit' });
+  return result.status === 0;
+}
+
+export function copyImageToClipboard(imagePath: string): boolean {
+  const copyScript = path.join(getScriptDir(), 'copy-to-clipboard.ts');
+  return runBunScript(copyScript, ['image', imagePath]);
+}
+
+export function copyHtmlToClipboard(htmlPath: string): boolean {
+  const copyScript = path.join(getScriptDir(), 'copy-to-clipboard.ts');
+  return runBunScript(copyScript, ['html', '--file', htmlPath]);
+}
+
+export function pasteFromClipboard(targetApp?: string, retries = 3, delayMs = 500): boolean {
+  const pasteScript = path.join(getScriptDir(), 'paste-from-clipboard.ts');
+  const args = ['--retries', String(retries), '--delay', String(delayMs)];
+  if (targetApp) args.push('--app', targetApp);
+  return runBunScript(pasteScript, args);
+}
@@ -0,0 +1,260 @@
+import { spawn } from 'node:child_process';
+import fs from 'node:fs';
+import { mkdir } from 'node:fs/promises';
+import path from 'node:path';
+import process from 'node:process';
+import {
+  CHROME_CANDIDATES_FULL,
+  CdpConnection,
+  findChromeExecutable,
+  getDefaultProfileDir,
+  getFreePort,
+  sleep,
+  waitForChromeDebugPort,
+} from './x-utils.js';
+
+const X_COMPOSE_URL = 'https://x.com/compose/post';
+
+interface XVideoOptions {
+  text?: string;
+  videoPath: string;
+  submit?: boolean;
+  timeoutMs?: number;
+  profileDir?: string;
+  chromePath?: string;
+}
+
+export async function postVideoToX(options: XVideoOptions): Promise<void> {
+  const { text, videoPath, submit = false, timeoutMs = 120_000, profileDir = getDefaultProfileDir() } = options;
+
+  const chromePath = options.chromePath ?? findChromeExecutable(CHROME_CANDIDATES_FULL);
+  if (!chromePath) throw new Error('Chrome not found. Set X_BROWSER_CHROME_PATH env var.');
+
+  if (!fs.existsSync(videoPath)) throw new Error(`Video not found: ${videoPath}`);
+
+  const absVideoPath = path.resolve(videoPath);
+  console.log(`[x-video] Video: ${absVideoPath}`);
+
+  await mkdir(profileDir, { recursive: true });
+
+  const port = await getFreePort();
+  console.log(`[x-video] Launching Chrome (profile: ${profileDir})`);
+
+  const chrome = spawn(chromePath, [
+    `--remote-debugging-port=${port}`,
+    `--user-data-dir=${profileDir}`,
+    '--no-first-run',
+    '--no-default-browser-check',
+    '--disable-blink-features=AutomationControlled',
+    '--start-maximized',
+    X_COMPOSE_URL,
+  ], { stdio: 'ignore' });
+
+  let cdp: CdpConnection | null = null;
+
+  try {
+    const wsUrl = await waitForChromeDebugPort(port, 30_000, { includeLastError: true });
+    cdp = await CdpConnection.connect(wsUrl, 30_000, { defaultTimeoutMs: 30_000 });
+
+    const targets = await cdp.send<{ targetInfos: Array<{ targetId: string; url: string; type: string }> }>('Target.getTargets');
+    let pageTarget = targets.targetInfos.find((t) => t.type === 'page' && t.url.includes('x.com'));
+
+    if (!pageTarget) {
+      const { targetId } = await cdp.send<{ targetId: string }>('Target.createTarget', { url: X_COMPOSE_URL });
+      pageTarget = { targetId, url: X_COMPOSE_URL, type: 'page' };
+    }
+
+    const { sessionId } = await cdp.send<{ sessionId: string }>('Target.attachToTarget', { targetId: pageTarget.targetId, flatten: true });
+
+    await cdp.send('Page.enable', {}, { sessionId });
+    await cdp.send('Runtime.enable', {}, { sessionId });
+    await cdp.send('DOM.enable', {}, { sessionId });
+    await cdp.send('Input.setIgnoreInputEvents', { ignore: false }, { sessionId });
+
+    console.log('[x-video] Waiting for X editor...');
+    await sleep(3000);
+
+    const waitForEditor = async (): Promise<boolean> => {
+      const start = Date.now();
+      while (Date.now() - start < timeoutMs) {
+        const result = await cdp!.send<{ result: { value: boolean } }>('Runtime.evaluate', {
+          expression: `!!document.querySelector('[data-testid="tweetTextarea_0"]')`,
+          returnByValue: true,
+        }, { sessionId });
+        if (result.result.value) return true;
+        await sleep(1000);
+      }
+      return false;
+    };
+
+    const editorFound = await waitForEditor();
+    if (!editorFound) {
+      console.log('[x-video] Editor not found. Please log in to X in the browser window.');
+      console.log('[x-video] Waiting for login...');
+      const loggedIn = await waitForEditor();
+      if (!loggedIn) throw new Error('Timed out waiting for X editor. Please log in first.');
+    }
+
+    // Upload video FIRST (before typing text to avoid text being cleared)
+    console.log('[x-video] Uploading video...');
+
+    const { root } = await cdp.send<{ root: { nodeId: number } }>('DOM.getDocument', {}, { sessionId });
+    const { nodeId } = await cdp.send<{ nodeId: number }>('DOM.querySelector', {
+      nodeId: root.nodeId,
+      selector: 'input[type="file"][accept*="video"], input[data-testid="fileInput"], input[type="file"]',
+    }, { sessionId });
+
+    if (!nodeId || nodeId === 0) {
+      throw new Error('Could not find file input for video upload.');
+    }
+
+    await cdp.send('DOM.setFileInputFiles', {
+      nodeId,
+      files: [absVideoPath],
+    }, { sessionId });
+    console.log('[x-video] Video file set, uploading in background...');
+
+    // Wait a moment for upload to start, then type text while video processes
+    await sleep(2000);
+
+    // Type text while video uploads in background
+    if (text) {
+      console.log('[x-video] Typing text...');
+      await cdp.send('Runtime.evaluate', {
+        expression: `
+          const editor = document.querySelector('[data-testid="tweetTextarea_0"]');
+          if (editor) {
+            editor.focus();
+            document.execCommand('insertText', false, ${JSON.stringify(text)});
+          }
+        `,
+      }, { sessionId });
+      await sleep(500);
+    }
+
+    // Wait for video to finish processing by checking if tweet button is enabled
+    console.log('[x-video] Waiting for video processing...');
+    const waitForVideoReady = async (maxWaitMs = 180_000): Promise<boolean> => {
+      const start = Date.now();
+      let dots = 0;
+      while (Date.now() - start < maxWaitMs) {
+        const result = await cdp!.send<{ result: { value: { hasMedia: boolean; buttonEnabled: boolean } } }>('Runtime.evaluate', {
+          expression: `(() => {
+            const hasMedia = !!document.querySelector('[data-testid="attachments"] video, [data-testid="videoPlayer"], video');
+            const tweetBtn = document.querySelector('[data-testid="tweetButton"]');
+            const buttonEnabled = tweetBtn && !tweetBtn.disabled && tweetBtn.getAttribute('aria-disabled') !== 'true';
+            return { hasMedia, buttonEnabled };
+          })()`,
+          returnByValue: true,
+        }, { sessionId });
+
+        const { hasMedia, buttonEnabled } = result.result.value;
+        if (hasMedia && buttonEnabled) {
+          console.log('');
+          return true;
+        }
+
+        process.stdout.write('.');
+        dots++;
+        if (dots % 60 === 0) console.log(''); // New line every 60 dots
+        await sleep(2000);
+      }
+      console.log('');
+      return false;
+    };
+
+    const videoReady = await waitForVideoReady();
+    if (videoReady) {
+      console.log('[x-video] Video ready!');
+    } else {
+      console.log('[x-video] Video may still be processing. Please check browser window.');
+    }
+
+    if (submit) {
+      console.log('[x-video] Submitting post...');
+      await cdp.send('Runtime.evaluate', {
+        expression: `document.querySelector('[data-testid="tweetButton"]')?.click()`,
+      }, { sessionId });
+      await sleep(5000);
+      console.log('[x-video] Post submitted!');
+    } else {
+      console.log('[x-video] Post composed (preview mode). Add --submit to post.');
+      console.log('[x-video] Browser stays open for review.');
+    }
+  } finally {
+    if (cdp) {
+      cdp.close();
+    }
+    // Don't kill Chrome in preview mode, let user review
+    if (submit) {
+      setTimeout(() => {
+        if (!chrome.killed) try { chrome.kill('SIGKILL'); } catch {}
+      }, 2_000).unref?.();
+      try { chrome.kill('SIGTERM'); } catch {}
+    }
+  }
+}
+
+function printUsage(): never {
+  console.log(`Post video to X (Twitter) using real Chrome browser
+
+Usage:
+  npx -y bun x-video.ts [options] --video <path> [text]
+
+Options:
+  --video <path>   Video file path (required, supports mp4/mov/webm)
+  --submit         Actually post (default: preview only)
+  --profile <dir>  Chrome profile directory
+  --help           Show this help
+
+Examples:
+  npx -y bun x-video.ts --video ./clip.mp4 "Check out this video!"
+  npx -y bun x-video.ts --video ./demo.mp4 --submit
+  npx -y bun x-video.ts --video ./video.mp4 "Multi-line text
+works too"
+
+Notes:
+  - Video is uploaded first, then text is added (to avoid text being cleared)
+  - Video processing may take 30-60 seconds depending on file size
+  - Maximum video length on X: 140 seconds (regular) or 60 min (Premium)
+  - Supported formats: MP4, MOV, WebM
+`);
+  process.exit(0);
+}
+
+async function main(): Promise<void> {
+  const args = process.argv.slice(2);
+  if (args.includes('--help') || args.includes('-h')) printUsage();
+
+  let videoPath: string | undefined;
+  let submit = false;
+  let profileDir: string | undefined;
+  const textParts: string[] = [];
+
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i]!;
+    if (arg === '--video' && args[i + 1]) {
+      videoPath = args[++i]!;
+    } else if (arg === '--submit') {
+      submit = true;
+    } else if (arg === '--profile' && args[i + 1]) {
+      profileDir = args[++i];
+    } else if (!arg.startsWith('-')) {
+      textParts.push(arg);
+    }
+  }
+
+  const text = textParts.join(' ').trim() || undefined;
+
+  if (!videoPath) {
+    console.error('Error: --video <path> is required.');
+    printUsage();
+  }
+
+  await postVideoToX({ text, videoPath, submit, profileDir });
+}
+
+await main().catch((err) => {
+  console.error(`Error: ${err instanceof Error ? err.message : String(err)}`);
+  process.exit(1);
+});
@@ -1,11 +1,11 @@
 ---
 name: baoyu-slide-deck
-description: Generate professional slide deck images from content. Creates comprehensive outlines with style instructions, then generates individual slide images. Use when user asks to "create slides", "make a presentation", "generate deck", or "slide deck".
+description: Generates professional slide deck images from content. Creates outlines with style instructions, then generates individual slide images. Use when user asks to "create slides", "make a presentation", "generate deck", "slide deck", or "PPT".
 ---

 # Slide Deck Generator

-Transform content into professional slide deck images with flexible style options.
+Transform content into professional slide deck images.

 ## Usage

@@ -21,14 +21,10 @@ Transform content into professional slide deck images with flexible style option

 ## 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/merge-to-pptx.ts` | Merge slides into PowerPoint |
@@ -38,74 +34,104 @@ Transform content into professional slide deck images with flexible style option

 | Option | Description |
 |--------|-------------|
-| `--style <name>` | Visual style (see Style Gallery) |
-| `--audience <type>` | Target audience: beginners, intermediate, experts, executives, general |
+| `--style <name>` | Visual style: preset name, `custom`, or custom style name |
+| `--audience <type>` | Target: beginners, intermediate, experts, executives, general |
 | `--lang <code>` | Output language (en, zh, ja, etc.) |
-| `--slides <number>` | Target slide count |
+| `--slides <number>` | Target slide count (8-25 recommended, max 30) |
 | `--outline-only` | Generate outline only, skip image generation |
+| `--prompts-only` | Generate outline + prompts, skip images |
+| `--images-only` | Generate images from existing prompts directory |
+| `--regenerate <N>` | Regenerate specific slide(s): `--regenerate 3` or `--regenerate 2,5,8` |

-## Style Gallery
+**Slide Count by Content Length**:
+| Content | Slides |
+|---------|--------|
+| < 1000 words | 5-10 |
+| 1000-3000 words | 10-18 |
+| 3000-5000 words | 15-25 |
+| > 5000 words | 20-30 (consider splitting) |

-| Style | Description | Best For |
-|-------|-------------|----------|
-| `blueprint` (Default) | Technical schematics, grid texture | Architecture, system design |
-| `chalkboard` | Black chalkboard, colorful chalk | Education, tutorials, classroom |
-| `notion` | SaaS dashboard, card-based layouts | Product demos, SaaS, B2B |
-| `bold-editorial` | Magazine cover, bold typography, dark | Product launches, keynotes |
-| `corporate` | Navy/gold, structured layouts | Investor decks, proposals |
-| `dark-atmospheric` | Cinematic dark mode, glowing accents | Entertainment, gaming |
-| `editorial-infographic` | Magazine explainers, flat illustrations | Tech explainers, research |
-| `fantasy-animation` | Ghibli/Disney style, hand-drawn | Educational, storytelling |
-| `intuition-machine` | Technical briefing, bilingual labels | Technical docs, academic |
-| `minimal` | Ultra-clean, maximum whitespace | Executive briefings, premium |
-| `pixel-art` | Retro 8-bit, chunky pixels | Gaming, developer talks |
-| `scientific` | Academic diagrams, precise labeling | Biology, chemistry, medical |
-| `sketch-notes` | Hand-drawn, warm & friendly | Educational, tutorials |
-| `vector-illustration` | Flat vector, retro & cute | Creative, children's content |
-| `vintage` | Aged-paper, historical styling | Historical, heritage, biography |
-| `watercolor` | Hand-painted textures, natural warmth | Lifestyle, wellness, travel |
+## Style System

-## Auto Style Selection
+### Presets

-| Content Signals | Selected Style |
-|-----------------|----------------|
-| tutorial, learn, education, guide, intro, beginner | `sketch-notes` |
-| classroom, teaching, school, chalkboard, blackboard | `chalkboard` |
+| Preset | Dimensions | Best For |
+|--------|------------|----------|
+| `blueprint` (Default) | grid + cool + technical + balanced | Architecture, system design |
+| `chalkboard` | organic + warm + handwritten + balanced | Education, tutorials |
+| `corporate` | clean + professional + geometric + balanced | Investor decks, proposals |
+| `minimal` | clean + neutral + geometric + minimal | Executive briefings |
+| `sketch-notes` | organic + warm + handwritten + balanced | Educational, tutorials |
+| `watercolor` | organic + warm + humanist + minimal | Lifestyle, wellness |
+| `dark-atmospheric` | clean + dark + editorial + balanced | Entertainment, gaming |
+| `notion` | clean + neutral + geometric + dense | Product demos, SaaS |
+| `bold-editorial` | clean + vibrant + editorial + balanced | Product launches, keynotes |
+| `editorial-infographic` | clean + cool + editorial + dense | Tech explainers, research |
+| `fantasy-animation` | organic + vibrant + handwritten + minimal | Educational storytelling |
+| `intuition-machine` | clean + cool + technical + dense | Technical docs, academic |
+| `pixel-art` | pixel + vibrant + technical + balanced | Gaming, developer talks |
+| `scientific` | clean + cool + technical + dense | Biology, chemistry, medical |
+| `vector-illustration` | clean + vibrant + humanist + balanced | Creative, children's content |
+| `vintage` | paper + warm + editorial + balanced | Historical, heritage |
+
+### Style Dimensions
+
+| Dimension | Options | Description |
+|-----------|---------|-------------|
+| **Texture** | clean, grid, organic, pixel, paper | Visual texture and background treatment |
+| **Mood** | professional, warm, cool, vibrant, dark, neutral | Color temperature and palette style |
+| **Typography** | geometric, humanist, handwritten, editorial, technical | Headline and body text styling |
+| **Density** | minimal, balanced, dense | Information density per slide |
+
+Full specs: `references/dimensions/*.md`
+
+### Auto Style Selection
+
+| Content Signals | Preset |
+|-----------------|--------|
+| tutorial, learn, education, guide, beginner | `sketch-notes` |
+| classroom, teaching, school, chalkboard | `chalkboard` |
 | architecture, system, data, analysis, technical | `blueprint` |
-| creative, children, kids, cute, illustration | `vector-illustration` |
-| briefing, academic, research, bilingual, infographic, concept | `intuition-machine` |
-| executive, minimal, clean, simple, elegant | `minimal` |
-| saas, product, dashboard, metrics, productivity | `notion` |
-| investor, quarterly, business, corporate, proposal | `corporate` |
-| launch, marketing, keynote, bold, impact, magazine | `bold-editorial` |
-| entertainment, music, gaming, creative, atmospheric | `dark-atmospheric` |
+| creative, children, kids, cute | `vector-illustration` |
+| briefing, academic, research, bilingual | `intuition-machine` |
+| executive, minimal, clean, simple | `minimal` |
+| saas, product, dashboard, metrics | `notion` |
+| investor, quarterly, business, corporate | `corporate` |
+| launch, marketing, keynote, magazine | `bold-editorial` |
+| entertainment, music, gaming, atmospheric | `dark-atmospheric` |
 | explainer, journalism, science communication | `editorial-infographic` |
-| story, fantasy, animation, magical, whimsical | `fantasy-animation` |
-| gaming, retro, pixel, developer, nostalgia | `pixel-art` |
-| biology, chemistry, medical, pathway, scientific | `scientific` |
-| history, heritage, vintage, expedition, historical | `vintage` |
-| lifestyle, wellness, travel, artistic, natural | `watercolor` |
+| story, fantasy, animation, magical | `fantasy-animation` |
+| gaming, retro, pixel, developer | `pixel-art` |
+| biology, chemistry, medical, scientific | `scientific` |
+| history, heritage, vintage, expedition | `vintage` |
+| lifestyle, wellness, travel, artistic | `watercolor` |
 | Default | `blueprint` |

 ## Design Philosophy

-This deck is designed for **reading and sharing**, not live presentation:
- Each slide must be **self-explanatory** without verbal commentary
- Structure content for **logical flow** when scrolling
- Include **all necessary context** within each slide
- Optimize for **social media sharing** and offline reading
+Decks designed for **reading and sharing**, not live presentation:
+- Each slide self-explanatory without verbal commentary
+- Logical flow when scrolling
+- All necessary context within each slide
+- Optimized for social media sharing
+
+See `references/design-guidelines.md` for:
+- Audience-specific principles
+- Visual hierarchy
+- Content density guidelines
+- Color and typography selection
+- Font recommendations
+
+See `references/layouts.md` for layout options.

 ## File Management

 ### Output Directory

-Each session creates an independent directory named by content slug:
-
 ```
 slide-deck/{topic-slug}/
-├── source-{slug}.{ext}    # Source files (text, images, etc.)
+├── source-{slug}.{ext}
 ├── outline.md
-├── outline-{style}.md     # Style variant outlines
 ├── prompts/
 │   └── 01-slide-cover.md, 02-slide-{slug}.md, ...
 ├── 01-slide-cover.png, 02-slide-{slug}.png, ...
@@ -113,116 +139,543 @@ slide-deck/{topic-slug}/
 └── {topic-slug}.pdf
 ```

-**Slug Generation**:
-1. Extract main topic from content (2-4 words, kebab-case)
-2. Example: "Introduction to Machine Learning" → `intro-machine-learning`
+**Slug**: Extract topic (2-4 words, kebab-case). Example: "Introduction to Machine Learning" → `intro-machine-learning`

-### Conflict Resolution
+**Conflict Handling**: See Step 1.3 for existing content detection and user options.

-If `slide-deck/{topic-slug}/` already exists:
- Append timestamp: `{topic-slug}-YYYYMMDD-HHMMSS`
- Example: `intro-ml` exists → `intro-ml-20260118-143052`
+## Language Handling

-### Source Files
+**Detection Priority**:
+1. `--lang` flag (explicit)
+2. EXTEND.md `language` setting
+3. User's conversation language (input language)
+4. Source content language

-Copy all sources with naming `source-{slug}.{ext}`:
- `source-article.md` (main text content)
- `source-diagram.png` (image from conversation)
- `source-data.xlsx` (additional file)
+**Rule**: ALL responses use user's preferred language:
+- Questions and confirmations
+- Progress reports
+- Error messages
+- Completion summaries

-Multiple sources supported: text, images, files from conversation.
+Technical terms (style names, file paths, code) remain in English.

 ## Workflow

-### Step 1: Analyze Content
+Copy this checklist and check off items as you complete them:
+
+```
+Slide Deck Progress:
+- [ ] Step 1: Setup & Analyze
+  - [ ] 1.1 Load preferences
+  - [ ] 1.2 Analyze content
+  - [ ] 1.3 Check existing ⚠️ REQUIRED
+- [ ] Step 2: Confirmation ⚠️ REQUIRED (Round 1, optional Round 2)
+- [ ] Step 3: Generate outline
+- [ ] Step 4: Review outline (conditional)
+- [ ] Step 5: Generate prompts
+- [ ] Step 6: Review prompts (conditional)
+- [ ] Step 7: Generate images
+- [ ] Step 8: Merge to PPTX/PDF
+- [ ] Step 9: Output summary
+```
+
+### Flow
+
+```
+Input → Preferences → Analyze → [Check Existing?] → Confirm (1-2 rounds) → Outline → [Review Outline?] → Prompts → [Review Prompts?] → Images → Merge → Complete
+```
+
+### Step 1: Setup & Analyze
+
+**1.1 Load Preferences (EXTEND.md)**
+
+Use Bash to check EXTEND.md existence (priority order):
+
+```bash
+# Check project-level first
+test -f .baoyu-skills/baoyu-slide-deck/EXTEND.md && echo "project"
+
+# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
+test -f "$HOME/.baoyu-skills/baoyu-slide-deck/EXTEND.md" && echo "user"
+```
+
+┌──────────────────────────────────────────────────┬───────────────────┐
+│                       Path                       │     Location      │
+├──────────────────────────────────────────────────┼───────────────────┤
+│ .baoyu-skills/baoyu-slide-deck/EXTEND.md         │ Project directory │
+├──────────────────────────────────────────────────┼───────────────────┤
+│ $HOME/.baoyu-skills/baoyu-slide-deck/EXTEND.md   │ User home         │
+└──────────────────────────────────────────────────┴───────────────────┘
+
+**When EXTEND.md Found** → Read, parse, **output summary to user**:
+
+```
+📋 Loaded preferences from [full path]
+├─ Style: [preset/custom name]
+├─ Audience: [audience or "auto-detect"]
+├─ Language: [language or "auto-detect"]
+└─ Review: [enabled/disabled]
+```
+
+**When EXTEND.md Not Found** → First-time setup using AskUserQuestion or proceed with defaults.
+
+**EXTEND.md Supports**: Preferred style | Custom dimensions | Default audience | Language preference | Review preference
+
+Schema: `references/config/preferences-schema.md`
+
+**1.2 Analyze Content**

 1. Save source content (if pasted, save as `source.md`)
-2. Follow `references/analysis-framework.md` for deep content analysis
-3. Determine style (use `--style` or auto-select from signals)
-4. Detect languages (source vs. user preference)
-5. Plan slide count (`--slides` or dynamic)
+2. Follow `references/analysis-framework.md` for content analysis
+3. Analyze content signals for style recommendations
+4. Detect source language
+5. Determine recommended slide count
+6. Generate topic slug from content

-### Step 2: Generate Outline Variants
+**1.3 Check Existing Content** ⚠️ REQUIRED

-1. Generate 3 style variant outlines based on content analysis
-2. Follow `references/outline-template.md` for structure
-3. Save as `outline-{style}.md` for each variant
+**MUST execute before proceeding to Step 2.**

-### Step 3: User Confirmation
+Use Bash to check if output directory exists:

-**Single AskUserQuestion with all applicable options:**
+```bash
+test -d "slide-deck/{topic-slug}" && echo "exists"
+```

-| Question | When to Ask |
-|----------|-------------|
-| Style variant | Always (3 options + custom) |
-| Language | Only if source ≠ user language |
+**If directory exists**, use AskUserQuestion:

-After selection:
- Copy selected `outline-{style}.md` to `outline.md`
- Regenerate in different language if requested
- User may edit `outline.md` for fine-tuning
+```
+header: "Existing"
+question: "Existing content found. How to proceed?"
+options:
+  - label: "Regenerate outline"
+    description: "Keep images, regenerate outline only"
+  - label: "Regenerate images"
+    description: "Keep outline, regenerate images only"
+  - label: "Backup and regenerate"
+    description: "Backup to {slug}-backup-{timestamp}, then regenerate all"
+  - label: "Exit"
+    description: "Cancel, keep existing content unchanged"
+```

-If `--outline-only`, stop here.
+**Save to `analysis.md`** with:
+- Topic, audience, content signals
+- Recommended style (based on Auto Style Selection)
+- Recommended slide count
+- Language detection

-### Step 4: Generate Prompts
+### Step 2: Confirmation ⚠️ REQUIRED
+
+**Two-round confirmation**: Round 1 always, Round 2 only if "Custom dimensions" selected.
+
+**Language**: Use user's input language or saved language preference.
+
+**Display summary**:
+- Content type + topic identified
+- Language: [from EXTEND.md or detected]
+- **Recommended style**: [preset] (based on content signals)
+- **Recommended slides**: [N] (based on content length)
+
+#### Round 1 (Always)
+
+**Use AskUserQuestion** for all 5 questions:
+
+**Question 1: Style**
+```
+header: "Style"
+question: "Which visual style for this deck?"
+options:
+  - label: "{recommended_preset} (Recommended)"
+    description: "Best match based on content analysis"
+  - label: "{alternative_preset}"
+    description: "[alternative style description]"
+  - label: "Custom dimensions"
+    description: "Choose texture, mood, typography, density separately"
+```
+
+**Question 2: Audience**
+```
+header: "Audience"
+question: "Who is the primary reader?"
+options:
+  - label: "General readers (Recommended)"
+    description: "Broad appeal, accessible content"
+  - label: "Beginners/learners"
+    description: "Educational focus, clear explanations"
+  - label: "Experts/professionals"
+    description: "Technical depth, domain knowledge"
+  - label: "Executives"
+    description: "High-level insights, minimal detail"
+```
+
+**Question 3: Slide Count**
+```
+header: "Slides"
+question: "How many slides?"
+options:
+  - label: "{N} slides (Recommended)"
+    description: "Based on content length"
+  - label: "Fewer ({N-3} slides)"
+    description: "More condensed, less detail"
+  - label: "More ({N+3} slides)"
+    description: "More detailed breakdown"
+```
+
+**Question 4: Review Outline**
+```
+header: "Outline"
+question: "Review outline before generating prompts?"
+options:
+  - label: "Yes, review outline (Recommended)"
+    description: "Review slide titles and structure"
+  - label: "No, skip outline review"
+    description: "Proceed directly to prompt generation"
+```
+
+**Question 5: Review Prompts**
+```
+header: "Prompts"
+question: "Review prompts before generating images?"
+options:
+  - label: "Yes, review prompts (Recommended)"
+    description: "Review image generation prompts"
+  - label: "No, skip prompt review"
+    description: "Proceed directly to image generation"
+```
+
+#### Round 2 (Only if "Custom dimensions" selected)
+
+**Use AskUserQuestion** for all 4 dimensions:
+
+**Question 1: Texture**
+```
+header: "Texture"
+question: "Which visual texture?"
+options:
+  - label: "clean"
+    description: "Pure solid color, no texture"
+  - label: "grid"
+    description: "Subtle grid overlay, technical"
+  - label: "organic"
+    description: "Soft textures, hand-drawn feel"
+  - label: "pixel"
+    description: "Chunky pixels, 8-bit aesthetic"
+```
+(Note: "paper" available via Other)
+
+**Question 2: Mood**
+```
+header: "Mood"
+question: "Which color mood?"
+options:
+  - label: "professional"
+    description: "Cool-neutral, navy/gold"
+  - label: "warm"
+    description: "Earth tones, friendly"
+  - label: "cool"
+    description: "Blues, grays, analytical"
+  - label: "vibrant"
+    description: "High saturation, bold"
+```
+(Note: "dark", "neutral" available via Other)
+
+**Question 3: Typography**
+```
+header: "Typography"
+question: "Which typography style?"
+options:
+  - label: "geometric"
+    description: "Modern sans-serif, clean"
+  - label: "humanist"
+    description: "Friendly, readable"
+  - label: "handwritten"
+    description: "Marker/brush, organic"
+  - label: "editorial"
+    description: "Magazine style, dramatic"
+```
+(Note: "technical" available via Other)
+
+**Question 4: Density**
+```
+header: "Density"
+question: "Information density?"
+options:
+  - label: "balanced (Recommended)"
+    description: "2-3 key points per slide"
+  - label: "minimal"
+    description: "One focus point, maximum whitespace"
+  - label: "dense"
+    description: "Multiple data points, compact"
+```
+
+**After Round 2**: Store custom dimensions as the style configuration.
+
+**After Confirmation**:
+1. Update `analysis.md` with confirmed preferences
+2. Store `skip_outline_review` flag from Question 4
+3. Store `skip_prompt_review` flag from Question 5
+4. → Step 3
+
+### Step 3: Generate Outline
+
+Create outline using the confirmed style from Step 2.
+
+**Style Resolution**:
+- If preset selected → Read `references/styles/{preset}.md`
+- If custom dimensions → Read dimension files from `references/dimensions/` and combine
+
+**Generate**:
+1. Follow `references/outline-template.md` for structure
+2. Build STYLE_INSTRUCTIONS from style or dimensions
+3. Apply confirmed audience, language, slide count
+4. Save as `outline.md`
+
+**After generation**:
+- If `--outline-only`, stop here
+- If `skip_outline_review` is true → Skip Step 4, go to Step 5
+- If `skip_outline_review` is false → Continue to Step 4
+
+### Step 4: Review Outline (Conditional)
+
+**Skip this step** if user selected "No, skip outline review" in Step 2.
+
+**Purpose**: Review outline structure before prompt generation.
+
+**Language**: Use user's input language or saved language preference.
+
+**Display**:
+- Total slides: N
+- Style: [preset name or "custom: texture+mood+typography+density"]
+- Slide-by-slide summary table:
+
+```
+| # | Title | Type | Layout |
+|---|-------|------|--------|
+| 1 | [title] | Cover | title-hero |
+| 2 | [title] | Content | [layout] |
+| 3 | [title] | Content | [layout] |
+| ... | ... | ... | ... |
+```
+
+**Use AskUserQuestion**:
+```
+header: "Confirm"
+question: "Ready to generate prompts?"
+options:
+  - label: "Yes, proceed (Recommended)"
+    description: "Generate image prompts"
+  - label: "Edit outline first"
+    description: "I'll modify outline.md before continuing"
+  - label: "Regenerate outline"
+    description: "Create new outline with different approach"
+```
+
+**After response**:
+1. If "Edit outline first" → Inform user to edit `outline.md`, ask again when ready
+2. If "Regenerate outline" → Back to Step 3
+3. If "Yes, proceed" → Continue to Step 5
+
+### Step 5: Generate Prompts

 1. Read `references/base-prompt.md`
-2. Combine with style instructions from outline
-3. Add slide-specific content
-4. Save to `prompts/` directory
+2. For each slide in outline:
+   - Extract STYLE_INSTRUCTIONS from outline (not from style file again)
+   - Add slide-specific content
+   - If `Layout:` specified, include layout guidance from `references/layouts.md`
+3. Save to `prompts/` directory

-### Step 5: Generate Images
+**After generation**:
+- If `--prompts-only`, stop here and output prompt summary
+- If `skip_prompt_review` is true → Skip Step 6, go to Step 7
+- If `skip_prompt_review` is false → Continue to Step 6

+### Step 6: Review Prompts (Conditional)
+
+**Skip this step** if user selected "No, skip prompt review" in Step 2.
+
+**Purpose**: Review prompts before image generation.
+
+**Language**: Use user's input language or saved language preference.
+
+**Display**:
+- Total prompts: N
+- Style: [preset name or custom dimensions]
+- Prompt list:
+
+```
+| # | Filename | Slide Title |
+|---|----------|-------------|
+| 1 | 01-slide-cover.md | [title] |
+| 2 | 02-slide-xxx.md | [title] |
+| ... | ... | ... |
+```
+
+- Path to prompts directory: `prompts/`
+
+**Use AskUserQuestion**:
+```
+header: "Confirm"
+question: "Ready to generate slide images?"
+options:
+  - label: "Yes, proceed (Recommended)"
+    description: "Generate all slide images"
+  - label: "Edit prompts first"
+    description: "I'll modify prompts before continuing"
+  - label: "Regenerate prompts"
+    description: "Create new prompts with different approach"
+```
+
+**After response**:
+1. If "Edit prompts first" → Inform user to edit prompts, ask again when ready
+2. If "Regenerate prompts" → Back to Step 5
+3. If "Yes, proceed" → Continue to Step 7
+
+### Step 7: Generate Images
+
+**For `--images-only`**: Start here with existing prompts.
+
+**For `--regenerate N`**: Only regenerate specified slide(s).
+
+**Standard flow**:
 1. Select available image generation skill
 2. Generate session ID: `slides-{topic-slug}-{timestamp}`
-3. Generate each slide with same session ID
-4. Report progress: "Generated X/N"
+3. Generate each slide sequentially with same session ID
+4. Report progress: "Generated X/N" (in user's language)
+5. Auto-retry once on failure before reporting error

-### Step 6: Merge to PPTX and PDF
+### Step 8: Merge to PPTX and PDF

 ```bash
 npx -y bun ${SKILL_DIR}/scripts/merge-to-pptx.ts <slide-deck-dir>
 npx -y bun ${SKILL_DIR}/scripts/merge-to-pdf.ts <slide-deck-dir>
 ```

-### Step 7: Output Summary
+### Step 9: Output Summary
+
+**Language**: Use user's input language or saved language preference.

 ```
 Slide Deck Complete!

 Topic: [topic]
-Style: [style name]
+Style: [preset name or custom dimensions]
 Location: [directory path]
 Slides: N total

- 01-slide-cover.png ✓ Cover
- 02-slide-intro.png ✓ Content
+- 01-slide-cover.png - Cover
+- 02-slide-intro.png - Content
 - ...
- {NN}-slide-back-cover.png ✓ Back Cover
+- {NN}-slide-back-cover.png - Back Cover

 Outline: outline.md
 PPTX: {topic-slug}.pptx
 PDF: {topic-slug}.pdf
 ```

+## Partial Workflows
+
+| Option | Workflow |
+|--------|----------|
+| `--outline-only` | Steps 1-3 only (stop after outline) |
+| `--prompts-only` | Steps 1-5 (generate prompts, skip images) |
+| `--images-only` | Skip to Step 7 (requires existing prompts/) |
+| `--regenerate N` | Regenerate specific slide(s) only |
+
+### Using `--prompts-only`
+
+Generate outline and prompts without images:
+
+```bash
+/baoyu-slide-deck content.md --prompts-only
+```
+
+Output: `outline.md` + `prompts/*.md` ready for review/editing.
+
+### Using `--images-only`
+
+Generate images from existing prompts (starts at Step 7):
+
+```bash
+/baoyu-slide-deck slide-deck/topic-slug/ --images-only
+```
+
+Prerequisites:
+- `prompts/` directory with slide prompt files
+- `outline.md` with style information
+
+### Using `--regenerate`
+
+Regenerate specific slides:
+
+```bash
+# Single slide
+/baoyu-slide-deck slide-deck/topic-slug/ --regenerate 3
+
+# Multiple slides
+/baoyu-slide-deck slide-deck/topic-slug/ --regenerate 2,5,8
+```
+
+Flow:
+1. Read existing prompts for specified slides
+2. Regenerate images only for those slides
+3. Regenerate PPTX/PDF
+
 ## Slide Modification

-See `references/modification-guide.md` for:
- Edit single slide workflow
- Add new slide (with renumbering)
- Delete slide (with renumbering)
- File naming conventions
+### Quick Reference
+
+| Action | Command | Manual Steps |
+|--------|---------|--------------|
+| **Edit** | `--regenerate N` | Update prompt → Regenerate image → Regenerate PDF |
+| **Add** | Manual | Create prompt → Generate image → Renumber subsequent → Update outline → Regenerate PDF |
+| **Delete** | Manual | Remove files → Renumber subsequent → Update outline → Regenerate PDF |
+
+### Edit Single Slide
+
+1. Update prompt in `prompts/NN-slide-{slug}.md`
+2. Run: `/baoyu-slide-deck <dir> --regenerate N`
+3. Or manually regenerate image + PDF
+
+### Add New Slide
+
+1. Create prompt at position: `prompts/NN-slide-{new-slug}.md`
+2. Generate image using same session ID
+3. **Renumber**: Subsequent files NN+1 (slugs unchanged)
+4. Update `outline.md`
+5. Regenerate PPTX/PDF
+
+### Delete Slide
+
+1. Remove `NN-slide-{slug}.png` and `prompts/NN-slide-{slug}.md`
+2. **Renumber**: Subsequent files NN-1 (slugs unchanged)
+3. Update `outline.md`
+4. Regenerate PPTX/PDF
+
+### File Naming
+
+Format: `NN-slide-[slug].png`
+- `NN`: Two-digit sequence (01, 02, ...)
+- `slug`: Kebab-case from content (2-5 words, unique)
+
+**Renumbering Rule**: Only NN changes, slugs remain unchanged.
+
+See `references/modification-guide.md` for complete details.

 ## References

 | File | Content |
 |------|---------|
-| `references/analysis-framework.md` | Deep content analysis for presentations |
-| `references/outline-template.md` | Outline structure and STYLE_INSTRUCTIONS format |
+| `references/analysis-framework.md` | Content analysis for presentations |
+| `references/outline-template.md` | Outline structure and format |
 | `references/modification-guide.md` | Edit, add, delete slide workflows |
 | `references/content-rules.md` | Content and style guidelines |
+| `references/design-guidelines.md` | Audience, typography, colors, visual elements |
+| `references/layouts.md` | Layout options and selection tips |
 | `references/base-prompt.md` | Base prompt for image generation |
-| `references/styles/<style>.md` | Full style specifications |
+| `references/dimensions/*.md` | Dimension specifications (texture, mood, typography, density) |
+| `references/dimensions/presets.md` | Preset → dimension mapping |
+| `references/styles/<style>.md` | Full style specifications (legacy) |
+| `references/config/preferences-schema.md` | EXTEND.md structure |

 ## Notes

@@ -230,13 +683,10 @@ See `references/modification-guide.md` for:
 - Auto-retry once on generation failure
 - Use stylized alternatives for sensitive public figures
 - Maintain style consistency via session ID
+- **Step 2 confirmation required** - do not skip (style, audience, slides, outline review, prompt review)
+- **Step 4 conditional** - only if user requested outline review in Step 2
+- **Step 6 conditional** - only if user requested prompt review in Step 2

 ## Extension Support

-Custom styles and configurations via EXTEND.md.
-
-**Check paths** (priority order):
-1. `.baoyu-skills/baoyu-slide-deck/EXTEND.md` (project)
-2. `~/.baoyu-skills/baoyu-slide-deck/EXTEND.md` (user)
-
-If found, load before Step 1. Extension content overrides defaults.
+Custom configurations via EXTEND.md. See **Step 1.1** for paths and supported options.
@@ -52,8 +52,33 @@ You are "The Architect" - a master visual storyteller creating presentation slid

 ## STYLE_INSTRUCTIONS

-[Insert style-specific instructions here]
+[Extract from outline.md - do NOT re-read style files]
+
+The STYLE_INSTRUCTIONS block from the outline contains:
+- Design Aesthetic
+- Background (Texture + Base Color)
+- Typography (Headlines + Body descriptions)
+- Color Palette (with hex codes)
+- Visual Elements
+- Density Guidelines
+- Style Rules (Do/Don't)
+
+Copy the entire `<STYLE_INSTRUCTIONS>...</STYLE_INSTRUCTIONS>` block from the outline here.

 ---

-Please use nano banana pro to generate the slide image based on the content provided below:
+## SLIDE CONTENT
+
+[Insert slide-specific content from outline]
+
+Include:
+- Slide number and filename
+- Type (Cover/Content/Back Cover)
+- Narrative Goal
+- Key Content (Headline, Sub-headline, Body points)
+- Visual description
+- Layout guidance (if specified)
+
+---
+
+Please use nano banana pro to generate the slide image based on the content provided above.
@@ -0,0 +1,125 @@
+# EXTEND.md Schema
+
+Structure for user preferences in `.baoyu-skills/baoyu-slide-deck/EXTEND.md`.
+
+## Full Schema
+
+```yaml
+# Slide Deck Preferences
+
+## Defaults
+style: blueprint              # Preset name OR "custom"
+audience: general             # beginners | intermediate | experts | executives | general
+language: auto                # auto | en | zh | ja | etc.
+review: true                  # true = review outline before generation
+
+## Custom Dimensions (only when style: custom)
+dimensions:
+  texture: clean              # clean | grid | organic | pixel | paper
+  mood: professional          # professional | warm | cool | vibrant | dark | neutral
+  typography: geometric       # geometric | humanist | handwritten | editorial | technical
+  density: balanced           # minimal | balanced | dense
+
+## Custom Styles (optional)
+custom_styles:
+  my-style:
+    texture: organic
+    mood: warm
+    typography: humanist
+    density: minimal
+    description: "My custom warm and friendly style"
+```
+
+## Field Descriptions
+
+### Defaults
+
+| Field | Type | Default | Description |
+|-------|------|---------|-------------|
+| `style` | string | `blueprint` | Preset name, `custom`, or custom style name |
+| `audience` | string | `general` | Default target audience |
+| `language` | string | `auto` | Output language (auto = detect from input) |
+| `review` | boolean | `true` | Show outline review before generation |
+
+### Custom Dimensions
+
+Only used when `style: custom`. Defines dimension values directly.
+
+| Field | Options | Default |
+|-------|---------|---------|
+| `texture` | clean, grid, organic, pixel, paper | clean |
+| `mood` | professional, warm, cool, vibrant, dark, neutral | professional |
+| `typography` | geometric, humanist, handwritten, editorial, technical | geometric |
+| `density` | minimal, balanced, dense | balanced |
+
+### Custom Styles
+
+Define reusable custom dimension combinations.
+
+```yaml
+custom_styles:
+  style-name:
+    texture: <texture>
+    mood: <mood>
+    typography: <typography>
+    density: <density>
+    description: "Optional description"
+```
+
+Then use with: `/baoyu-slide-deck content.md --style style-name`
+
+## Minimal Examples
+
+### Just change default style
+
+```yaml
+style: sketch-notes
+```
+
+### Prefer no reviews
+
+```yaml
+review: false
+```
+
+### Custom default dimensions
+
+```yaml
+style: custom
+dimensions:
+  texture: organic
+  mood: professional
+  typography: humanist
+  density: minimal
+```
+
+### Define reusable custom style
+
+```yaml
+custom_styles:
+  brand-style:
+    texture: clean
+    mood: vibrant
+    typography: editorial
+    density: balanced
+    description: "Company brand style"
+```
+
+## File Locations
+
+Priority order (first found wins):
+
+1. `.baoyu-skills/baoyu-slide-deck/EXTEND.md` (project)
+2. `$HOME/.baoyu-skills/baoyu-slide-deck/EXTEND.md` (user)
+
+## First-Time Setup
+
+When no EXTEND.md exists, the skill prompts for initial preferences:
+
+1. Preferred style (preset or custom)
+2. Default audience
+3. Language preference
+4. Review preference
+5. Save location (project or user)
+
+Creates EXTEND.md at chosen location.
@@ -0,0 +1,208 @@
+# Design Guidelines
+
+Detailed design principles for slide decks.
+
+## Audience Guidelines
+
+Design decisions adapt to target audience. Use `--audience` to set.
+
+| Audience | Content Density | Visual Style | Terminology | Slides |
+|----------|-----------------|--------------|-------------|--------|
+| `beginners` | Low | Friendly, illustrative | Plain language | 8-15 |
+| `intermediate` | Medium | Balanced, structured | Some jargon OK | 10-20 |
+| `experts` | High | Data-rich, precise | Technical terms | 12-25 |
+| `executives` | Low-Medium | Clean, impactful | Business language | 8-12 |
+| `general` | Medium | Accessible, engaging | Minimal jargon | 10-18 |
+
+### Audience → Density Mapping
+
+Recommended density dimension based on audience:
+
+| Audience | Recommended Density | Rationale |
+|----------|-------------------|-----------|
+| `executives` | minimal | One insight per slide, respect time |
+| `beginners` | minimal → balanced | Single concepts, build understanding |
+| `general` | balanced | Accessible but informative |
+| `intermediate` | balanced | Standard information density |
+| `experts` | balanced → dense | Can handle more data per slide |
+
+**Automatic Density Selection**:
+- If `--audience executives` → default to `minimal` density
+- If `--audience beginners` → default to `minimal` or `balanced`
+- If `--audience experts` → allow `dense` density
+- Otherwise → default to `balanced`
+
+### Audience-Specific Principles
+
+**Beginners**:
+- One concept per slide
+- Visual metaphors over abstract diagrams
+- Step-by-step progression
+- Generous whitespace
+
+**Experts**:
+- Multiple data points per slide acceptable
+- Technical diagrams with precise labels
+- Assume domain knowledge
+- Dense but organized information
+
+**Executives**:
+- Lead with insights, not data
+- "So what?" on every slide
+- Decision-enabling content
+- Bottom-line upfront (BLUF)
+
+## Visual Hierarchy Principles
+
+| Principle | Description |
+|-----------|-------------|
+| Focal Point | ONE dominant element per slide draws attention first |
+| Rule of Thirds | Position key elements at grid intersections |
+| Z-Pattern | Guide eye: top-left → top-right → bottom-left → bottom-right |
+| Size Contrast | Headlines 2-3x larger than body text |
+| Breathing Room | Minimum 10% margin from all edges |
+
+## Content Density
+
+See `references/dimensions/density.md` for full density dimension specs.
+
+| Level | Description | Use When |
+|-------|-------------|----------|
+| High | Multiple data points, detailed charts, dense text | Expert audience, technical reviews |
+| Medium | Key points with supporting details | General business, mixed audiences |
+| Low | One main idea, large visuals, minimal text | Beginners, keynotes, emotional impact |
+
+**High-Density Principles** (McKinsey-style):
+- Every element earns its space
+- Data speaks louder than decoration
+- Annotations explain insights, not describe data
+- White space is strategic, not filler
+
+**Density by Slide Type**:
+| Slide Type | Recommended Density |
+|------------|-------------------|
+| Cover/Title | minimal |
+| Agenda/Overview | balanced |
+| Content/Analysis | balanced or dense |
+| Data/Metrics | dense |
+| Quote/Impact | minimal |
+| Summary/Takeaway | balanced |
+
+## Color Selection
+
+See `references/dimensions/mood.md` for full mood dimension specs.
+
+**Content-First Approach**:
+1. Analyze content topic, mood, and industry
+2. Consider target audience expectations
+3. Match palette to subject matter
+4. Ensure strong contrast for readability
+
+**Quick Palette Guide**:
+| Content Type | Recommended Mood |
+|--------------|-----------------|
+| Technical/Architecture | cool |
+| Educational/Friendly | warm |
+| Corporate/Professional | professional |
+| Creative/Artistic | vibrant |
+| Scientific/Medical | cool or neutral |
+| Entertainment/Gaming | dark or vibrant |
+
+## Typography Principles
+
+See `references/dimensions/typography.md` for full typography dimension specs.
+
+| Element | Treatment |
+|---------|-----------|
+| Headlines | Bold, 2-3x body size, narrative style |
+| Body Text | Regular weight, readable size |
+| Captions | Smaller, lighter weight |
+| Data Labels | Monospace for technical content |
+| Emphasis | Use bold or color, not underlines |
+
+## Font Recommendations
+
+**English Fonts**:
+| Font | Style | Best For |
+|------|-------|----------|
+| Liter | Sans-serif, geometric | Modern, clean, technical |
+| HedvigLettersSans | Sans-serif, distinctive | Brand-forward, creative |
+| Oranienbaum | High-contrast serif | Elegant, classical |
+| SortsMillGoudy | Classical serif | Traditional, readable |
+| Coda | Round sans-serif | Friendly, approachable |
+
+**Chinese Fonts**:
+| Font | Style | Best For |
+|------|-------|----------|
+| MiSans | Modern sans-serif | Clean, versatile, screen-optimized |
+| Noto Sans SC | Neutral sans-serif | Standard, multilingual |
+| siyuanSongti | Refined Song typeface | Elegant, editorial |
+| alimamashuheiti | Geometric sans-serif | Commercial, structured |
+| LXGW Bright | Song-Kai hybrid | Warm, readable |
+
+**Multilingual Pairing**:
+| Use Case | English | Chinese |
+|----------|---------|---------|
+| Technical | Liter | MiSans |
+| Editorial | Oranienbaum | siyuanSongti |
+| Friendly | Coda | LXGW Bright |
+| Corporate | HedvigLettersSans | alimamashuheiti |
+
+## Visual Elements Reference
+
+See `references/dimensions/texture.md` for full texture dimension specs.
+
+### Background Treatments
+
+| Treatment | Description | Best For |
+|-----------|-------------|----------|
+| Solid color | Single background color | Clean, minimal |
+| Split background | Two colors, diagonal or vertical | Contrast, sections |
+| Gradient | Subtle vertical or diagonal fade | Modern, dynamic |
+| Textured | Pattern or texture overlay | Character, style |
+
+### Typography Treatments
+
+| Treatment | Description | Best For |
+|-----------|-------------|----------|
+| Size contrast | 3-4x difference headline vs body | Impact, hierarchy |
+| All-caps headers | Uppercase with letter spacing | Authority, structure |
+| Monospace data | Fixed-width for numbers/code | Technical, precision |
+| Hand-drawn | Organic, imperfect letterforms | Friendly, approachable |
+
+### Geometric Accents
+
+| Element | Description | Best For |
+|---------|-------------|----------|
+| Diagonal dividers | Angled section separators | Energy, movement |
+| Corner brackets | L-shaped frames | Focus, framing |
+| Circles/hexagons | Shape frames for images | Modern, tech |
+| Underline accents | Thick lines under headers | Emphasis, hierarchy |
+
+## Consistency Requirements
+
+| Element | Guideline |
+|---------|-----------|
+| Spacing | Consistent margins and padding throughout |
+| Colors | Maximum 3-4 colors per slide, palette consistent across deck |
+| Typography | Same font families and sizes for same content types |
+| Visual Language | Repeat patterns, shapes, and treatments |
+
+## Dimension Combination Guide
+
+When combining dimensions, consider compatibility:
+
+| Audience | Recommended Dimensions |
+|----------|----------------------|
+| Executives | clean + neutral + geometric + minimal |
+| Beginners | organic + warm + humanist + minimal |
+| General | any texture + any mood + humanist/geometric + balanced |
+| Experts | grid/clean + cool + technical + balanced/dense |
+
+| Content Type | Recommended Dimensions |
+|--------------|----------------------|
+| Tutorial | organic + warm + handwritten + balanced |
+| Technical | grid + cool + technical + balanced |
+| Business | clean + professional + geometric + balanced |
+| Creative | organic + vibrant + humanist + balanced |
+| Data-heavy | clean + cool + technical + dense |
@@ -0,0 +1,118 @@
+# Density Dimension
+
+Information density per slide.
+
+## Options
+
+| Option | Content/Slide | Whitespace | Best For |
+|--------|---------------|------------|----------|
+| `minimal` | One focus point | Maximum | Executive briefings, keynotes, emotional impact |
+| `balanced` | 2-3 key points | Standard | General presentations, mixed audiences |
+| `dense` | Multiple data points | Compact | Data-heavy, technical reviews, detailed analysis |
+
+## Rendering Guidelines
+
+### minimal
+
+- ONE main idea per slide
+- Large visuals dominate
+- Minimal text (headline + 1-2 lines max)
+- Generous margins (15%+ from edges)
+- Maximum breathing room between elements
+- Let single element carry full weight
+
+**Principles**:
+- "One slide, one message"
+- Visual > text
+- Empty space is intentional
+- Every element must earn its space
+
+### balanced
+
+- 2-3 key points per slide
+- Standard margins (10% from edges)
+- Balanced text/visual ratio
+- Clear hierarchy with supporting details
+- Comfortable reading experience
+
+**Principles**:
+- Primary point + supporting context
+- Visuals complement text
+- Structured but not crowded
+- Good for diverse audiences
+
+### dense
+
+- Multiple data points acceptable
+- Compact margins (5-8% from edges)
+- Information-rich layouts
+- Charts, tables, detailed annotations
+- Assume engaged, attentive audience
+
+**Principles**:
+- Data speaks louder than decoration
+- Annotations explain insights
+- White space is strategic
+- Every pixel serves a purpose
+
+## Audience → Density Mapping
+
+| Audience | Recommended Density |
+|----------|-------------------|
+| Executives | minimal |
+| Beginners | minimal to balanced |
+| General | balanced |
+| Intermediate | balanced |
+| Experts | balanced to dense |
+
+## Slide Type → Density Guidelines
+
+| Slide Type | Recommended Density |
+|------------|-------------------|
+| Cover/Title | minimal |
+| Section break | minimal |
+| Quote/Impact | minimal |
+| Agenda/Overview | balanced |
+| Content/Analysis | balanced or dense |
+| Summary/Takeaway | balanced |
+| Data/Metrics | dense |
+
+## Content Guidelines Per Density
+
+### minimal
+
+| Element | Guideline |
+|---------|-----------|
+| Headlines | Large (40-60pt equivalent) |
+| Body text | Minimal or none |
+| Bullet points | 0-2 max |
+| Visual elements | 1 dominant element |
+| Charts/Data | 1 key stat only |
+
+### balanced
+
+| Element | Guideline |
+|---------|-----------|
+| Headlines | Medium-large (32-48pt equivalent) |
+| Body text | 2-4 lines |
+| Bullet points | 2-4 |
+| Visual elements | 1-2 elements |
+| Charts/Data | Simple charts OK |
+
+### dense
+
+| Element | Guideline |
+|---------|-----------|
+| Headlines | Medium (24-36pt equivalent) |
+| Body text | Multiple paragraphs OK |
+| Bullet points | 4-6+ |
+| Visual elements | Multiple allowed |
+| Charts/Data | Complex charts, tables OK |
+
+## Combination Notes
+
+| Density | Works Best With | Avoid With |
+|---------|-----------------|------------|
+| minimal | neutral mood, geometric typography | dense data content |
+| balanced | any mood/typography | extremes (too sparse or too packed) |
+| dense | cool mood, technical typography | handwritten typography, organic texture |
@@ -0,0 +1,135 @@
+# Mood Dimension
+
+Color temperature and palette style.
+
+## Options
+
+| Option | Color Temperature | Palette Style | Best For |
+|--------|-------------------|---------------|----------|
+| `professional` | Cool-neutral | Navy, gold, structured grays | Business, investor, corporate |
+| `warm` | Warm | Earth tones, oranges, natural colors | Education, friendly, approachable |
+| `cool` | Cool | Blues, grays, cyan, teal | Technical, data, analytical |
+| `vibrant` | Varied | High saturation, bold colors | Marketing, creative, attention-grabbing |
+| `dark` | Dark | Deep backgrounds with bright accents | Entertainment, gaming, atmospheric |
+| `neutral` | Neutral | Minimal color, grayscale focus | Executive, minimal, sophisticated |
+
+## Palette Specifications
+
+### professional
+
+```
+Background: #FFFFFF (Pure White)
+Primary Text: #1E3A5F (Navy)
+Secondary Text: #4A5568 (Dark Gray)
+Accent 1: #C9A227 (Gold)
+Accent 2: #3D5A80 (Light Navy)
+```
+
+### warm
+
+```
+Background: #FAF8F0 (Warm Off-White)
+Primary Text: #2C3E50 (Deep Charcoal)
+Secondary Text: #4A4A4A (Deep Brown)
+Accent 1: #F4A261 (Soft Orange)
+Accent 2: #E9C46A (Mustard Yellow)
+Accent 3: #87A96B (Sage Green)
+```
+
+### cool
+
+```
+Background: #FAF8F5 (Blueprint Off-White)
+Primary Text: #334155 (Deep Slate)
+Secondary Text: #64748B (Slate Gray)
+Accent 1: #2563EB (Engineering Blue)
+Accent 2: #1E3A5F (Navy Blue)
+Accent 3: #BFDBFE (Light Blue)
+```
+
+### vibrant
+
+```
+Background: #FFFFFF or #1A1A2E (Light or Dark)
+Primary Text: #1A1A2E or #FFFFFF
+Accent 1: #E94560 (Coral Red)
+Accent 2: #0F3460 (Deep Blue)
+Accent 3: #16C79A (Teal Green)
+Accent 4: #F9B208 (Golden Yellow)
+```
+
+### dark
+
+```
+Background: #0D1117 (Deep Black)
+Primary Text: #E6EDF3 (Soft White)
+Secondary Text: #8B949E (Muted Gray)
+Accent 1: #58A6FF (Bright Blue)
+Accent 2: #7EE787 (Bright Green)
+Accent 3: #FF7B72 (Coral)
+```
+
+### neutral
+
+```
+Background: #FFFFFF (Pure White)
+Primary Text: #18181B (Near Black)
+Secondary Text: #71717A (Medium Gray)
+Accent 1: #18181B (Black)
+Accent 2: #A1A1AA (Light Gray)
+```
+
+## Rendering Guidelines
+
+### professional
+
+- Restrained use of accent colors
+- Gold for emphasis only
+- Clean, institutional feel
+- Balanced contrast
+
+### warm
+
+- Generous use of warm tones
+- Natural, approachable colors
+- Soft transitions between colors
+- Welcoming atmosphere
+
+### cool
+
+- Blue-dominant palette
+- Technical precision in color use
+- High contrast for clarity
+- Analytical, trustworthy feel
+
+### vibrant
+
+- Bold color combinations
+- High saturation throughout
+- Dynamic color contrasts
+- Energetic visual presence
+
+### dark
+
+- Deep backgrounds dominate
+- Accent colors pop against dark
+- Glowing/luminous effects
+- Cinematic atmosphere
+
+### neutral
+
+- Minimal color usage
+- Typography carries weight
+- Grayscale hierarchy
+- Maximum sophistication
+
+## Combination Notes
+
+| Mood | Works Best With | Avoid With |
+|------|-----------------|------------|
+| professional | clean texture, geometric typography | organic texture, handwritten |
+| warm | organic texture, humanist typography | pixel texture, minimal density |
+| cool | grid texture, technical typography | paper texture, handwritten |
+| vibrant | pixel/organic texture, editorial typography | neutral mood overlaps |
+| dark | clean/pixel texture, technical typography | paper texture |
+| neutral | clean texture, geometric typography | organic texture, vibrant elements |
@@ -0,0 +1,126 @@
+# Preset → Dimension Mapping
+
+Maps 16 preset styles to their dimension combinations.
+
+## Mapping Table
+
+| Preset | Texture | Mood | Typography | Density |
+|--------|---------|------|------------|---------|
+| blueprint | grid | cool | technical | balanced |
+| chalkboard | organic | warm | handwritten | balanced |
+| corporate | clean | professional | geometric | balanced |
+| minimal | clean | neutral | geometric | minimal |
+| sketch-notes | organic | warm | handwritten | balanced |
+| watercolor | organic | warm | humanist | minimal |
+| dark-atmospheric | clean | dark | editorial | balanced |
+| notion | clean | neutral | geometric | dense |
+| bold-editorial | clean | vibrant | editorial | balanced |
+| editorial-infographic | clean | cool | editorial | dense |
+| fantasy-animation | organic | vibrant | handwritten | minimal |
+| intuition-machine | clean | cool | technical | dense |
+| pixel-art | pixel | vibrant | technical | balanced |
+| scientific | clean | cool | technical | dense |
+| vector-illustration | clean | vibrant | humanist | balanced |
+| vintage | paper | warm | editorial | balanced |
+
+## Preset Details
+
+### blueprint
+- **Dimensions**: grid + cool + technical + balanced
+- **Feel**: Engineering precision, analytical clarity
+- **Auto-select**: architecture, system, data, analysis, technical
+
+### chalkboard
+- **Dimensions**: organic + warm + handwritten + balanced
+- **Feel**: Classroom warmth, educational
+- **Auto-select**: classroom, teaching, school, chalkboard
+
+### corporate
+- **Dimensions**: clean + professional + geometric + balanced
+- **Feel**: Business credibility, institutional trust
+- **Auto-select**: investor, quarterly, business, corporate
+
+### minimal
+- **Dimensions**: clean + neutral + geometric + minimal
+- **Feel**: Maximum sophistication, executive focus
+- **Auto-select**: executive, minimal, clean, simple
+
+### sketch-notes
+- **Dimensions**: organic + warm + handwritten + balanced
+- **Feel**: Friendly learning, approachable education
+- **Auto-select**: tutorial, learn, education, guide, beginner
+
+### watercolor
+- **Dimensions**: organic + warm + humanist + minimal
+- **Feel**: Artistic, natural, lifestyle
+- **Auto-select**: lifestyle, wellness, travel, artistic
+
+### dark-atmospheric
+- **Dimensions**: clean + dark + editorial + balanced
+- **Feel**: Cinematic, entertainment
+- **Auto-select**: entertainment, music, gaming, atmospheric
+
+### notion
+- **Dimensions**: clean + neutral + geometric + dense
+- **Feel**: SaaS professional, data-forward
+- **Auto-select**: saas, product, dashboard, metrics
+
+### bold-editorial
+- **Dimensions**: clean + vibrant + editorial + balanced
+- **Feel**: Magazine impact, keynote drama
+- **Auto-select**: launch, marketing, keynote, magazine
+
+### editorial-infographic
+- **Dimensions**: clean + cool + editorial + dense
+- **Feel**: Publication quality, informative
+- **Auto-select**: explainer, journalism, science communication
+
+### fantasy-animation
+- **Dimensions**: organic + vibrant + handwritten + minimal
+- **Feel**: Magical, storytelling
+- **Auto-select**: story, fantasy, animation, magical
+
+### intuition-machine
+- **Dimensions**: clean + cool + technical + dense
+- **Feel**: Technical briefing, bilingual documentation
+- **Auto-select**: briefing, academic, research, bilingual
+
+### pixel-art
+- **Dimensions**: pixel + vibrant + technical + balanced
+- **Feel**: Retro gaming, developer culture
+- **Auto-select**: gaming, retro, pixel, developer
+
+### scientific
+- **Dimensions**: clean + cool + technical + dense
+- **Feel**: Academic precision, research quality
+- **Auto-select**: biology, chemistry, medical, scientific
+
+### vector-illustration
+- **Dimensions**: clean + vibrant + humanist + balanced
+- **Feel**: Flat design, friendly creative
+- **Auto-select**: creative, children, kids, cute
+
+### vintage
+- **Dimensions**: paper + warm + editorial + balanced
+- **Feel**: Historical, heritage storytelling
+- **Auto-select**: history, heritage, vintage, expedition
+
+## Building Custom Combinations
+
+When user selects "Custom dimensions", combine any:
+
+- **Texture** (5): clean, grid, organic, pixel, paper
+- **Mood** (6): professional, warm, cool, vibrant, dark, neutral
+- **Typography** (5): geometric, humanist, handwritten, editorial, technical
+- **Density** (3): minimal, balanced, dense
+
+Total possible combinations: 5 × 6 × 5 × 3 = **450 unique styles**
+
+## Recommended Combinations (Beyond Presets)
+
+| Custom Name | Texture | Mood | Typography | Density | Use Case |
+|-------------|---------|------|------------|---------|----------|
+| tech-minimal | clean | neutral | technical | minimal | Developer keynotes |
+| warm-editorial | paper | warm | editorial | balanced | Heritage brands |
+| dark-technical | grid | dark | technical | dense | Security, DevOps |
+| playful-clean | clean | vibrant | humanist | balanced | Startups, apps |
@@ -0,0 +1,60 @@
+# Texture Dimension
+
+Visual texture and background treatment.
+
+## Options
+
+| Option | Background | Visual Elements | Best For |
+|--------|------------|-----------------|----------|
+| `clean` | Pure solid color, no texture | Clean lines, geometric shapes | Executive, minimal, corporate |
+| `grid` | Subtle grid overlay | Grid lines, schematics, technical diagrams | Technical, architecture, engineering |
+| `organic` | Soft textures, hand-drawn feel | Brush strokes, watercolor, sketchy lines | Creative, educational, friendly |
+| `pixel` | Chunky pixels, 8-bit aesthetic | Pixel art, retro game elements | Gaming, developer, nostalgic |
+| `paper` | Aged/textured paper | Vintage elements, stamps, weathering | Historical, heritage, storytelling |
+
+## Rendering Guidelines
+
+### clean
+
+- Solid background colors with no visible texture
+- Crisp, sharp edges on all elements
+- Digital precision and clarity
+- Maximum contrast for readability
+
+### grid
+
+- Light grid overlay (5-10% opacity)
+- Engineering paper or blueprint feel
+- Alignment guides visible but subtle
+- Technical drawing aesthetic
+
+### organic
+
+- Paper grain or canvas texture
+- Imperfect edges, natural variations
+- Hand-painted color fills
+- Casual, approachable feel
+
+### pixel
+
+- Visible pixel grid (chunky, not fine)
+- 8-bit color palette aesthetic
+- Aliased edges (no smoothing)
+- Retro game UI elements
+
+### paper
+
+- Aged paper texture (subtle creases, discoloration)
+- Vintage printing artifacts
+- Sepia or warm tones
+- Historical document feel
+
+## Combination Notes
+
+| Texture | Works Best With | Avoid With |
+|---------|-----------------|------------|
+| clean | professional, neutral moods | handwritten typography |
+| grid | cool, professional moods | handwritten, vibrant moods |
+| organic | warm, vibrant moods | technical typography |
+| pixel | vibrant, dark moods | editorial typography |
+| paper | warm moods | geometric typography, minimal density |
@@ -0,0 +1,97 @@
+# Typography Dimension
+
+Headline and body text styling.
+
+## Options
+
+| Option | Headline Style | Body Style | Best For |
+|--------|----------------|------------|----------|
+| `geometric` | Modern sans-serif, clean angles | Clean sans-serif | Corporate, tech, modern |
+| `humanist` | Friendly sans-serif, warm curves | Readable sans-serif | Education, general audiences |
+| `handwritten` | Marker/brush, organic feel | Casual script or print | Creative, sketch, friendly |
+| `editorial` | Bold serif/sans mix, magazine style | Classic serif | Keynote, magazine, premium |
+| `technical` | Monospace accents, precise | Clean sans-serif | Developer, data, engineering |
+
+## Rendering Guidelines
+
+### geometric
+
+**Headlines**: Modern geometric sans-serif with clean angles and consistent stroke width. Think Futura, Avenir, or Proxima Nova. Bold to semi-bold weight. Perfect circles in O, G characters.
+
+**Body**: Clean sans-serif optimized for readability. Regular weight. Consistent x-height. Sufficient letter spacing.
+
+**Characteristics**:
+- Mathematical precision in letterforms
+- Consistent stroke widths
+- Perfect geometry in curves
+- Modern, authoritative presence
+
+### humanist
+
+**Headlines**: Friendly sans-serif with subtle stroke variations. Think Frutiger, Open Sans, or Myriad. Medium to semi-bold weight. Warm, approachable letterforms.
+
+**Body**: Readable humanist sans-serif. Comfortable line height. Slight calligraphic influence.
+
+**Characteristics**:
+- Warm, approachable feel
+- Subtle stroke contrast
+- Open counters for readability
+- Natural, human touch
+
+### handwritten
+
+**Headlines**: Bold hand-written marker or brush lettering. Thick strokes with organic edges. Slightly uneven baseline. Render as actual hand-drawn letters.
+
+**Body**: Clear handwritten style mimicking notes. Casual but legible. Natural variation in letter forms.
+
+**Characteristics**:
+- Organic, imperfect letterforms
+- Visible brush/pen character
+- Casual, personal feel
+- NOT computer fonts - actual drawn letters
+
+### editorial
+
+**Headlines**: Bold serif or high-contrast sans-serif. Magazine cover style. Dramatic scale contrast. Think Playfair Display, Didot, or bold condensed sans.
+
+**Body**: Classic serif for extended reading. Elegant, refined letterforms. Traditional publishing quality.
+
+**Characteristics**:
+- High contrast (thick/thin strokes)
+- Dramatic headlines
+- Sophisticated presence
+- Premium, publication quality
+
+### technical
+
+**Headlines**: Clean sans-serif with monospace accents for data/code. Precise, engineered appearance. Think SF Mono for code, Inter for headers.
+
+**Body**: Clean sans-serif optimized for technical content. Fixed-width for numbers and code.
+
+**Characteristics**:
+- Monospace for data elements
+- Precise alignment
+- Clear number distinction (0 vs O, 1 vs l)
+- Engineering precision
+
+## Font Rendering Instructions
+
+Since image generators cannot use font names, describe visual characteristics:
+
+| Option | Headline Description | Body Description |
+|--------|---------------------|------------------|
+| geometric | "bold geometric sans-serif with perfect circular O shapes" | "clean modern sans-serif" |
+| humanist | "friendly rounded sans-serif with warm letterforms" | "readable humanist sans-serif" |
+| handwritten | "bold hand-drawn marker lettering with organic strokes" | "casual handwritten notes style" |
+| editorial | "dramatic high-contrast serif with thick-thin stroke variation" | "elegant classic serif" |
+| technical | "precise sans-serif with monospace numbers" | "technical sans-serif, fixed-width for code" |
+
+## Combination Notes
+
+| Typography | Works Best With | Avoid With |
+|------------|-----------------|------------|
+| geometric | clean texture, professional/neutral mood | organic texture |
+| humanist | organic/clean texture, warm mood | pixel texture |
+| handwritten | organic/paper texture, warm/vibrant mood | grid texture, professional mood |
+| editorial | clean texture, vibrant/professional mood | pixel texture |
+| technical | grid/clean texture, cool/dark mood | paper texture, warm mood |
@@ -0,0 +1,65 @@
+# Layout Gallery
+
+Optional layout hints for individual slides. Specify in outline's `// LAYOUT` section.
+
+## Slide-Specific Layouts
+
+| Layout | Description | Best For |
+|--------|-------------|----------|
+| `title-hero` | Large centered title + subtitle | Cover slides, section breaks |
+| `quote-callout` | Featured quote with attribution | Testimonials, key insights |
+| `key-stat` | Single large number as focal point | Impact statistics, metrics |
+| `split-screen` | Half image, half text | Feature highlights, comparisons |
+| `icon-grid` | Grid of icons with labels | Features, capabilities, benefits |
+| `two-columns` | Content in balanced columns | Paired information, dual points |
+| `three-columns` | Content in three columns | Triple comparisons, categories |
+| `image-caption` | Full-bleed image + text overlay | Visual storytelling, emotional |
+| `agenda` | Numbered list with highlights | Session overview, roadmap |
+| `bullet-list` | Structured bullet points | Simple content, lists |
+
+## Infographic-Derived Layouts
+
+| Layout | Description | Best For |
+|--------|-------------|----------|
+| `linear-progression` | Sequential flow left-to-right | Timelines, step-by-step |
+| `binary-comparison` | Side-by-side A vs B | Before/after, pros-cons |
+| `comparison-matrix` | Multi-factor grid | Feature comparisons |
+| `hierarchical-layers` | Pyramid or stacked levels | Priority, importance |
+| `hub-spoke` | Central node with radiating items | Concept maps, ecosystems |
+| `bento-grid` | Varied-size tiles | Overview, summary |
+| `funnel` | Narrowing stages | Conversion, filtering |
+| `dashboard` | Metrics with charts/numbers | KPIs, data display |
+| `venn-diagram` | Overlapping circles | Relationships, intersections |
+| `circular-flow` | Continuous cycle | Recurring processes |
+| `winding-roadmap` | Curved path with milestones | Journey, timeline |
+| `tree-branching` | Parent-child hierarchy | Org charts, taxonomies |
+| `iceberg` | Visible vs hidden layers | Surface vs depth |
+| `bridge` | Gap with connection | Problem-solution |
+
+**Usage**: Add `Layout: <name>` in slide's `// LAYOUT` section.
+
+## Layout Selection Tips
+
+**Match Layout to Content**:
+| Content Type | Recommended Layouts |
+|--------------|-------------------|
+| Single narrative | `bullet-list`, `image-caption` |
+| Two concepts | `split-screen`, `binary-comparison` |
+| Three items | `three-columns`, `icon-grid` |
+| Process/Steps | `linear-progression`, `winding-roadmap` |
+| Data/Metrics | `dashboard`, `key-stat` |
+| Relationships | `hub-spoke`, `venn-diagram` |
+| Hierarchy | `hierarchical-layers`, `tree-branching` |
+
+**Layout Flow Patterns**:
+| Position | Recommended Layouts |
+|----------|-------------------|
+| Opening | `title-hero`, `agenda` |
+| Middle | Content-specific layouts |
+| Closing | `quote-callout`, `key-stat` |
+
+**Common Mistakes to Avoid**:
+- Using 3-column layout for 2 items (leaves columns empty)
+- Stacking charts/tables below text (use side-by-side instead)
+- Image layouts without actual images
+- Quote layouts for emphasis (use only for real quotes with attribution)
@@ -8,7 +8,8 @@ Standard structure for slide deck outlines with style instructions.
 # Slide Deck Outline

 **Topic**: [topic description]
-**Style**: [selected style]
+**Style**: [preset name OR "custom"]
+**Dimensions**: [texture] + [mood] + [typography] + [density]
 **Audience**: [target audience]
 **Language**: [output language]
 **Slide Count**: N slides
@@ -17,15 +18,15 @@ Standard structure for slide deck outlines with style instructions.
 ---

 <STYLE_INSTRUCTIONS>
-Design Aesthetic: [2-3 sentence description from style file]
+Design Aesthetic: [2-3 sentence description combining dimension characteristics]

 Background:
-  Color: [Name] ([Hex])
-  Texture: [description]
+  Texture: [from texture dimension]
+  Base Color: [from mood dimension palette]

 Typography:
-  Primary Font: [detailed description for image generation]
-  Secondary Font: [detailed description for image generation]
+  Headlines: [from typography dimension - describe visual appearance]
+  Body: [from typography dimension - describe visual appearance]

 Color Palette:
  Primary Text: [Name] ([Hex]) - [usage]
@@ -34,13 +35,17 @@ Color Palette:
  Accent 2: [Name] ([Hex]) - [usage]

 Visual Elements:
-  - [element 1 with rendering guidance]
+  - [element 1 from texture + mood combination]
  - [element 2 with rendering guidance]
  - ...

+Density Guidelines:
+  - Content per slide: [from density dimension]
+  - Whitespace: [from density dimension]
+
 Style Rules:
-  Do: [guidelines from style file]
-  Don't: [anti-patterns from style file]
+  Do: [guidelines from dimension combinations]
+  Don't: [anti-patterns from dimension combinations]
 </STYLE_INSTRUCTIONS>

 ---
@@ -48,6 +53,88 @@ Style Rules:
 [Slide entries follow...]
 ```

+## Building STYLE_INSTRUCTIONS from Dimensions
+
+When using custom dimensions or presets, build STYLE_INSTRUCTIONS by combining:
+
+### 1. Design Aesthetic
+
+Combine characteristics from all four dimensions into 2-3 sentences:
+
+| Texture | Contribution |
+|---------|--------------|
+| clean | "Clean, digital precision with crisp edges" |
+| grid | "Technical grid overlay with engineering precision" |
+| organic | "Hand-drawn feel with soft textures" |
+| pixel | "Chunky pixel aesthetic with 8-bit charm" |
+| paper | "Aged paper texture with vintage character" |
+
+| Mood | Contribution |
+|------|--------------|
+| professional | "Professional navy and gold palette" |
+| warm | "Warm earth tones creating approachable atmosphere" |
+| cool | "Cool analytical blues and grays" |
+| vibrant | "Bold, high-saturation colors with energy" |
+| dark | "Deep cinematic backgrounds with glowing accents" |
+| neutral | "Minimal grayscale sophistication" |
+
+### 2. Background
+
+From `references/dimensions/texture.md`:
+- Texture description
+- Base color from mood palette
+
+### 3. Typography
+
+From `references/dimensions/typography.md`:
+- Headline visual description (NOT font names)
+- Body text visual description (NOT font names)
+
+**Important**: Describe appearance for image generation: "bold geometric sans-serif with perfect circular O shapes" NOT "Inter font".
+
+### 4. Color Palette
+
+From `references/dimensions/mood.md`:
+- Copy the palette specifications for the selected mood
+- Include hex codes and usage notes
+
+### 5. Visual Elements
+
+Combine texture and mood characteristics:
+
+| Combination | Visual Elements |
+|-------------|-----------------|
+| clean + professional | Clean charts, outlined icons, structured grids |
+| grid + cool | Technical schematics, dimension lines, blueprints |
+| organic + warm | Hand-drawn icons, brush strokes, doodles |
+| pixel + vibrant | Pixel art icons, retro game elements |
+| paper + warm | Vintage stamps, aged elements, sepia overlays |
+
+### 6. Density Guidelines
+
+From `references/dimensions/density.md`:
+- Content per slide limits
+- Whitespace requirements
+- Element count guidelines
+
+### 7. Style Rules
+
+Combine dimension-specific rules:
+
+**Do rules by texture**:
+- clean: Maintain sharp edges, use grid alignment
+- grid: Show precise measurements, use technical diagrams
+- organic: Allow imperfection, layer with subtle overlaps
+- pixel: Keep aliased edges, use chunky elements
+- paper: Add subtle aging effects, use warm tones
+
+**Don't rules by texture**:
+- clean: Don't use hand-drawn elements
+- grid: Don't use organic curves
+- organic: Don't use perfect geometry
+- pixel: Don't smooth edges
+- paper: Don't use bright digital colors
+
 ## Cover Slide Template

 ```markdown
@@ -67,6 +154,7 @@ Sub-headline: [supporting tagline]
 [Detailed visual description - specific elements, composition, mood]

 // LAYOUT
+Layout: [optional: layout name from gallery, e.g., title-hero]
 [Composition, hierarchy, spatial arrangement]
 ```

@@ -93,6 +181,7 @@ Body:
 [Detailed visual description]

 // LAYOUT
+Layout: [optional: layout name from gallery]
 [Composition, hierarchy, spatial arrangement]
 ```

@@ -115,23 +204,39 @@ Body: [optional summary points or next steps]
 [Visual that reinforces the core message]

 // LAYOUT
+Layout: [optional: layout name from gallery]
 [Clean, impactful composition]
 ```

 ## STYLE_INSTRUCTIONS Block

-The `<STYLE_INSTRUCTIONS>` block contains all style-specific guidance for image generation:
+The `<STYLE_INSTRUCTIONS>` block is the SINGLE SOURCE OF TRUTH for style information in this outline.

-| Section | Content |
-|---------|---------|
-| Design Aesthetic | Overall visual direction from style file |
-| Background | Base color and texture details |
-| Typography | Font descriptions for Gemini (no font names, describe appearance) |
-| Color Palette | Named colors with hex codes and usage guidance |
-| Visual Elements | Specific graphic elements with rendering instructions |
-| Style Rules | Do/Don't guidelines from style file |
+| Section | Content | Source |
+|---------|---------|--------|
+| Design Aesthetic | Overall visual direction | Combined from all dimensions |
+| Background | Base color and texture details | texture + mood dimensions |
+| Typography | Font descriptions (visual, not names) | typography dimension |
+| Color Palette | Named colors with hex codes and usage | mood dimension |
+| Visual Elements | Graphic elements with rendering instructions | texture + mood dimensions |
+| Density Guidelines | Content limits and whitespace | density dimension |
+| Style Rules | Do/Don't guidelines | Combined from dimensions |

-**Important**: Typography descriptions must describe the visual appearance (e.g., "rounded sans-serif", "bold geometric") since image generators cannot use font names.
+**Important**:
+- Typography descriptions must describe visual appearance (e.g., "rounded sans-serif", "bold geometric") since image generators cannot use font names
+- Prompts should extract STYLE_INSTRUCTIONS from this outline, NOT re-read style files
+
+## Preset → Dimensions Reference
+
+When using a preset, look up dimensions in `references/dimensions/presets.md`:
+
+| Preset | Dimensions |
+|--------|------------|
+| blueprint | grid + cool + technical + balanced |
+| sketch-notes | organic + warm + handwritten + balanced |
+| corporate | clean + professional + geometric + balanced |
+| minimal | clean + neutral + geometric + minimal |
+| ... | See presets.md for full mapping |

 ## Section Dividers

@@ -0,0 +1,120 @@
+---
+name: baoyu-url-to-markdown
+description: Fetch any URL and convert to markdown using Chrome CDP. Supports two modes - auto-capture on page load, or wait for user signal (for pages requiring login). Use when user wants to save a webpage as markdown.
+---
+
+# URL to Markdown
+
+Fetches any URL via Chrome CDP and converts HTML to clean markdown.
+
+## 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 URL fetching |
+
+## Preferences (EXTEND.md)
+
+Use Bash to check EXTEND.md existence (priority order):
+
+```bash
+# Check project-level first
+test -f .baoyu-skills/baoyu-url-to-markdown/EXTEND.md && echo "project"
+
+# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
+test -f "$HOME/.baoyu-skills/baoyu-url-to-markdown/EXTEND.md" && echo "user"
+```
+
+┌────────────────────────────────────────────────────────┬───────────────────┐
+│                          Path                          │     Location      │
+├────────────────────────────────────────────────────────┼───────────────────┤
+│ .baoyu-skills/baoyu-url-to-markdown/EXTEND.md          │ Project directory │
+├────────────────────────────────────────────────────────┼───────────────────┤
+│ $HOME/.baoyu-skills/baoyu-url-to-markdown/EXTEND.md    │ User home         │
+└────────────────────────────────────────────────────────┴───────────────────┘
+
+┌───────────┬───────────────────────────────────────────────────────────────────────────┐
+│  Result   │                                  Action                                   │
+├───────────┼───────────────────────────────────────────────────────────────────────────┤
+│ Found     │ Read, parse, apply settings                                               │
+├───────────┼───────────────────────────────────────────────────────────────────────────┤
+│ Not found │ Use defaults                                                              │
+└───────────┴───────────────────────────────────────────────────────────────────────────┘
+
+**EXTEND.md Supports**: Default output directory | Default capture mode | Timeout settings
+
+## Features
+
+- Chrome CDP for full JavaScript rendering
+- Two capture modes: auto or wait-for-user
+- Clean markdown output with metadata
+- Handles login-required pages via wait mode
+
+## Usage
+
+```bash
+# Auto mode (default) - capture when page loads
+npx -y bun ${SKILL_DIR}/scripts/main.ts <url>
+
+# Wait mode - wait for user signal before capture
+npx -y bun ${SKILL_DIR}/scripts/main.ts <url> --wait
+
+# Save to specific file
+npx -y bun ${SKILL_DIR}/scripts/main.ts <url> -o output.md
+```
+
+## Options
+
+| Option | Description |
+|--------|-------------|
+| `<url>` | URL to fetch |
+| `-o <path>` | Output file path (default: auto-generated) |
+| `--wait` | Wait for user signal before capturing |
+| `--timeout <ms>` | Page load timeout (default: 30000) |
+
+## Capture Modes
+
+| Mode | Behavior | Use When |
+|------|----------|----------|
+| Auto (default) | Capture on network idle | Public pages, static content |
+| Wait (`--wait`) | User signals when ready | Login-required, lazy loading, paywalls |
+
+**Wait mode workflow**:
+1. Run with `--wait` → script outputs "Press Enter when ready"
+2. Ask user to confirm page is ready
+3. Send newline to stdin to trigger capture
+
+## Output Format
+
+YAML front matter with `url`, `title`, `description`, `author`, `published`, `captured_at` fields, followed by converted markdown content.
+
+## Output Directory
+
+```
+url-to-markdown/<domain>/<slug>.md
+```
+
+- `<slug>`: From page title or URL path (kebab-case, 2-6 words)
+- Conflict resolution: Append timestamp `<slug>-YYYYMMDD-HHMMSS.md`
+
+## Environment Variables
+
+| Variable | Description |
+|----------|-------------|
+| `URL_CHROME_PATH` | Custom Chrome executable path |
+| `URL_DATA_DIR` | Custom data directory |
+| `URL_CHROME_PROFILE_DIR` | Custom Chrome profile directory |
+
+**Troubleshooting**: Chrome not found → set `URL_CHROME_PATH`. Timeout → increase `--timeout`. Complex pages → try `--wait` mode.
+
+## Extension Support
+
+Custom configurations via EXTEND.md. See **Preferences** section for paths and supported options.
@@ -0,0 +1,290 @@
+import { spawn, type ChildProcess } from "node:child_process";
+import fs from "node:fs";
+import { mkdir } from "node:fs/promises";
+import net from "node:net";
+import process from "node:process";
+
+import { resolveUrlToMarkdownChromeProfileDir } from "./paths.js";
+import { CDP_CONNECT_TIMEOUT_MS, NETWORK_IDLE_TIMEOUT_MS } from "./constants.js";
+
+type CdpSendOptions = { sessionId?: string; timeoutMs?: number };
+
+function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+async function fetchWithTimeout(url: string, init: RequestInit & { timeoutMs?: number } = {}): Promise<Response> {
+  const { timeoutMs, ...rest } = init;
+  if (!timeoutMs || timeoutMs <= 0) return fetch(url, rest);
+  const ctl = new AbortController();
+  const t = setTimeout(() => ctl.abort(), timeoutMs);
+  try {
+    return await fetch(url, { ...rest, signal: ctl.signal });
+  } finally {
+    clearTimeout(t);
+  }
+}
+
+export class CdpConnection {
+  private ws: WebSocket;
+  private nextId = 0;
+  private pending = new Map<number, { resolve: (v: unknown) => void; reject: (e: Error) => void; timer: ReturnType<typeof setTimeout> | null }>();
+  private eventHandlers = new Map<string, Set<(params: unknown) => void>>();
+
+  private constructor(ws: WebSocket) {
+    this.ws = ws;
+    this.ws.addEventListener("message", (event) => {
+      try {
+        const data = typeof event.data === "string" ? event.data : new TextDecoder().decode(event.data as ArrayBuffer);
+        const msg = JSON.parse(data) as { id?: number; method?: string; params?: unknown; result?: unknown; error?: { message?: string } };
+        if (msg.id) {
+          const p = this.pending.get(msg.id);
+          if (p) {
+            this.pending.delete(msg.id);
+            if (p.timer) clearTimeout(p.timer);
+            if (msg.error?.message) p.reject(new Error(msg.error.message));
+            else p.resolve(msg.result);
+          }
+        } else if (msg.method) {
+          const handlers = this.eventHandlers.get(msg.method);
+          if (handlers) {
+            for (const h of handlers) h(msg.params);
+          }
+        }
+      } catch {}
+    });
+    this.ws.addEventListener("close", () => {
+      for (const [id, p] of this.pending.entries()) {
+        this.pending.delete(id);
+        if (p.timer) clearTimeout(p.timer);
+        p.reject(new Error("CDP connection closed."));
+      }
+    });
+  }
+
+  static async connect(url: string, timeoutMs: number): Promise<CdpConnection> {
+    const ws = new WebSocket(url);
+    await new Promise<void>((resolve, reject) => {
+      const t = setTimeout(() => reject(new Error("CDP connection timeout.")), timeoutMs);
+      ws.addEventListener("open", () => { clearTimeout(t); resolve(); });
+      ws.addEventListener("error", () => { clearTimeout(t); reject(new Error("CDP connection failed.")); });
+    });
+    return new CdpConnection(ws);
+  }
+
+  on(event: string, handler: (params: unknown) => void): void {
+    let handlers = this.eventHandlers.get(event);
+    if (!handlers) {
+      handlers = new Set();
+      this.eventHandlers.set(event, handlers);
+    }
+    handlers.add(handler);
+  }
+
+  off(event: string, handler: (params: unknown) => void): void {
+    this.eventHandlers.get(event)?.delete(handler);
+  }
+
+  async send<T = unknown>(method: string, params?: Record<string, unknown>, opts?: CdpSendOptions): Promise<T> {
+    const id = ++this.nextId;
+    const msg: Record<string, unknown> = { id, method };
+    if (params) msg.params = params;
+    if (opts?.sessionId) msg.sessionId = opts.sessionId;
+    const timeoutMs = opts?.timeoutMs ?? 15_000;
+    const out = await new Promise<unknown>((resolve, reject) => {
+      const t = timeoutMs > 0 ? setTimeout(() => { this.pending.delete(id); reject(new Error(`CDP timeout: ${method}`)); }, timeoutMs) : null;
+      this.pending.set(id, { resolve, reject, timer: t });
+      this.ws.send(JSON.stringify(msg));
+    });
+    return out as T;
+  }
+
+  close(): void {
+    try { this.ws.close(); } catch {}
+  }
+}
+
+export async function getFreePort(): Promise<number> {
+  return await new Promise((resolve, reject) => {
+    const srv = net.createServer();
+    srv.unref();
+    srv.on("error", reject);
+    srv.listen(0, "127.0.0.1", () => {
+      const addr = srv.address();
+      if (!addr || typeof addr === "string") {
+        srv.close(() => reject(new Error("Unable to allocate a free TCP port.")));
+        return;
+      }
+      const port = addr.port;
+      srv.close((err) => (err ? reject(err) : resolve(port)));
+    });
+  });
+}
+
+export function findChromeExecutable(): string | null {
+  const override = process.env.URL_CHROME_PATH?.trim();
+  if (override && fs.existsSync(override)) return override;
+
+  const candidates: string[] = [];
+  switch (process.platform) {
+    case "darwin":
+      candidates.push(
+        "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
+        "/Applications/Google Chrome Canary.app/Contents/MacOS/Google Chrome Canary",
+        "/Applications/Google Chrome Beta.app/Contents/MacOS/Google Chrome Beta",
+        "/Applications/Chromium.app/Contents/MacOS/Chromium",
+        "/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge"
+      );
+      break;
+    case "win32":
+      candidates.push(
+        "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
+        "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
+        "C:\\Program Files\\Microsoft\\Edge\\Application\\msedge.exe",
+        "C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe"
+      );
+      break;
+    default:
+      candidates.push(
+        "/usr/bin/google-chrome",
+        "/usr/bin/google-chrome-stable",
+        "/usr/bin/chromium",
+        "/usr/bin/chromium-browser",
+        "/snap/bin/chromium",
+        "/usr/bin/microsoft-edge"
+      );
+      break;
+  }
+
+  for (const p of candidates) {
+    if (fs.existsSync(p)) return p;
+  }
+  return null;
+}
+
+export async function waitForChromeDebugPort(port: number, timeoutMs: number): Promise<string> {
+  const start = Date.now();
+  while (Date.now() - start < timeoutMs) {
+    try {
+      const res = await fetchWithTimeout(`http://127.0.0.1:${port}/json/version`, { timeoutMs: 5_000 });
+      if (!res.ok) throw new Error(`status=${res.status}`);
+      const j = (await res.json()) as { webSocketDebuggerUrl?: string };
+      if (j.webSocketDebuggerUrl) return j.webSocketDebuggerUrl;
+    } catch {}
+    await sleep(200);
+  }
+  throw new Error("Chrome debug port not ready");
+}
+
+export async function launchChrome(url: string, port: number, headless: boolean = false): Promise<ChildProcess> {
+  const chrome = findChromeExecutable();
+  if (!chrome) throw new Error("Chrome executable not found. Install Chrome or set URL_CHROME_PATH env.");
+  const profileDir = resolveUrlToMarkdownChromeProfileDir();
+  await mkdir(profileDir, { recursive: true });
+
+  const args = [
+    `--remote-debugging-port=${port}`,
+    `--user-data-dir=${profileDir}`,
+    "--no-first-run",
+    "--no-default-browser-check",
+    "--disable-popup-blocking",
+  ];
+  if (headless) args.push("--headless=new");
+  args.push(url);
+
+  return spawn(chrome, args, { stdio: "ignore" });
+}
+
+export async function waitForNetworkIdle(cdp: CdpConnection, sessionId: string, timeoutMs: number = NETWORK_IDLE_TIMEOUT_MS): Promise<void> {
+  return new Promise((resolve) => {
+    let timer: ReturnType<typeof setTimeout> | null = null;
+    let pending = 0;
+    const cleanup = () => {
+      if (timer) clearTimeout(timer);
+      cdp.off("Network.requestWillBeSent", onRequest);
+      cdp.off("Network.loadingFinished", onFinish);
+      cdp.off("Network.loadingFailed", onFinish);
+    };
+    const done = () => { cleanup(); resolve(); };
+    const resetTimer = () => {
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(done, timeoutMs);
+    };
+    const onRequest = () => { pending++; resetTimer(); };
+    const onFinish = () => { pending = Math.max(0, pending - 1); if (pending <= 2) resetTimer(); };
+    cdp.on("Network.requestWillBeSent", onRequest);
+    cdp.on("Network.loadingFinished", onFinish);
+    cdp.on("Network.loadingFailed", onFinish);
+    resetTimer();
+  });
+}
+
+export async function waitForPageLoad(cdp: CdpConnection, sessionId: string, timeoutMs: number = 30_000): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const timer = setTimeout(() => {
+      cdp.off("Page.loadEventFired", handler);
+      resolve();
+    }, timeoutMs);
+    const handler = () => {
+      clearTimeout(timer);
+      cdp.off("Page.loadEventFired", handler);
+      resolve();
+    };
+    cdp.on("Page.loadEventFired", handler);
+  });
+}
+
+export async function createTargetAndAttach(cdp: CdpConnection, url: string): Promise<{ targetId: string; sessionId: string }> {
+  const { targetId } = await cdp.send<{ targetId: string }>("Target.createTarget", { url });
+  const { sessionId } = await cdp.send<{ sessionId: string }>("Target.attachToTarget", { targetId, flatten: true });
+  await cdp.send("Network.enable", {}, { sessionId });
+  await cdp.send("Page.enable", {}, { sessionId });
+  return { targetId, sessionId };
+}
+
+export async function navigateAndWait(cdp: CdpConnection, sessionId: string, url: string, timeoutMs: number): Promise<void> {
+  const loadPromise = new Promise<void>((resolve, reject) => {
+    const timer = setTimeout(() => reject(new Error("Page load timeout")), timeoutMs);
+    const handler = (params: unknown) => {
+      const p = params as { name?: string };
+      if (p.name === "load" || p.name === "DOMContentLoaded") {
+        clearTimeout(timer);
+        cdp.off("Page.lifecycleEvent", handler);
+        resolve();
+      }
+    };
+    cdp.on("Page.lifecycleEvent", handler);
+  });
+  await cdp.send("Page.navigate", { url }, { sessionId });
+  await loadPromise;
+}
+
+export async function evaluateScript<T>(cdp: CdpConnection, sessionId: string, expression: string, timeoutMs: number = 30_000): Promise<T> {
+  const result = await cdp.send<{ result: { value?: T; type?: string; description?: string } }>(
+    "Runtime.evaluate",
+    { expression, returnByValue: true, awaitPromise: true },
+    { sessionId, timeoutMs }
+  );
+  return result.result.value as T;
+}
+
+export async function autoScroll(cdp: CdpConnection, sessionId: string, steps: number = 8, waitMs: number = 600): Promise<void> {
+  let lastHeight = await evaluateScript<number>(cdp, sessionId, "document.body.scrollHeight");
+  for (let i = 0; i < steps; i++) {
+    await evaluateScript<void>(cdp, sessionId, "window.scrollTo(0, document.body.scrollHeight)");
+    await sleep(waitMs);
+    const newHeight = await evaluateScript<number>(cdp, sessionId, "document.body.scrollHeight");
+    if (newHeight === lastHeight) break;
+    lastHeight = newHeight;
+  }
+  await evaluateScript<void>(cdp, sessionId, "window.scrollTo(0, 0)");
+}
+
+export function killChrome(chrome: ChildProcess): void {
+  try { chrome.kill("SIGTERM"); } catch {}
+  setTimeout(() => {
+    if (!chrome.killed) {
+      try { chrome.kill("SIGKILL"); } catch {}
+    }
+  }, 2_000).unref?.();
+}
@@ -0,0 +1,13 @@
+import { resolveUrlToMarkdownChromeProfileDir } from "./paths.js";
+
+export const DEFAULT_USER_AGENT =
+  "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36";
+
+export const USER_DATA_DIR = resolveUrlToMarkdownChromeProfileDir();
+
+export const DEFAULT_TIMEOUT_MS = 30_000;
+export const CDP_CONNECT_TIMEOUT_MS = 15_000;
+export const NETWORK_IDLE_TIMEOUT_MS = 1_500;
+export const POST_LOAD_DELAY_MS = 800;
+export const SCROLL_STEP_WAIT_MS = 600;
+export const SCROLL_MAX_STEPS = 8;
@@ -0,0 +1,223 @@
+export interface PageMetadata {
+  url: string;
+  title: string;
+  description?: string;
+  author?: string;
+  published?: string;
+  captured_at: string;
+}
+
+export interface ConversionResult {
+  metadata: PageMetadata;
+  markdown: string;
+}
+
+export const cleanupAndExtractScript = `
+(function() {
+  const removeSelectors = [
+    'script', 'style', 'noscript', 'iframe', 'svg', 'canvas',
+    'header nav', 'footer', '.sidebar', '.nav', '.navigation',
+    '.advertisement', '.ad', '.ads', '.cookie-banner', '.popup',
+    '[role="banner"]', '[role="navigation"]', '[role="complementary"]'
+  ];
+
+  for (const sel of removeSelectors) {
+    try {
+      document.querySelectorAll(sel).forEach(el => el.remove());
+    } catch {}
+  }
+
+  document.querySelectorAll('*').forEach(el => {
+    el.removeAttribute('style');
+    el.removeAttribute('onclick');
+    el.removeAttribute('onload');
+    el.removeAttribute('onerror');
+  });
+
+  const baseUrl = document.baseURI || location.href;
+  document.querySelectorAll('a[href]').forEach(a => {
+    try {
+      const href = a.getAttribute('href');
+      if (href && !href.startsWith('#') && !href.startsWith('javascript:')) {
+        a.setAttribute('href', new URL(href, baseUrl).href);
+      }
+    } catch {}
+  });
+  document.querySelectorAll('img[src]').forEach(img => {
+    try {
+      const src = img.getAttribute('src');
+      if (src) img.setAttribute('src', new URL(src, baseUrl).href);
+    } catch {}
+  });
+
+  const getMeta = (names) => {
+    for (const name of names) {
+      const el = document.querySelector(\`meta[name="\${name}"], meta[property="\${name}"]\`);
+      if (el) {
+        const content = el.getAttribute('content');
+        if (content) return content.trim();
+      }
+    }
+    return undefined;
+  };
+
+  const getTitle = () => {
+    const ogTitle = getMeta(['og:title', 'twitter:title']);
+    if (ogTitle) return ogTitle;
+    const h1 = document.querySelector('h1');
+    if (h1) return h1.textContent?.trim();
+    return document.title?.trim() || '';
+  };
+
+  const getPublished = () => {
+    const timeEl = document.querySelector('time[datetime]');
+    if (timeEl) return timeEl.getAttribute('datetime');
+    return getMeta(['article:published_time', 'datePublished', 'date']);
+  };
+
+  const main = document.querySelector('main, article, [role="main"], .main-content, .post-content, .article-content, .content');
+  const html = main ? main.innerHTML : document.body.innerHTML;
+
+  return {
+    title: getTitle(),
+    description: getMeta(['description', 'og:description', 'twitter:description']),
+    author: getMeta(['author', 'article:author', 'twitter:creator']),
+    published: getPublished(),
+    html: html
+  };
+})()
+`;
+
+function decodeHtmlEntities(text: string): string {
+  return text
+    .replace(/&nbsp;/g, ' ')
+    .replace(/&amp;/g, '&')
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'")
+    .replace(/&#x27;/g, "'")
+    .replace(/&#(\d+);/g, (_, n) => String.fromCharCode(parseInt(n, 10)))
+    .replace(/&#x([0-9a-fA-F]+);/g, (_, n) => String.fromCharCode(parseInt(n, 16)));
+}
+
+function stripTags(html: string): string {
+  return html.replace(/<[^>]+>/g, '');
+}
+
+function normalizeWhitespace(text: string): string {
+  return text.replace(/[ \t]+/g, ' ').replace(/\n{3,}/g, '\n\n').trim();
+}
+
+export function htmlToMarkdown(html: string): string {
+  let md = html;
+
+  md = md.replace(/<br\s*\/?>/gi, '\n');
+  md = md.replace(/<hr\s*\/?>/gi, '\n\n---\n\n');
+
+  md = md.replace(/<h1[^>]*>([\s\S]*?)<\/h1>/gi, (_, c) => `\n\n# ${stripTags(c).trim()}\n\n`);
+  md = md.replace(/<h2[^>]*>([\s\S]*?)<\/h2>/gi, (_, c) => `\n\n## ${stripTags(c).trim()}\n\n`);
+  md = md.replace(/<h3[^>]*>([\s\S]*?)<\/h3>/gi, (_, c) => `\n\n### ${stripTags(c).trim()}\n\n`);
+  md = md.replace(/<h4[^>]*>([\s\S]*?)<\/h4>/gi, (_, c) => `\n\n#### ${stripTags(c).trim()}\n\n`);
+  md = md.replace(/<h5[^>]*>([\s\S]*?)<\/h5>/gi, (_, c) => `\n\n##### ${stripTags(c).trim()}\n\n`);
+  md = md.replace(/<h6[^>]*>([\s\S]*?)<\/h6>/gi, (_, c) => `\n\n###### ${stripTags(c).trim()}\n\n`);
+
+  md = md.replace(/<strong[^>]*>([\s\S]*?)<\/strong>/gi, (_, c) => `**${stripTags(c).trim()}**`);
+  md = md.replace(/<b[^>]*>([\s\S]*?)<\/b>/gi, (_, c) => `**${stripTags(c).trim()}**`);
+  md = md.replace(/<em[^>]*>([\s\S]*?)<\/em>/gi, (_, c) => `*${stripTags(c).trim()}*`);
+  md = md.replace(/<i[^>]*>([\s\S]*?)<\/i>/gi, (_, c) => `*${stripTags(c).trim()}*`);
+  md = md.replace(/<del[^>]*>([\s\S]*?)<\/del>/gi, (_, c) => `~~${stripTags(c).trim()}~~`);
+  md = md.replace(/<s[^>]*>([\s\S]*?)<\/s>/gi, (_, c) => `~~${stripTags(c).trim()}~~`);
+  md = md.replace(/<mark[^>]*>([\s\S]*?)<\/mark>/gi, (_, c) => `==${stripTags(c).trim()}==`);
+
+  md = md.replace(/<a[^>]*href=["']([^"']+)["'][^>]*>([\s\S]*?)<\/a>/gi, (_, href, text) => {
+    const t = stripTags(text).trim();
+    if (!t || href.startsWith('javascript:')) return t;
+    return `[${t}](${href})`;
+  });
+
+  md = md.replace(/<img[^>]*src=["']([^"']+)["'][^>]*alt=["']([^"']*)["'][^>]*\/?>/gi, (_, src, alt) => `![${alt}](${src})`);
+  md = md.replace(/<img[^>]*alt=["']([^"']*)["'][^>]*src=["']([^"']+)["'][^>]*\/?>/gi, (_, alt, src) => `![${alt}](${src})`);
+  md = md.replace(/<img[^>]*src=["']([^"']+)["'][^>]*\/?>/gi, (_, src) => `![](${src})`);
+
+  md = md.replace(/<pre[^>]*><code[^>]*>([\s\S]*?)<\/code><\/pre>/gi, (_, code) => `\n\n\`\`\`\n${decodeHtmlEntities(stripTags(code)).trim()}\n\`\`\`\n\n`);
+  md = md.replace(/<pre[^>]*>([\s\S]*?)<\/pre>/gi, (_, code) => `\n\n\`\`\`\n${decodeHtmlEntities(stripTags(code)).trim()}\n\`\`\`\n\n`);
+  md = md.replace(/<code[^>]*>([\s\S]*?)<\/code>/gi, (_, code) => `\`${decodeHtmlEntities(stripTags(code)).trim()}\``);
+
+  md = md.replace(/<blockquote[^>]*>([\s\S]*?)<\/blockquote>/gi, (_, content) => {
+    const lines = stripTags(content).trim().split('\n');
+    return '\n\n' + lines.map(l => `> ${l.trim()}`).join('\n') + '\n\n';
+  });
+
+  md = md.replace(/<ul[^>]*>([\s\S]*?)<\/ul>/gi, (_, items) => {
+    const lis = items.match(/<li[^>]*>([\s\S]*?)<\/li>/gi) || [];
+    const lines = lis.map(li => {
+      const content = li.replace(/<li[^>]*>([\s\S]*?)<\/li>/i, '$1');
+      return `- ${stripTags(content).trim()}`;
+    });
+    return '\n\n' + lines.join('\n') + '\n\n';
+  });
+
+  md = md.replace(/<ol[^>]*>([\s\S]*?)<\/ol>/gi, (_, items) => {
+    const lis = items.match(/<li[^>]*>([\s\S]*?)<\/li>/gi) || [];
+    const lines = lis.map((li, i) => {
+      const content = li.replace(/<li[^>]*>([\s\S]*?)<\/li>/i, '$1');
+      return `${i + 1}. ${stripTags(content).trim()}`;
+    });
+    return '\n\n' + lines.join('\n') + '\n\n';
+  });
+
+  md = md.replace(/<table[^>]*>([\s\S]*?)<\/table>/gi, (_, table) => {
+    const rows: string[][] = [];
+    const trMatches = table.match(/<tr[^>]*>([\s\S]*?)<\/tr>/gi) || [];
+    for (const tr of trMatches) {
+      const cells: string[] = [];
+      const cellMatches = tr.match(/<t[hd][^>]*>([\s\S]*?)<\/t[hd]>/gi) || [];
+      for (const cell of cellMatches) {
+        const content = cell.replace(/<t[hd][^>]*>([\s\S]*?)<\/t[hd]>/i, '$1');
+        cells.push(stripTags(content).trim().replace(/\|/g, '\\|'));
+      }
+      if (cells.length > 0) rows.push(cells);
+    }
+    if (rows.length === 0) return '';
+    const colCount = Math.max(...rows.map(r => r.length));
+    const normalizedRows = rows.map(r => {
+      while (r.length < colCount) r.push('');
+      return r;
+    });
+    const header = `| ${normalizedRows[0].join(' | ')} |`;
+    const sep = `| ${normalizedRows[0].map(() => '---').join(' | ')} |`;
+    const body = normalizedRows.slice(1).map(r => `| ${r.join(' | ')} |`).join('\n');
+    return '\n\n' + header + '\n' + sep + (body ? '\n' + body : '') + '\n\n';
+  });
+
+  md = md.replace(/<p[^>]*>([\s\S]*?)<\/p>/gi, (_, c) => `\n\n${stripTags(c).trim()}\n\n`);
+  md = md.replace(/<div[^>]*>([\s\S]*?)<\/div>/gi, (_, c) => `\n${stripTags(c).trim()}\n`);
+  md = md.replace(/<span[^>]*>([\s\S]*?)<\/span>/gi, (_, c) => stripTags(c));
+
+  md = stripTags(md);
+  md = decodeHtmlEntities(md);
+  md = normalizeWhitespace(md);
+
+  return md;
+}
+
+export function formatMetadataYaml(meta: PageMetadata): string {
+  const lines = ['---'];
+  lines.push(`url: ${meta.url}`);
+  lines.push(`title: "${meta.title.replace(/"/g, '\\"')}"`);
+  if (meta.description) lines.push(`description: "${meta.description.replace(/"/g, '\\"')}"`);
+  if (meta.author) lines.push(`author: "${meta.author.replace(/"/g, '\\"')}"`);
+  if (meta.published) lines.push(`published: "${meta.published}"`);
+  lines.push(`captured_at: "${meta.captured_at}"`);
+  lines.push('---');
+  return lines.join('\n');
+}
+
+export function createMarkdownDocument(result: ConversionResult): string {
+  const yaml = formatMetadataYaml(result.metadata);
+  const titleRegex = new RegExp(`^#\\s+${result.metadata.title.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\s*\\n`, 'i');
+  const hasTitle = titleRegex.test(result.markdown);
+  const title = result.metadata.title && !hasTitle ? `\n\n# ${result.metadata.title}\n\n` : '\n\n';
+  return yaml + title + result.markdown;
+}
@@ -0,0 +1,176 @@
+import { createInterface } from "node:readline";
+import { writeFile, mkdir, access } from "node:fs/promises";
+import path from "node:path";
+import process from "node:process";
+
+import { CdpConnection, getFreePort, launchChrome, waitForChromeDebugPort, waitForNetworkIdle, waitForPageLoad, autoScroll, evaluateScript, killChrome } from "./cdp.js";
+import { cleanupAndExtractScript, htmlToMarkdown, createMarkdownDocument, type PageMetadata, type ConversionResult } from "./html-to-markdown.js";
+import { resolveUrlToMarkdownDataDir } from "./paths.js";
+import { DEFAULT_TIMEOUT_MS, CDP_CONNECT_TIMEOUT_MS, NETWORK_IDLE_TIMEOUT_MS, POST_LOAD_DELAY_MS, SCROLL_STEP_WAIT_MS, SCROLL_MAX_STEPS } from "./constants.js";
+
+function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+async function fileExists(filePath: string): Promise<boolean> {
+  try {
+    await access(filePath);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+interface Args {
+  url: string;
+  output?: string;
+  wait: boolean;
+  timeout: number;
+}
+
+function parseArgs(argv: string[]): Args {
+  const args: Args = { url: "", wait: false, timeout: DEFAULT_TIMEOUT_MS };
+  for (let i = 2; i < argv.length; i++) {
+    const arg = argv[i];
+    if (arg === "--wait" || arg === "-w") {
+      args.wait = true;
+    } else if (arg === "-o" || arg === "--output") {
+      args.output = argv[++i];
+    } else if (arg === "--timeout" || arg === "-t") {
+      args.timeout = parseInt(argv[++i], 10) || DEFAULT_TIMEOUT_MS;
+    } else if (!arg.startsWith("-") && !args.url) {
+      args.url = arg;
+    }
+  }
+  return args;
+}
+
+function generateSlug(title: string, url: string): string {
+  const text = title || new URL(url).pathname.replace(/\//g, "-");
+  return text
+    .toLowerCase()
+    .replace(/[^\w\s-]/g, "")
+    .replace(/\s+/g, "-")
+    .replace(/-+/g, "-")
+    .replace(/^-|-$/g, "")
+    .slice(0, 50) || "page";
+}
+
+function formatTimestamp(): string {
+  const now = new Date();
+  const pad = (n: number) => n.toString().padStart(2, "0");
+  return `${now.getFullYear()}${pad(now.getMonth() + 1)}${pad(now.getDate())}-${pad(now.getHours())}${pad(now.getMinutes())}${pad(now.getSeconds())}`;
+}
+
+async function generateOutputPath(url: string, title: string): Promise<string> {
+  const domain = new URL(url).hostname.replace(/^www\./, "");
+  const slug = generateSlug(title, url);
+  const dataDir = resolveUrlToMarkdownDataDir();
+  const basePath = path.join(dataDir, domain, `${slug}.md`);
+
+  if (!(await fileExists(basePath))) {
+    return basePath;
+  }
+
+  const timestampSlug = `${slug}-${formatTimestamp()}`;
+  return path.join(dataDir, domain, `${timestampSlug}.md`);
+}
+
+async function waitForUserSignal(): Promise<void> {
+  console.log("Page opened. Press Enter when ready to capture...");
+  const rl = createInterface({ input: process.stdin, output: process.stdout });
+  await new Promise<void>((resolve) => {
+    rl.once("line", () => { rl.close(); resolve(); });
+  });
+}
+
+async function captureUrl(args: Args): Promise<ConversionResult> {
+  const port = await getFreePort();
+  const chrome = await launchChrome(args.url, port, false);
+
+  let cdp: CdpConnection | null = null;
+  try {
+    const wsUrl = await waitForChromeDebugPort(port, 30_000);
+    cdp = await CdpConnection.connect(wsUrl, CDP_CONNECT_TIMEOUT_MS);
+
+    const targets = await cdp.send<{ targetInfos: Array<{ targetId: string; type: string; url: string }> }>("Target.getTargets");
+    const pageTarget = targets.targetInfos.find(t => t.type === "page" && t.url.startsWith("http"));
+    if (!pageTarget) throw new Error("No page target found");
+
+    const { sessionId } = await cdp.send<{ sessionId: string }>("Target.attachToTarget", { targetId: pageTarget.targetId, flatten: true });
+    await cdp.send("Network.enable", {}, { sessionId });
+    await cdp.send("Page.enable", {}, { sessionId });
+
+    if (args.wait) {
+      await waitForUserSignal();
+    } else {
+      console.log("Waiting for page to load...");
+      await Promise.race([
+        waitForPageLoad(cdp, sessionId, 15_000),
+        sleep(8_000)
+      ]);
+      await waitForNetworkIdle(cdp, sessionId, NETWORK_IDLE_TIMEOUT_MS);
+      await sleep(POST_LOAD_DELAY_MS);
+      console.log("Scrolling to trigger lazy load...");
+      await autoScroll(cdp, sessionId, SCROLL_MAX_STEPS, SCROLL_STEP_WAIT_MS);
+      await sleep(POST_LOAD_DELAY_MS);
+    }
+
+    console.log("Capturing page content...");
+    const extracted = await evaluateScript<{ title: string; description?: string; author?: string; published?: string; html: string }>(
+      cdp, sessionId, cleanupAndExtractScript, args.timeout
+    );
+
+    const metadata: PageMetadata = {
+      url: args.url,
+      title: extracted.title || "",
+      description: extracted.description,
+      author: extracted.author,
+      published: extracted.published,
+      captured_at: new Date().toISOString()
+    };
+
+    const markdown = htmlToMarkdown(extracted.html);
+    return { metadata, markdown };
+  } finally {
+    if (cdp) {
+      try { await cdp.send("Browser.close", {}, { timeoutMs: 5_000 }); } catch {}
+      cdp.close();
+    }
+    killChrome(chrome);
+  }
+}
+
+async function main(): Promise<void> {
+  const args = parseArgs(process.argv);
+  if (!args.url) {
+    console.error("Usage: bun main.ts <url> [-o output.md] [--wait] [--timeout ms]");
+    process.exit(1);
+  }
+
+  try {
+    new URL(args.url);
+  } catch {
+    console.error(`Invalid URL: ${args.url}`);
+    process.exit(1);
+  }
+
+  console.log(`Fetching: ${args.url}`);
+  console.log(`Mode: ${args.wait ? "wait" : "auto"}`);
+
+  const result = await captureUrl(args);
+  const outputPath = args.output || await generateOutputPath(args.url, result.metadata.title);
+  const outputDir = path.dirname(outputPath);
+  await mkdir(outputDir, { recursive: true });
+
+  const document = createMarkdownDocument(result);
+  await writeFile(outputPath, document, "utf-8");
+
+  console.log(`Saved: ${outputPath}`);
+  console.log(`Title: ${result.metadata.title || "(no title)"}`);
+}
+
+main().catch((err) => {
+  console.error("Error:", err instanceof Error ? err.message : String(err));
+  process.exit(1);
+});
@@ -0,0 +1,29 @@
+import os from "node:os";
+import path from "node:path";
+import process from "node:process";
+
+const APP_DATA_DIR = "baoyu-skills";
+const URL_TO_MARKDOWN_DATA_DIR = "url-to-markdown";
+const PROFILE_DIR_NAME = "chrome-profile";
+
+export function resolveUserDataRoot(): string {
+  if (process.platform === "win32") {
+    return process.env.APPDATA ?? path.join(os.homedir(), "AppData", "Roaming");
+  }
+  if (process.platform === "darwin") {
+    return path.join(os.homedir(), "Library", "Application Support");
+  }
+  return process.env.XDG_DATA_HOME ?? path.join(os.homedir(), ".local", "share");
+}
+
+export function resolveUrlToMarkdownDataDir(): string {
+  const override = process.env.URL_DATA_DIR?.trim();
+  if (override) return path.resolve(override);
+  return path.join(process.cwd(), URL_TO_MARKDOWN_DATA_DIR);
+}
+
+export function resolveUrlToMarkdownChromeProfileDir(): string {
+  const override = process.env.URL_CHROME_PROFILE_DIR?.trim();
+  if (override) return path.resolve(override);
+  return path.join(resolveUserDataRoot(), APP_DATA_DIR, URL_TO_MARKDOWN_DATA_DIR, PROFILE_DIR_NAME);
+}
@@ -1,6 +1,6 @@
 ---
 name: baoyu-xhs-images
-description: Xiaohongshu (Little Red Book) infographic series generator with multiple style options. Breaks down content into 1-10 cartoon-style infographics. Use when user asks to create "小红书图片", "XHS images", or "RedNote infographics".
+description: Generates Xiaohongshu (Little Red Book) infographic series with 9 visual styles and 6 layouts. Breaks content into 1-10 cartoon-style images optimized for XHS engagement. Use when user mentions "小红书图片", "XHS images", "RedNote infographics", "小红书种草", or wants social media infographics for Chinese platforms.
 ---

 # Xiaohongshu Infographic Series Generator
@@ -20,7 +20,7 @@ Break down complex content into eye-catching infographic series for Xiaohongshu
 /baoyu-xhs-images posts/ai-future/article.md --layout dense

 # Combine style and layout
-/baoyu-xhs-images posts/ai-future/article.md --style tech --layout list
+/baoyu-xhs-images posts/ai-future/article.md --style notion --layout list

 # Direct content input
 /baoyu-xhs-images
@@ -61,7 +61,7 @@ Style × Layout can be freely combined. Example: `--style notion --layout dense`
 | `notion` | Minimalist hand-drawn line art, intellectual |
 | `chalkboard` | Colorful chalk on black board, educational |

-Detailed style definitions: `references/styles/<style>.md`
+Detailed style definitions: `references/presets/<style>.md`

 ## Layout Gallery

@@ -74,7 +74,7 @@ Detailed style definitions: `references/styles/<style>.md`
 | `comparison` | Side-by-side contrast layout |
 | `flow` | Process and timeline layout (3-6 steps) |

-Detailed layout definitions: `references/layouts/<layout>.md`
+Detailed layout definitions: `references/elements/canvas.md`

 ## Auto Selection

@@ -90,6 +90,37 @@ Detailed layout definitions: `references/layouts/<layout>.md`
 | Knowledge, concept, productivity, SaaS | `notion` | dense/list |
 | Education, tutorial, learning, teaching, classroom | `chalkboard` | balanced/dense |

+## Outline Strategies
+
+Three differentiated outline strategies for different content goals:
+
+### Strategy A: Story-Driven (故事驱动型)
+
+| Aspect | Description |
+|--------|-------------|
+| **Concept** | Personal experience as main thread, emotional resonance first |
+| **Features** | Start from pain point, show before/after change, strong authenticity |
+| **Best for** | Reviews, personal shares, transformation stories |
+| **Structure** | Hook → Problem → Discovery → Experience → Conclusion |
+
+### Strategy B: Information-Dense (信息密集型)
+
+| Aspect | Description |
+|--------|-------------|
+| **Concept** | Value-first, efficient information delivery |
+| **Features** | Clear structure, explicit points, professional credibility |
+| **Best for** | Tutorials, comparisons, product reviews, checklists |
+| **Structure** | Core conclusion → Info card → Pros/Cons → Recommendation |
+
+### Strategy C: Visual-First (视觉优先型)
+
+| Aspect | Description |
+|--------|-------------|
+| **Concept** | Visual impact as core, minimal text |
+| **Features** | Large images, atmospheric, instant appeal |
+| **Best for** | High-aesthetic products, lifestyle, mood-based content |
+| **Structure** | Hero image → Detail shots → Lifestyle scene → CTA |
+
 ## File Structure

 Each session creates an independent directory named by content slug:
@@ -97,11 +128,11 @@ Each session creates an independent directory named by content slug:
 ```
 xhs-images/{topic-slug}/
 ├── source-{slug}.{ext}             # Source files (text, images, etc.)
-├── analysis.md                     # Deep analysis results
-├── outline-style-[slug].md         # Variant A (e.g., outline-style-tech.md)
-├── outline-style-[slug].md         # Variant B (e.g., outline-style-notion.md)
-├── outline-style-[slug].md         # Variant C (e.g., outline-style-minimal.md)
-├── outline.md                      # Final selected
+├── analysis.md                     # Deep analysis + questions asked
+├── outline-strategy-a.md           # Strategy A: Story-driven
+├── outline-strategy-b.md           # Strategy B: Information-dense
+├── outline-strategy-c.md           # Strategy C: Visual-first
+├── outline.md                      # Final selected/merged outline
 ├── prompts/
 │   ├── 01-cover-[slug].md
 │   ├── 02-content-[slug].md
@@ -127,6 +158,67 @@ Copy all sources with naming `source-{slug}.{ext}`:

 ## Workflow

+### Progress Checklist
+
+Copy and track progress:
+
+```
+XHS Infographic Progress:
+- [ ] Step 0: Check preferences (EXTEND.md) ⚠️ REQUIRED if not found
+- [ ] Step 1: Analyze content → analysis.md
+- [ ] Step 2: Confirmation 1 - Content understanding ⚠️ REQUIRED
+- [ ] Step 3: Generate 3 outline + style variants
+- [ ] Step 4: Confirmation 2 - Outline & style & elements selection ⚠️ REQUIRED
+- [ ] Step 5: Generate images (sequential)
+- [ ] Step 6: Completion report
+```
+
+### Flow
+
+```
+Input → Analyze → [Confirm 1] → 3 Outlines → [Confirm 2: Outline + Style + Elements] → Generate → Complete
+```
+
+### Step 0: Load Preferences (EXTEND.md) ⚠️
+
+**Purpose**: Load user preferences or run first-time setup. **Do NOT skip setup if EXTEND.md not found.**
+
+Use Bash to check EXTEND.md existence (priority order):
+
+```bash
+# Check project-level first
+test -f .baoyu-skills/baoyu-xhs-images/EXTEND.md && echo "project"
+
+# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
+test -f "$HOME/.baoyu-skills/baoyu-xhs-images/EXTEND.md" && echo "user"
+```
+
+┌────────────────────────────────────────────────────┬───────────────────┐
+│                        Path                        │     Location      │
+├────────────────────────────────────────────────────┼───────────────────┤
+│ .baoyu-skills/baoyu-xhs-images/EXTEND.md           │ Project directory │
+├────────────────────────────────────────────────────┼───────────────────┤
+│ $HOME/.baoyu-skills/baoyu-xhs-images/EXTEND.md     │ User home         │
+└────────────────────────────────────────────────────┴───────────────────┘
+
+┌───────────┬───────────────────────────────────────────────────────────────────────────┐
+│  Result   │                                  Action                                   │
+├───────────┼───────────────────────────────────────────────────────────────────────────┤
+│ Found     │ Read, parse, display summary → Continue to Step 1                         │
+├───────────┼───────────────────────────────────────────────────────────────────────────┤
+│ Not found │ ⚠️ MUST run first-time setup (see below) → Then continue to Step 1        │
+└───────────┴───────────────────────────────────────────────────────────────────────────┘
+
+**First-Time Setup** (when EXTEND.md not found):
+
+**Language**: Use user's input language or saved language preference.
+
+Use AskUserQuestion with ALL questions in ONE call. See `references/config/first-time-setup.md` for question details.
+
+**EXTEND.md Supports**: Watermark | Preferred style/layout | Custom style definitions | Language preference
+
+Schema: `references/config/preferences-schema.md`
+
 ### Step 1: Analyze Content → `analysis.md`

 Read source content, save it if needed, and perform deep analysis.
@@ -136,7 +228,7 @@ Read source content, save it if needed, and perform deep analysis.
   - If user provides a file path: use as-is
   - If user pastes content: save to `source.md` in target directory
 2. Read source content
-3. **Deep analysis** following `references/analysis-framework.md`:
+3. **Deep analysis** following `references/workflows/analysis-framework.md`:
   - Content type classification (种草/干货/测评/教程/避坑...)
   - Hook analysis (爆款标题潜力)
   - Target audience identification
@@ -145,70 +237,117 @@ Read source content, save it if needed, and perform deep analysis.
   - Swipe flow design
 4. Detect source language
 5. Determine recommended image count (2-10)
-6. Select 3 style+layout combinations
+6. **Generate clarifying questions** (see Step 2)
 7. **Save to `analysis.md`**

-### Step 2: Generate 3 Outline Variants
+### Step 2: Confirmation 1 - Content Understanding ⚠️

-Based on analysis, create three distinct style variants.
+**Purpose**: Validate understanding + collect missing info. **Do NOT skip.**

-**For each variant**:
-1. **Generate outline** (`outline-style-[slug].md`):
-   - YAML front matter with style, layout, image_count
-   - Cover design with hook
-   - Each image: layout, core message, text content, visual concept
-   - **Written in user's preferred language**
-   - Reference: `references/outline-template.md`
+**Display summary**:
+- Content type + topic identified
+- Key points extracted
+- Tone detected
+- Source images count

-| Variant | Selection Logic | Example Filename |
-|---------|-----------------|------------------|
-| A | Primary recommendation | `outline-style-tech.md` |
-| B | Alternative style | `outline-style-notion.md` |
-| C | Different audience/mood | `outline-style-minimal.md` |
+**Use AskUserQuestion** for:
+1. Core selling point (multiSelect: true)
+2. Target audience
+3. Style preference: Authentic sharing / Professional review / Aesthetic mood / Auto
+4. Additional context (optional)

-**All variants are preserved after selection for reference.**
+**After response**: Update `analysis.md` → Step 3

-### Step 3: User Confirms All Options
+### Step 3: Generate 3 Outline + Style Variants

-**IMPORTANT**: Present ALL options in a single confirmation step using AskUserQuestion. Do NOT interrupt workflow with multiple separate confirmations.
+Based on analysis + user context, create three distinct strategy variants. Each variant includes both **outline structure** and **visual style recommendation**.

-**Determine which questions to ask**:
+**For each strategy**:

-| Question | When to Ask |
-|----------|-------------|
-| Style variant | Always (required) |
-| Default layout | Only if user might want to override |
-| Language | Only if `source_language ≠ user_language` |
+| Strategy | Filename | Outline | Recommended Style |
+|----------|----------|---------|-------------------|
+| A | `outline-strategy-a.md` | Story-driven: emotional, before/after | warm, cute, fresh |
+| B | `outline-strategy-b.md` | Information-dense: structured, factual | notion, minimal, chalkboard |
+| C | `outline-strategy-c.md` | Visual-first: atmospheric, minimal text | bold, pop, retro |

-**Language handling**:
- If source language = user language: Just inform user (e.g., "Images will be in Chinese")
- If different: Ask which language to use
+**Outline format** (YAML front matter + content):
+```yaml
+---
+strategy: a  # a, b, or c
+name: Story-Driven
+style: warm  # recommended style for this strategy
+style_reason: "Warm tones enhance emotional storytelling and personal connection"
+elements:  # from style preset, can be customized in Step 4
+  background: solid-pastel
+  decorations: [clouds, stars-sparkles]
+  emphasis: star-burst
+  typography: highlight
+layout: balanced  # primary layout
+image_count: 5
+---

-**AskUserQuestion format**:
+## P1 Cover
+**Type**: cover
+**Hook**: "入冬后脸不干了🥹终于找到对的面霜"
+**Visual**: Product hero shot with cozy winter atmosphere
+**Layout**: sparse

-```
-Question 1 (Style): Which style variant?
- A: tech + dense (Recommended) - 专业科技感，适合干货
- B: notion + list - 清爽知识卡片
- C: minimal + balanced - 简约高端风格
- Custom: 自定义风格描述
+## P2 Problem
+**Type**: pain-point
+**Message**: Previous struggles with dry skin
+**Visual**: Before state, relatable scenario
+**Layout**: balanced

-Question 2 (Layout) - only if relevant:
- Keep variant default (Recommended)
- sparse / balanced / dense / list / comparison / flow
-
-Question 3 (Language) - only if mismatch:
- 中文 (匹配原文)
- English (your preference)
+...
 ```

-**After confirmation**:
-1. Copy selected `outline-style-[slug].md` → `outline.md`
-2. Update YAML front matter with confirmed options
-3. If custom style: regenerate outline with that style
-4. User may edit `outline.md` directly for fine-tuning
+**Differentiation requirements**:
+- Each strategy MUST have different outline structure AND different recommended style
+- Adapt page count: A typically 4-6, B typically 3-5, C typically 3-4
+- Include `style_reason` explaining why this style fits the strategy
+- Consider user's style preference from Step 2

-### Step 4: Generate Images
+Reference: `references/workflows/outline-template.md`
+
+### Step 4: Confirmation 2 - Outline & Style & Elements Selection ⚠️
+
+**Purpose**: User chooses outline strategy, confirms visual style, and customizes elements. **Do NOT skip.**
+
+**Display each strategy**:
+- Strategy name + page count + recommended style
+- Page-by-page summary (P1 → P2 → P3...)
+
+**Use AskUserQuestion** with three questions:
+
+**Question 1: Outline Strategy**
+- Strategy A (Recommended if "authentic sharing")
+- Strategy B (Recommended if "professional review")
+- Strategy C (Recommended if "aesthetic mood")
+- Combine: specify pages from each
+
+**Question 2: Visual Style**
+- Use strategy's recommended style (show which style)
+- Or select from: cute / fresh / warm / bold / minimal / retro / pop / notion / chalkboard
+- Or type custom style description
+
+**Question 3: Visual Elements** (show after style selection)
+Display the selected style's default elements from preset, then ask:
+- Use style defaults (Recommended) - show preview: background, decorations, emphasis
+- Adjust background - options: solid-pastel / solid-saturated / gradient-linear / gradient-radial / paper-texture / grid
+- Adjust decorations - options: hearts / stars-sparkles / flowers / clouds / leaves / confetti
+- Type custom element preferences
+
+**After response**:
+- Single strategy → copy to `outline.md` with confirmed style
+- Combination → merge specified pages with confirmed style
+- Custom request → regenerate based on feedback
+- Style defaults → use preset's Element Combination as-is
+- Background adjustment → update elements.background with user choice
+- Decorations adjustment → update elements.decorations with user choice
+- Custom elements → parse user's preferences into elements fields
+- Update `outline.md` frontmatter with final style and elements
+
+### Step 5: Generate Images

 With confirmed outline + style + layout:

@@ -217,6 +356,15 @@ With confirmed outline + style + layout:
 2. Generate image using confirmed style and layout
 3. Report progress after each generation

+**Watermark Application** (if enabled in preferences):
+Add to each image generation prompt:
+```
+Include a subtle watermark "[content]" positioned at [position]
+with approximately [opacity*100]% visibility. The watermark should
+be legible but not distracting from the main content.
+```
+Reference: `references/config/watermark-guide.md`
+
 **Image Generation Skill Selection**:
 - Check available image generation skills
 - If multiple skills available, ask user preference
@@ -227,22 +375,23 @@ If image generation skill supports `--sessionId`:
 2. Use same session ID for all images
 3. Ensures visual consistency across generated images

-### Step 5: Completion Report
+### Step 6: Completion Report

 ```
 Xiaohongshu Infographic Series Complete!

 Topic: [topic]
+Strategy: [A/B/C/Combined]
 Style: [style name]
 Layout: [layout name or "varies"]
 Location: [directory path]
 Images: N total

 ✓ analysis.md
-✓ outline-style-tech.md
-✓ outline-style-notion.md
-✓ outline-style-minimal.md
-✓ outline.md (selected: tech + dense)
+✓ outline-strategy-a.md
+✓ outline-strategy-b.md
+✓ outline-strategy-c.md
+✓ outline.md (selected: [strategy])

 Files:
 - 01-cover-[slug].png ✓ Cover (sparse)
@@ -253,25 +402,11 @@ Files:

 ## Image Modification

-### Edit Single Image
-
-1. Identify image to edit (e.g., `03-content-chatgpt.png`)
-2. Update prompt in `prompts/03-content-chatgpt.md` if needed
-3. Regenerate image using same session ID
-
-### Add New Image
-
-1. Specify insertion position (e.g., after image 3)
-2. Create new prompt with appropriate slug
-3. Generate new image
-4. **Renumber files**: All subsequent images increment NN by 1
-5. Update `outline.md` with new image entry
-
-### Delete Image
-
-1. Remove image file and prompt file
-2. **Renumber files**: All subsequent images decrement NN by 1
-3. Update `outline.md` to remove image entry
+| Action | Steps |
+|--------|-------|
+| **Edit** | Update prompt → Regenerate with same session ID |
+| **Add** | Specify position → Create prompt → Generate → Renumber subsequent files (NN+1) → Update outline |
+| **Delete** | Remove files → Renumber subsequent (NN-1) → Update outline |

 ## Content Breakdown Principles

@@ -295,27 +430,33 @@ Files:

 ## References

-Detailed templates and guidelines in `references/` directory:
- `analysis-framework.md` - XHS-specific content analysis
- `outline-template.md` - Outline format and examples
- `styles/<style>.md` - Detailed style definitions
- `layouts/<layout>.md` - Detailed layout definitions
- `base-prompt.md` - Base prompt template
+Detailed templates in `references/` directory:
+
+**Elements** (Visual building blocks):
+- `elements/canvas.md` - Aspect ratios, safe zones, grid layouts
+- `elements/image-effects.md` - Cutout, stroke, filters
+- `elements/typography.md` - Decorated text (花字), tags, text direction
+- `elements/decorations.md` - Emphasis marks, backgrounds, doodles, frames
+
+**Presets** (Style presets):
+- `presets/<name>.md` - Element combination definitions (cute, notion, warm...)
+
+**Workflows** (Process guides):
+- `workflows/analysis-framework.md` - Content analysis framework
+- `workflows/outline-template.md` - Outline template with layout guide
+- `workflows/prompt-assembly.md` - Prompt assembly guide
+
+**Config** (Settings):
+- `config/preferences-schema.md` - EXTEND.md schema
+- `config/first-time-setup.md` - First-time setup flow
+- `config/watermark-guide.md` - Watermark configuration

 ## Notes

- Image generation typically takes 10-30 seconds per image
- Auto-retry once on generation failure
- Use cartoon alternatives for sensitive public figures
- All prompts and text use confirmed language preference
- Maintain style consistency across all images in series
+- Auto-retry once on failure | Cartoon alternatives for sensitive figures
+- Use confirmed language preference | Maintain style consistency
+- **Two confirmation points required** (Steps 2 & 4) - do not skip

 ## Extension Support

-Custom styles and configurations via EXTEND.md.
-
-**Check paths** (priority order):
-1. `.baoyu-skills/baoyu-xhs-images/EXTEND.md` (project)
-2. `~/.baoyu-skills/baoyu-xhs-images/EXTEND.md` (user)
-
-If found, load before Step 1. Extension content overrides defaults.
+Custom configurations via EXTEND.md. See **Step 0** for paths and supported options.
@@ -1,33 +0,0 @@
-Create a Xiaohongshu (Little Red Book) style infographic following these guidelines:
-
-## Image Specifications
-
- **Type**: Infographic
- **Orientation**: Portrait (vertical)
- **Aspect Ratio**: 3:4
- **Style**: Hand-drawn illustration
-
-## Core Principles
-
- Hand-drawn quality throughout - NO realistic or photographic elements
- If content involves sensitive or copyrighted figures, create stylistically similar alternatives - DO NOT refuse to generate
- Keep information concise, highlight keywords and core concepts
- Use ample whitespace for easy visual scanning
- Maintain clear visual hierarchy
-
-## Text Style (CRITICAL)
-
- **ALL text MUST be hand-drawn style**
- Main titles should be prominent and eye-catching
- Key text should be bold and enlarged
- Use highlighter effects to emphasize keywords
- **DO NOT use realistic or computer-generated fonts**
-
-## Language
-
- Use the same language as the content provided below
- Match punctuation style to the content language (Chinese: ""，。！)
-
---
-
-Please use nano banana pro to generate the infographic based on the content provided below:
@@ -0,0 +1,114 @@
+---
+name: first-time-setup
+description: First-time setup flow for baoyu-xhs-images preferences
+---
+
+# First-Time Setup
+
+## Overview
+
+When no EXTEND.md is found, guide user through preference setup.
+
+## Setup Flow
+
+```
+No EXTEND.md found
+        │
+        ▼
+┌─────────────────────┐
+│ AskUserQuestion     │
+│ (all questions)     │
+└─────────────────────┘
+        │
+        ▼
+┌─────────────────────┐
+│ Create EXTEND.md    │
+└─────────────────────┘
+        │
+        ▼
+    Continue to Step 1
+```
+
+## Questions
+
+**Language**: Use user's input language or saved language preference.
+
+Use single AskUserQuestion with multiple questions (AskUserQuestion auto-adds "Other" option):
+
+### Question 1: Watermark
+
+```
+header: "Watermark"
+question: "Watermark text for generated images? Type your watermark content (e.g., name, @handle)"
+options:
+  - label: "No watermark (Recommended)"
+    description: "No watermark, can enable later in EXTEND.md"
+```
+
+Position defaults to bottom-right.
+
+### Question 2: Preferred Style
+
+```
+header: "Style"
+question: "Default visual style preference? Or type another style name or your custom style"
+options:
+  - label: "None (Recommended)"
+    description: "Auto-select based on content analysis"
+  - label: "cute"
+    description: "Sweet, adorable - classic XHS aesthetic"
+  - label: "notion"
+    description: "Minimalist hand-drawn, intellectual"
+```
+
+### Question 3: Save Location
+
+```
+header: "Save"
+question: "Where to save preferences?"
+options:
+  - label: "Project"
+    description: ".baoyu-skills/ (this project only)"
+  - label: "User"
+    description: "~/.baoyu-skills/ (all projects)"
+```
+
+## Save Locations
+
+| Choice | Path | Scope |
+|--------|------|-------|
+| Project | `.baoyu-skills/baoyu-xhs-images/EXTEND.md` | Current project |
+| User | `~/.baoyu-skills/baoyu-xhs-images/EXTEND.md` | All projects |
+
+## After Setup
+
+1. Create directory if needed
+2. Write EXTEND.md with frontmatter
+3. Confirm: "Preferences saved to [path]"
+4. Continue to Step 1
+
+## EXTEND.md Template
+
+```yaml
+---
+version: 1
+watermark:
+  enabled: [true/false]
+  content: "[user input or empty]"
+  position: bottom-right
+  opacity: 0.7
+preferred_style:
+  name: [selected style or null]
+  description: ""
+preferred_layout: null
+language: null
+custom_styles: []
+---
+```
+
+## Modifying Preferences Later
+
+Users can edit EXTEND.md directly or run setup again:
+- Delete EXTEND.md to trigger setup
+- Edit YAML frontmatter for quick changes
+- Full schema: `config/preferences-schema.md`
@@ -0,0 +1,121 @@
+---
+name: preferences-schema
+description: EXTEND.md YAML schema for baoyu-xhs-images user preferences
+---
+
+# Preferences Schema
+
+## Full Schema
+
+```yaml
+---
+version: 1
+
+watermark:
+  enabled: false
+  content: ""
+  position: bottom-right  # bottom-right|bottom-left|bottom-center|top-right
+  opacity: 0.7            # 0.1-1.0
+
+preferred_style:
+  name: null              # Built-in or custom style name
+  description: ""         # Override/notes
+
+preferred_layout: null    # sparse|balanced|dense|list|comparison|flow
+
+language: null            # zh|en|ja|ko|auto
+
+custom_styles:
+  - name: my-style
+    description: "Style description"
+    color_palette:
+      primary: ["#FED7E2", "#FEEBC8"]
+      background: "#FFFAF0"
+      accents: ["#FF69B4", "#FF6B6B"]
+    visual_elements: "Hearts, stars, sparkles"
+    typography: "Rounded, bubbly hand lettering"
+    best_for: "Lifestyle, beauty"
+---
+```
+
+## Field Reference
+
+| Field | Type | Default | Description |
+|-------|------|---------|-------------|
+| `version` | int | 1 | Schema version |
+| `watermark.enabled` | bool | false | Enable watermark |
+| `watermark.content` | string | "" | Watermark text (@username or custom) |
+| `watermark.position` | enum | bottom-right | Position on image |
+| `watermark.opacity` | float | 0.7 | Transparency (0.1-1.0) |
+| `preferred_style.name` | string | null | Style name or null |
+| `preferred_style.description` | string | "" | Custom notes/override |
+| `preferred_layout` | string | null | Layout preference or null |
+| `language` | string | null | Output language (null = auto-detect) |
+| `custom_styles` | array | [] | User-defined styles |
+
+## Position Options
+
+| Value | Description |
+|-------|-------------|
+| `bottom-right` | Lower right corner (default, most common) |
+| `bottom-left` | Lower left corner |
+| `bottom-center` | Bottom center |
+| `top-right` | Upper right corner |
+
+## Custom Style Fields
+
+| Field | Required | Description |
+|-------|----------|-------------|
+| `name` | Yes | Unique style identifier (kebab-case) |
+| `description` | Yes | What the style conveys |
+| `color_palette.primary` | No | Main colors (array) |
+| `color_palette.background` | No | Background color |
+| `color_palette.accents` | No | Accent colors (array) |
+| `visual_elements` | No | Decorative elements |
+| `typography` | No | Font/lettering style |
+| `best_for` | No | Recommended content types |
+
+## Example: Minimal Preferences
+
+```yaml
+---
+version: 1
+watermark:
+  enabled: true
+  content: "@myusername"
+preferred_style:
+  name: notion
+---
+```
+
+## Example: Full Preferences
+
+```yaml
+---
+version: 1
+watermark:
+  enabled: true
+  content: "@myxhsaccount"
+  position: bottom-right
+  opacity: 0.5
+
+preferred_style:
+  name: notion
+  description: "Clean knowledge cards for tech content"
+
+preferred_layout: dense
+
+language: zh
+
+custom_styles:
+  - name: corporate
+    description: "Professional B2B style"
+    color_palette:
+      primary: ["#1E3A5F", "#4A90D9"]
+      background: "#F5F7FA"
+      accents: ["#00B4D8", "#48CAE4"]
+    visual_elements: "Clean lines, subtle gradients, geometric shapes"
+    typography: "Modern sans-serif, professional"
+    best_for: "Business, SaaS, enterprise"
+---
+```
@@ -0,0 +1,73 @@
+---
+name: watermark-guide
+description: Watermark configuration guide for baoyu-xhs-images
+---
+
+# Watermark Guide
+
+## Position Diagram
+
+```
+┌─────────────────────────────┐
+│                  [top-right]│
+│                             │
+│                             │
+│         IMAGE CONTENT       │
+│                             │
+│                             │
+│[bottom-left][bottom-center][bottom-right]│
+└─────────────────────────────┘
+```
+
+## Position Recommendations
+
+| Position | Best For | Avoid When |
+|----------|----------|------------|
+| `bottom-right` | Default choice, most common | Key info in bottom-right |
+| `bottom-left` | Right-heavy layouts | Key info in bottom-left |
+| `bottom-center` | Centered designs | Text-heavy bottom area |
+| `top-right` | Bottom-heavy content | Title/header in top-right |
+
+## Opacity Examples
+
+| Opacity | Visual Effect | Use Case |
+|---------|---------------|----------|
+| 0.3 | Very subtle, barely visible | Clean aesthetic priority |
+| 0.5 | Balanced, noticeable but not distracting | Default recommendation |
+| 0.7 | Clearly visible | Brand recognition priority |
+| 0.9 | Strong presence | Anti-copy protection |
+
+## Content Format
+
+| Format | Example | Style |
+|--------|---------|-------|
+| Handle | `@username` | Most common for XHS |
+| Text | `MyBrand` | Simple branding |
+| Chinese | `小红书:用户名` | Platform specific |
+| URL | `myblog.com` | Cross-platform |
+
+## Best Practices
+
+1. **Consistency**: Use same watermark across all images in series
+2. **Legibility**: Ensure watermark readable on both light/dark areas
+3. **Size**: Keep subtle - should not distract from content
+4. **Contrast**: Opacity may need adjustment per image background
+
+## Prompt Integration
+
+When watermark is enabled, add to image generation prompt:
+
+```
+Include a subtle watermark "[content]" positioned at [position]
+with approximately [opacity*100]% visibility. The watermark should
+be legible but not distracting from the main content.
+```
+
+## Common Issues
+
+| Issue | Solution |
+|-------|----------|
+| Watermark invisible | Increase opacity or adjust position |
+| Watermark too prominent | Decrease opacity (0.3-0.5) |
+| Watermark overlaps content | Change position |
+| Inconsistent across images | Use session ID for consistency |
@@ -0,0 +1,108 @@
+# Canvas & Layout
+
+Core canvas specifications and layout grids for Xiaohongshu infographics.
+
+## Aspect Ratios
+
+| Name | Ratio | Pixels | Note |
+|------|-------|--------|------|
+| portrait-3-4 | 3:4 | 1242×1660 | Highest traffic on XHS (recommended) |
+| square | 1:1 | 1242×1242 | Second recommended |
+| portrait-2-3 | 2:3 | 1242×1863 | Taller format |
+
+**Default**: portrait-3-4 for maximum engagement.
+
+## Safe Zones
+
+Avoid placing critical content in these areas:
+
+| Zone | Position | Reason |
+|------|----------|--------|
+| bottom-overlay | Bottom 10% | Title bar overlay on mobile |
+| top-right | Top-right corner | Like/share button overlay |
+| bottom-right | Bottom-right corner | Watermark position |
+
+```
+┌─────────────────────────────┐
+│                 [like/share]│  ← top-right: avoid
+│                             │
+│                             │
+│      ✓ SAFE CONTENT AREA    │
+│                             │
+│                             │
+│  [title bar overlay area]   │  ← bottom 10%: avoid key info
+└─────────────────────────────┘
+```
+
+## Grid Layouts
+
+### Density-Based Layouts
+
+| Layout | Info Density | Whitespace | Points/Image | Best For |
+|--------|--------------|------------|--------------|----------|
+| sparse | Low | 60-70% | 1-2 | Covers, quotes, impactful statements |
+| balanced | Medium | 40-50% | 3-4 | Standard content, tutorials |
+| dense | High | 20-30% | 5-8 | Knowledge cards, cheat sheets |
+
+### Structure-Based Layouts
+
+| Layout | Structure | Items | Best For |
+|--------|-----------|-------|----------|
+| list | Vertical enumeration | 4-7 | Rankings, checklists, step guides |
+| comparison | Left vs Right | 2 sections | Before/after, pros/cons |
+| flow | Connected nodes | 3-6 steps | Processes, timelines, workflows |
+
+## Layout by Position
+
+| Position | Recommended Layout | Why |
+|----------|-------------------|-----|
+| Cover | sparse | Maximum visual impact, clear title |
+| Setup | balanced | Context without overwhelming |
+| Core | balanced/dense/list | Based on content density |
+| Payoff | balanced/list | Clear takeaways |
+| Ending | sparse | Clean CTA, memorable close |
+
+## Grid Cells
+
+For multi-element compositions:
+
+| Name | Cells | Use Case |
+|------|-------|----------|
+| single | 1 | Hero image, maximum impact |
+| dual | 2 | Before/after, comparison |
+| triptych | 3 | Steps, process flow |
+| quad | 4 | Product showcase |
+| six-grid | 6 | Checklist, collection |
+| nine-grid | 9 | Multi-image gallery |
+
+## Visual Balance
+
+### Sparse Layout
+- Single focal point centered
+- Breathing room on all sides
+- Symmetrical composition
+
+### Balanced Layout
+- Top-weighted title
+- Evenly distributed content below
+- Clear visual hierarchy
+
+### Dense Layout
+- Organized grid structure
+- Clear section boundaries
+- Compact but readable spacing
+
+### List Layout
+- Left-aligned items
+- Clear number/bullet hierarchy
+- Consistent item format
+
+### Comparison Layout
+- Symmetrical left/right
+- Clear visual contrast
+- Divider between sections
+
+### Flow Layout
+- Directional flow (top→bottom or left→right)
+- Connected nodes with arrows
+- Clear progression indicators
@@ -0,0 +1,145 @@
+# Decorative Assets
+
+Visual embellishments and decorative elements for Xiaohongshu infographics.
+
+## Emphasis Marks (强调标记)
+
+Elements to draw attention to specific content.
+
+| Name | Description | Use Case |
+|------|-------------|----------|
+| red-arrow | Red arrow pointing to target | Product features, key points |
+| circle-mark | Circle highlight annotation | Highlighting details |
+| underline | Straight or wavy underline | Text emphasis |
+| star-burst | Starburst explosion effect | Special offers, wow factor |
+| checkmark | Checkmark/tick symbol | Completed items, pros |
+| cross-mark | X mark symbol | Cons, things to avoid |
+| exclamation | Exclamation point decoration | Important warnings |
+| question | Question mark decoration | FAQ, curiosity |
+| numbering | Circled numbers | Steps, rankings |
+| bracket | Bracket highlighting | Grouping, emphasis |
+
+## Backgrounds (背景)
+
+Base layer treatments.
+
+| Name | Description | Use Case |
+|------|-------------|----------|
+| solid-saturated | High-saturation solid color | Bold, energetic |
+| solid-pastel | Soft pastel solid color | Cute, gentle |
+| gradient-linear | Linear color gradient | Modern, dynamic |
+| gradient-radial | Radial color gradient | Spotlight effect |
+| frosted-glass | Frosted glass blur effect | Layered compositions |
+| paper-texture | Paper or craft texture | Handmade aesthetic |
+| fabric-texture | Fabric/cloth texture | Cozy, tactile |
+| chalkboard | Blackboard texture | Educational content |
+| grid | Subtle grid pattern | Structured, organized |
+| dots | Polka dot pattern | Playful, retro |
+
+## Doodles & Emoji (涂鸦)
+
+Hand-drawn decorative elements.
+
+| Name | Description | Use Case |
+|------|-------------|----------|
+| hand-drawn-lines | Sketchy hand-drawn lines | Connections, borders |
+| stars-sparkles | Stars and sparkle effects | Magic, excellence |
+| flowers | Floral decorations | Beauty, feminine |
+| hearts | Heart symbols | Love, favorites |
+| clouds | Cloud shapes | Dreamy, thoughts |
+| arrows-curvy | Curved directional arrows | Flow, direction |
+| squiggles | Wavy squiggle lines | Energy, movement |
+| confetti | Scattered confetti | Celebration |
+| leaves | Leaf decorations | Nature, fresh |
+| bubbles | Circular bubble shapes | Playful, light |
+
+## Emoji Integration
+
+| Category | Examples | Use Case |
+|----------|----------|----------|
+| Reactions | 🥹 😍 🤯 | Emotional emphasis |
+| Objects | ✨ 💡 🎯 | Visual markers |
+| Actions | 👇 👆 ➡️ | Directional cues |
+| Nature | 🌸 🌿 ☀️ | Thematic decoration |
+
+## Frames (边框)
+
+Container and border treatments.
+
+| Name | Description | Use Case |
+|------|-------------|----------|
+| polaroid | Instant photo frame | Photo showcase |
+| film-strip | Film negative border | Cinematic, retro |
+| phone-screenshot | Mobile device mockup | App/screen content |
+| torn-paper | Torn paper edge effect | Scrapbook aesthetic |
+| rounded-rect | Rounded rectangle border | Clean containers |
+| decorative | Ornate decorative border | Premium, elegant |
+| tape-corners | Washi tape corners | Crafty, casual |
+| stamp-border | Stamp perforated edge | Vintage, postal |
+
+## Dividers (分隔线)
+
+Section separators.
+
+| Name | Description | Use Case |
+|------|-------------|----------|
+| line-simple | Simple horizontal line | Clean separation |
+| line-dashed | Dashed line | Subtle division |
+| line-wavy | Wavy line | Playful separation |
+| dots-row | Row of dots | Decorative division |
+| ornamental | Decorative flourish | Elegant separation |
+
+## Stickers (贴纸)
+
+Pre-composed decorative elements.
+
+| Name | Description | Use Case |
+|------|-------------|----------|
+| badge-new | "NEW" badge | New products |
+| badge-hot | "HOT" badge | Trending items |
+| badge-sale | Sale/discount badge | Promotions |
+| seal-quality | Quality seal | Recommendations |
+| ribbon-award | Award ribbon | Best picks |
+| tag-price | Price tag shape | Pricing info |
+
+## Style-Specific Decorations
+
+### Cute Style
+- Hearts, stars, sparkles
+- Ribbon decorations, sticker-style
+- Cute character elements
+
+### Notion Style
+- Simple line doodles
+- Geometric shapes, stick figures
+- Maximum whitespace, minimal decoration
+
+### Warm Style
+- Sun rays, coffee cups, cozy items
+- Warm lighting effects
+- Friendly, inviting decorations
+
+### Fresh Style
+- Plant leaves, clouds, water drops
+- Simple geometric shapes
+- Open, breathing composition
+
+### Bold Style
+- Exclamation marks, arrows
+- Warning icons, strong shapes
+- High contrast elements
+
+### Pop Style
+- Bold shapes, speech bubbles
+- Comic-style effects, starburst
+- Dynamic, energetic decorations
+
+### Retro Style
+- Halftone dots, vintage badges
+- Classic icons, tape effects
+- Aged texture overlays
+
+### Chalkboard Style
+- Chalk dust effects
+- Hand-drawn doodles
+- Mathematical formulas, simple icons
@@ -0,0 +1,92 @@
+# Image Processing Layer
+
+Visual effects applied to image elements in Xiaohongshu infographics.
+
+## AI Cutout (抠图)
+
+Subject extraction styles for product/figure isolation.
+
+| Name | Description | Use Case |
+|------|-------------|----------|
+| clean | Sharp edges, precise boundaries | Product photography, tech items |
+| soft | Soft transition, feathered edges | Portrait cutout, organic subjects |
+| stylized | Hand-drawn edge treatment | Artistic compositions |
+
+## Stroke Effects (描边)
+
+Border treatments for cutout elements.
+
+| Name | Description | Use Case |
+|------|-------------|----------|
+| white-solid | White solid line border | Classic sticker feel, high contrast |
+| colored-solid | Colored solid line border | Playful vibe, brand colors |
+| dashed | Dashed/dotted border | Handmade aesthetic, casual |
+| double | Double-layer stroke | Emphasis effect, premium feel |
+| glow | Soft outer glow | Dreamy, soft aesthetic |
+| shadow | Drop shadow effect | Depth, floating element |
+
+**Stroke Width Guidelines**:
+- Thin: 2-4px - Subtle, elegant
+- Medium: 5-8px - Standard visibility
+- Thick: 10-15px - Bold emphasis
+
+## Filters (滤镜)
+
+Color grading and mood presets popular on XHS.
+
+| Name | Chinese | Description | Mood |
+|------|---------|-------------|------|
+| clear-glow | 清透感 | Transparent, radiant, luminous | Fresh, youthful |
+| film-grain | 胶片感 | Vintage film aesthetic, grain texture | Nostalgic, artistic |
+| cream-skin | 奶油肌 | Smooth, creamy complexion tones | Soft, flattering |
+| japanese-magazine | 日杂感 | Lifestyle magazine aesthetic | Curated, aspirational |
+| high-saturation | 高饱和 | Vibrant, punchy colors | Energetic, eye-catching |
+| muted-tones | 莫兰迪 | Morandi-style desaturated palette | Sophisticated, calm |
+| warm-tone | 暖色调 | Golden hour warmth | Cozy, inviting |
+| cool-tone | 冷色调 | Blue-shifted coolness | Modern, clean |
+
+## Texture Overlays
+
+Additional texture effects.
+
+| Name | Description | Use Case |
+|------|-------------|----------|
+| paper | Paper or fabric texture | Handmade feel |
+| noise | Fine grain noise | Analog aesthetic |
+| halftone | Dot pattern | Retro print style |
+| scratch | Light scratch marks | Vintage wear |
+
+## Blending Modes
+
+For layered compositions.
+
+| Mode | Effect | Use Case |
+|------|--------|----------|
+| multiply | Darken, merge | Shadow effects |
+| screen | Lighten, glow | Light effects |
+| overlay | Contrast boost | Vibrant compositions |
+| soft-light | Subtle blending | Natural layering |
+
+## Effect Combinations
+
+Common effect stacks for different styles:
+
+### Cute Style
+- Filter: clear-glow or cream-skin
+- Stroke: white-solid (medium)
+- Texture: none
+
+### Notion Style
+- Filter: none or muted-tones
+- Stroke: white-solid (thin) or none
+- Texture: paper (subtle)
+
+### Retro Style
+- Filter: film-grain
+- Stroke: double or dashed
+- Texture: halftone, scratch
+
+### Bold Style
+- Filter: high-saturation
+- Stroke: colored-solid (thick)
+- Texture: none
@@ -0,0 +1,96 @@
+# Typography System
+
+Text styling elements for Xiaohongshu infographics.
+
+## Decorated Text (花字)
+
+Stylized text treatments for emphasis and visual appeal.
+
+| Name | Description | Use Case |
+|------|-------------|----------|
+| gradient | Gradient color fill | Title emphasis, modern feel |
+| stroke-text | Outlined text with stroke | Cover headlines, high visibility |
+| shadow-3d | 3D shadow/extrusion effect | Key terms, depth |
+| highlight | Highlighter marker effect | Critical information, key points |
+| neon | Neon glow effect | Tech content, night aesthetic |
+| handwritten | Authentic handwritten style | Personal touch, casual |
+| bubble | Rounded, inflated letterforms | Cute, playful content |
+| brush | Brush stroke texture | Artistic, dynamic |
+
+## Tags & Labels (标签)
+
+Structured text containers.
+
+| Name | Description | Use Case |
+|------|-------------|----------|
+| black-white | Black background, white text | Brand names, prices, categories |
+| white-black | White background, black text | Clean labels, minimal style |
+| bubble | Speech bubble style | Dialogue, annotations, callouts |
+| pointer | Arrow pointer with label | Product callouts, pointing to features |
+| ribbon | Ribbon/banner shape | Special offers, highlights |
+| stamp | Stamp/seal style | Authenticity, recommendations |
+| pill | Rounded pill shape | Tags, categories, keywords |
+
+## Text Hierarchy
+
+Recommended text sizing for visual hierarchy.
+
+| Level | Role | Relative Size | Style |
+|-------|------|---------------|-------|
+| H1 | Main title | 100% | Bold, decorated |
+| H2 | Section header | 70-80% | Semi-bold |
+| H3 | Subsection | 50-60% | Medium weight |
+| Body | Content text | 40-50% | Regular |
+| Caption | Small notes | 30-35% | Light |
+
+## Text Direction
+
+| Direction | Description | Use Case |
+|-----------|-------------|----------|
+| horizontal | Standard left-to-right | Default for most content |
+| vertical | Top-to-bottom columns | Magazine style, traditional Chinese |
+| curved | Text following a curve | Decorative, around shapes |
+| diagonal | Angled text | Dynamic compositions |
+
+## Text Effects
+
+| Effect | Description | Use Case |
+|--------|-------------|----------|
+| shadow | Drop shadow behind text | Readability on busy backgrounds |
+| outline | Outline around letterforms | High contrast visibility |
+| glow | Soft glow around text | Dreamy, emphasis |
+| underline-wavy | Wavy underline decoration | Playful emphasis |
+| strikethrough | Crossed out text | Before/after, corrections |
+
+## Language Considerations
+
+### Chinese Text (中文)
+- Punctuation: 「」（）、。！？
+- Spacing: No spaces between characters
+- Line height: 1.5-1.8x for readability
+
+### Mixed Text
+- English in Chinese context: Maintain consistent baseline
+- Numbers: Use consistent number style (lining vs old-style)
+
+## Style-Specific Typography
+
+### Cute Style
+- Rounded, bubbly hand lettering
+- Soft shadows, playful decorations
+- Pink/pastel color accents
+
+### Notion Style
+- Clean hand-drawn lettering
+- Simple sans-serif labels
+- Minimal decoration
+
+### Bold Style
+- Impactful hand lettering with shadows
+- High contrast colors
+- Strong outlines
+
+### Chalkboard Style
+- Chalk texture on all text
+- Visible imperfections
+- Multi-color chalk variety
@@ -1,30 +0,0 @@
-# balanced
-
-Standard content layout
-
-## Information Density
-
- 3-4 key points per image
- Whitespace: 40-50% of canvas
-
-## Structure
-
- Title at top
- 3-4 bullet points or sections below
-
-## Text Elements
-
- Title + 3-4 bullet points or key messages
-
-## Visual Balance
-
- Top-weighted title
- Evenly distributed content below
-
-## Best For
-
-Regular content pages, tutorials, explanations
-
-## Best Style Pairings
-
-All styles work well
@@ -1,31 +0,0 @@
-# comparison
-
-Side-by-side contrast layout
-
-## Information Density
-
- 2 main sections with 2-4 points each
- Whitespace: 30-40% of canvas
-
-## Structure
-
- Left vs Right layout
- Before/After, Pros/Cons format
- Clear divider between sections
-
-## Text Elements
-
- Title + left label + right label + mirrored points
-
-## Visual Balance
-
- Symmetrical left/right
- Clear visual contrast
-
-## Best For
-
-Comparisons, transformations, decision helpers, 对比图
-
-## Best Style Pairings
-
-bold (dramatic contrast), tech (data comparison), warm (before/after stories)
@@ -1,31 +0,0 @@
-# dense
-
-High information density, knowledge card style
-
-## Information Density
-
- 5-8 key points per image
- Whitespace: 20-30% of canvas
-
-## Structure
-
- Multiple sections, structured grid
- More text, compact but organized
-
-## Text Elements
-
- Title + multiple sections with headers + numerous points
-
-## Visual Balance
-
- Organized chaos
- Clear section boundaries
- Compact spacing
-
-## Best For
-
-Summary cards, cheat sheets, comprehensive guides, 干货总结
-
-## Best Style Pairings
-
-tech, notion, minimal (clean styles prevent visual overload)
@@ -1,30 +0,0 @@
-# flow
-
-Process and timeline layout
-
-## Information Density
-
- 3-6 steps/stages
- Whitespace: 30-40% of canvas
-
-## Structure
-
- Connected nodes with arrows
- Sequential flow, directional
-
-## Text Elements
-
- Title + step labels + optional descriptions per step
-
-## Visual Balance
-
- Directional flow (top→bottom or left→right)
- Clear progression
-
-## Best For
-
-Processes, timelines, cause-effect chains, workflows
-
-## Best Style Pairings
-
-tech (process diagrams), notion (simple flows), fresh (organic flows)
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Jim Liu 宝玉	7b0c9ca372	chore: release v1.21.0	2026-01-24 03:33:10 -06:00
Jim Liu 宝玉	e7255efdd6	chore: release v1.20.0	2026-01-24 02:30:28 -06:00
Jim Liu 宝玉	b15a95e73d	chore: release v1.19.0	2026-01-24 01:24:41 -06:00
Jim Liu 宝玉	07af3c4c21	chore: release v1.18.3	2026-01-23 21:08:11 -06:00
Jim Liu 宝玉	7842e4d188	chore: release v1.18.2	2026-01-23 16:10:04 -06:00
Jim Liu 宝玉	fcd49cd5ea	chore: release v1.18.1	2026-01-23 14:59:23 -06:00
Jim Liu 宝玉	f454257b5c	chore: release v1.18.0	2026-01-23 14:32:21 -06:00
Jim Liu 宝玉	b1cbd1d527	chore: release v1.17.1	2026-01-23 12:23:13 -06:00
Jim Liu 宝玉	7500a3b106	chore: release v1.17.0	2026-01-23 12:19:26 -06:00
Jim Liu 宝玉	658c5dee71	chore: release v1.16.0	2026-01-23 12:15:56 -06:00
Jim Liu 宝玉	8d04b71700	chore: release v1.15.3	2026-01-23 12:08:37 -06:00
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
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