add new skill baoyu-comic

feat: add quick install instructions to README files
feat: update version number to 0.4.2 and enhance description for baoyu-gemini-web skill
2026-07-13 06:19:46 +08:00 · 2026-01-16 01:12:21 -06:00 · 2026-01-15 22:06:38 -06:00 · 2026-01-15 17:05:58 -06:00 · 2026-01-15 15:38:03 -06:00 · 2026-01-15 14:18:56 -06:00
109 changed files with 3734 additions and 1773 deletions
@@ -6,7 +6,7 @@
  },
  "metadata": {
    "description": "Skills shared by Baoyu for improving daily work efficiency",
-    "version": "0.3.1"
+    "version": "0.5.0"
  },
  "plugins": [
    {
@@ -15,13 +15,14 @@
      "source": "./",
      "strict": false,
      "skills": [
-        "./skills/gemini-web",
-        "./skills/xhs-images",
-        "./skills/post-to-x",
-        "./skills/post-to-wechat",
-        "./skills/article-illustrator",
-        "./skills/cover-image",
-        "./skills/slide-deck"
+        "./skills/baoyu-gemini-web",
+        "./skills/baoyu-xhs-images",
+        "./skills/baoyu-post-to-x",
+        "./skills/baoyu-post-to-wechat",
+        "./skills/baoyu-article-illustrator",
+        "./skills/baoyu-cover-image",
+        "./skills/baoyu-slide-deck",
+        "./skills/baoyu-comic"
      ]
    }
  ]
@@ -10,12 +10,13 @@ Claude Code marketplace plugin providing AI-powered content generation skills. S

 ```
 skills/
-├── gemini-web/          # Core: Gemini API wrapper (text + image gen)
-├── xhs-images/          # Xiaohongshu infographic series (1-10 images)
-├── cover-image/         # Article cover images (2.35:1 aspect)
-├── slide-deck/          # Presentation slides with outlines
-├── article-illustrator/ # Smart illustration placement
-└── post-to-x/           # X/Twitter posting automation
+├── baoyu-gemini-web/          # Core: Gemini API wrapper (text + image gen)
+├── baoyu-xhs-images/          # Xiaohongshu infographic series (1-10 images)
+├── baoyu-cover-image/         # Article cover images (2.35:1 aspect)
+├── baoyu-slide-deck/          # Presentation slides with outlines
+├── baoyu-article-illustrator/ # Smart illustration placement
+├── baoyu-post-to-x/           # X/Twitter posting automation
+└── baoyu-post-to-wechat/      # WeChat Official Account posting
 ```

 Each skill contains:
@@ -34,24 +35,24 @@ npx -y bun skills/<skill>/scripts/main.ts [options]
 Examples:
 ```bash
 # Text generation
-npx -y bun skills/gemini-web/scripts/main.ts "Hello"
+npx -y bun skills/baoyu-gemini-web/scripts/main.ts "Hello"

 # Image generation
-npx -y bun skills/gemini-web/scripts/main.ts --prompt "A cat" --image cat.png
+npx -y bun skills/baoyu-gemini-web/scripts/main.ts --prompt "A cat" --image cat.png

 # From prompt files
-npx -y bun skills/gemini-web/scripts/main.ts --promptfiles system.md content.md --image out.png
+npx -y bun skills/baoyu-gemini-web/scripts/main.ts --promptfiles system.md content.md --image out.png
 ```

 ## Key Dependencies

 - **Bun**: TypeScript runtime (via `npx -y bun`)
- **Chrome**: Required for `gemini-web` auth and `post-to-x` automation
+- **Chrome**: Required for `baoyu-gemini-web` auth and `baoyu-post-to-x` automation
 - **No npm packages**: Self-contained TypeScript, no external dependencies

 ## Authentication

-`gemini-web` uses browser cookies for Google auth:
+`baoyu-gemini-web` uses browser cookies for Google auth:
 - First run opens Chrome for login
 - Cookies cached in data directory
 - Force refresh: `--login` flag
@@ -62,10 +63,14 @@ npx -y bun skills/gemini-web/scripts/main.ts --promptfiles system.md content.md

 ## Adding New Skills

-1. Create `skills/<name>/SKILL.md` with YAML front matter
-2. Add TypeScript in `skills/<name>/scripts/`
-3. Add prompt templates in `skills/<name>/prompts/` if needed
-4. Register in `marketplace.json` plugins[0].skills array
+**IMPORTANT**: All skills MUST use `baoyu-` prefix to avoid conflicts when users import this plugin.
+
+1. Create `skills/baoyu-<name>/SKILL.md` with YAML front matter
+   - Directory name: `baoyu-<name>`
+   - SKILL.md `name` field: `baoyu-<name>`
+2. Add TypeScript in `skills/baoyu-<name>/scripts/`
+3. Add prompt templates in `skills/baoyu-<name>/prompts/` if needed
+4. Register in `marketplace.json` plugins[0].skills array as `./skills/baoyu-<name>`

 ## Code Style

@@ -11,6 +11,12 @@ Skills shared by Baoyu for improving daily work efficiency with Claude Code.

 ## Installation

+### Quick Install (Recommended)
+
+```bash
+npx add-skill jimliu/baoyu-skills
+```
+
 ### Register as Plugin Marketplace

 Run the following command in Claude Code:
@@ -34,45 +40,64 @@ Run the following command in Claude Code:
 /plugin install content-skills@baoyu-skills
 ```

+**Option 3: Ask the Agent**
+
+Simply tell Claude Code:
+
+> Please install Skills from github.com/JimLiu/baoyu-skills
+
+## Update Skills
+
+To update skills to the latest version:
+
+1. Run `/plugin` in Claude Code
+2. Switch to **Marketplaces** tab (use arrow keys or Tab)
+3. Select **baoyu-skills**
+4. Choose **Update marketplace**
+
+You can also **Enable auto-update** to get the latest versions automatically.
+
+![Update Skills](./screenshots/update-plugins.png)
+
 ## Available Skills

-### gemini-web
+### baoyu-gemini-web

 Interacts with Gemini Web to generate text and images.

 **Text Generation:**

 ```bash
-/gemini-web "Hello, Gemini"
-/gemini-web --prompt "Explain quantum computing"
+/baoyu-gemini-web "Hello, Gemini"
+/baoyu-gemini-web --prompt "Explain quantum computing"
 ```

 **Image Generation:**

 ```bash
-/gemini-web --prompt "A cute cat" --image cat.png
-/gemini-web --promptfiles system.md content.md --image out.png
+/baoyu-gemini-web --prompt "A cute cat" --image cat.png
+/baoyu-gemini-web --promptfiles system.md content.md --image out.png
 ```

-### xhs-images
+### baoyu-xhs-images

 Xiaohongshu (RedNote) infographic series generator. Breaks down content into 1-10 cartoon-style infographics with **Style × Layout** two-dimensional system.

 ```bash
 # Auto-select style and layout
-/xhs-images posts/ai-future/article.md
+/baoyu-xhs-images posts/ai-future/article.md

 # Specify style
-/xhs-images posts/ai-future/article.md --style notion
+/baoyu-xhs-images posts/ai-future/article.md --style notion

 # Specify layout
-/xhs-images posts/ai-future/article.md --layout dense
+/baoyu-xhs-images posts/ai-future/article.md --layout dense

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

 # Direct content input
-/xhs-images 今日星座运势
+/baoyu-xhs-images 今日星座运势
 ```

 **Styles** (visual aesthetics): `cute` (default), `fresh`, `tech`, `warm`, `bold`, `minimal`, `retro`, `pop`, `notion`
@@ -87,70 +112,111 @@ Xiaohongshu (RedNote) infographic series generator. Breaks down content into 1-1
 | `comparison` | 2 sides | Before/after, pros/cons |
 | `flow` | 3-6 steps | Processes, timelines |

-### cover-image
+### baoyu-cover-image

 Generate hand-drawn style cover images for articles with multiple style options.

 ```bash
 # From markdown file (auto-select style)
-/cover-image path/to/article.md
+/baoyu-cover-image path/to/article.md

 # Specify a style
-/cover-image path/to/article.md --style tech
-/cover-image path/to/article.md --style warm
+/baoyu-cover-image path/to/article.md --style tech
+/baoyu-cover-image path/to/article.md --style warm

 # Without title text
-/cover-image path/to/article.md --no-title
+/baoyu-cover-image path/to/article.md --no-title
 ```

 Available styles: `elegant` (default), `tech`, `warm`, `bold`, `minimal`, `playful`, `nature`, `retro`

-### slide-deck
+### baoyu-slide-deck

 Generate professional slide deck images from content. Creates comprehensive outlines with style instructions, then generates individual slide images.

 ```bash
 # From markdown file
-/slide-deck path/to/article.md
+/baoyu-slide-deck path/to/article.md

 # With style and audience
-/slide-deck path/to/article.md --style corporate
-/slide-deck path/to/article.md --audience executives
+/baoyu-slide-deck path/to/article.md --style corporate
+/baoyu-slide-deck path/to/article.md --audience executives

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

 # With language
-/slide-deck path/to/article.md --lang zh
+/baoyu-slide-deck path/to/article.md --lang zh
 ```

 Available styles: `editorial` (default), `corporate`, `technical`, `playful`, `minimal`, `storytelling`, `warm`, `retro-flat`, `notion`

-### post-to-wechat
+### 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.
+
+```bash
+# From source material
+/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 layout
+/baoyu-comic posts/turing-story/source.md --layout cinematic
+/baoyu-comic posts/turing-story/source.md --layout webtoon
+
+# Direct content input
+/baoyu-comic "The story of Alan Turing and the birth of computer science"
+```
+
+**Styles** (visual aesthetics):
+| Style | Description | Best for |
+|-------|-------------|----------|
+| `classic` | Traditional Ligne Claire, balanced | Biographies, balanced narratives |
+| `dramatic` | High contrast, intense | Breakthroughs, conflicts |
+| `warm` | Nostalgic, personal | Personal stories, mentorship |
+| `tech` | Modern, digital | Computing history, AI stories |
+| `sepia` | Historical, archival | Pre-1950s, classical science |
+| `vibrant` | Energetic, engaging | Science basics, young audience |
+| `ohmsha` | Manga guide style, visual metaphors | Tutorials, complex concepts (ML, physics) |
+
+**Layouts** (panel arrangement):
+| Layout | Panels/Page | Best for |
+|--------|-------------|----------|
+| `standard` | 4-6 | Dialogue, narrative flow |
+| `cinematic` | 2-4 | Dramatic moments, establishing shots |
+| `dense` | 6-9 | Technical explanations, timelines |
+| `splash` | 1-2 large | Key moments, revelations |
+| `mixed` | 3-7 varies | Complex narratives, emotional arcs |
+| `webtoon` | 3-5 vertical | Ohmsha tutorials, mobile reading |
+
+### baoyu-post-to-wechat

 Post content to WeChat Official Account (微信公众号). Two modes available:

 **Image-Text (图文)** - Multiple images with short title/content:

 ```bash
-/post-to-wechat 图文 --markdown article.md --images ./photos/
-/post-to-wechat 图文 --markdown article.md --image img1.png --image img2.png --image img3.png
-/post-to-wechat 图文 --title "标题" --content "内容" --image img1.png --submit
+/baoyu-post-to-wechat 图文 --markdown article.md --images ./photos/
+/baoyu-post-to-wechat 图文 --markdown article.md --image img1.png --image img2.png --image img3.png
+/baoyu-post-to-wechat 图文 --title "标题" --content "内容" --image img1.png --submit
 ```

 **Article (文章)** - Full markdown/HTML with rich formatting:

 ```bash
-/post-to-wechat 文章 --markdown article.md
-/post-to-wechat 文章 --markdown article.md --theme grace
-/post-to-wechat 文章 --html article.html
+/baoyu-post-to-wechat 文章 --markdown article.md
+/baoyu-post-to-wechat 文章 --markdown article.md --theme grace
+/baoyu-post-to-wechat 文章 --html article.html
 ```

 Prerequisites: Google Chrome installed. First run requires QR code login (session preserved).

 ## Disclaimer

-### gemini-web
+### baoyu-gemini-web

 This skill uses the Gemini Web API (reverse-engineered).

@@ -11,6 +11,12 @@

 ## 安装

+### 快速安装（推荐）
+
+```bash
+npx add-skill jimliu/baoyu-skills
+```
+
 ### 注册插件市场

 在 Claude Code 中运行：
@@ -34,45 +40,64 @@
 /plugin install content-skills@baoyu-skills
 ```

+**方式三：告诉 Agent**
+
+直接告诉 Claude Code：
+
+> 请帮我安装 github.com/JimLiu/baoyu-skills 中的 Skills
+
+## 更新技能
+
+更新技能到最新版本：
+
+1. 在 Claude Code 中运行 `/plugin`
+2. 切换到 **Marketplaces** 标签页（使用方向键或 Tab）
+3. 选择 **baoyu-skills**
+4. 选择 **Update marketplace**
+
+也可以选择 **Enable auto-update** 启用自动更新，每次启动时自动获取最新版本。
+
+![更新技能](./screenshots/update-plugins.png)
+
 ## 可用技能

-### gemini-web
+### baoyu-gemini-web

 与 Gemini Web 交互，生成文本和图片。

 **文本生成：**

 ```bash
-/gemini-web "你好，Gemini"
-/gemini-web --prompt "解释量子计算"
+/baoyu-gemini-web "你好，Gemini"
+/baoyu-gemini-web --prompt "解释量子计算"
 ```

 **图片生成：**

 ```bash
-/gemini-web --prompt "一只可爱的猫" --image cat.png
-/gemini-web --promptfiles system.md content.md --image out.png
+/baoyu-gemini-web --prompt "一只可爱的猫" --image cat.png
+/baoyu-gemini-web --promptfiles system.md content.md --image out.png
 ```

-### xhs-images
+### baoyu-xhs-images

 小红书信息图系列生成器。将内容拆解为 1-10 张卡通风格信息图，支持 **风格 × 布局** 二维系统。

 ```bash
 # 自动选择风格和布局
-/xhs-images posts/ai-future/article.md
+/baoyu-xhs-images posts/ai-future/article.md

 # 指定风格
-/xhs-images posts/ai-future/article.md --style notion
+/baoyu-xhs-images posts/ai-future/article.md --style notion

 # 指定布局
-/xhs-images posts/ai-future/article.md --layout dense
+/baoyu-xhs-images posts/ai-future/article.md --layout dense

 # 组合风格和布局
-/xhs-images posts/ai-future/article.md --style tech --layout list
+/baoyu-xhs-images posts/ai-future/article.md --style tech --layout list

 # 直接输入内容
-/xhs-images 今日星座运势
+/baoyu-xhs-images 今日星座运势
 ```

 **风格**（视觉美学）：`cute`（默认）、`fresh`、`tech`、`warm`、`bold`、`minimal`、`retro`、`pop`、`notion`
@@ -87,70 +112,111 @@
 | `comparison` | 双栏 | 对比、优劣 |
 | `flow` | 3-6 步 | 流程、时间线 |

-### cover-image
+### baoyu-cover-image

 为文章生成手绘风格封面图，支持多种风格选项。

 ```bash
 # 从 markdown 文件生成（自动选择风格）
-/cover-image path/to/article.md
+/baoyu-cover-image path/to/article.md

 # 指定风格
-/cover-image path/to/article.md --style tech
-/cover-image path/to/article.md --style warm
+/baoyu-cover-image path/to/article.md --style tech
+/baoyu-cover-image path/to/article.md --style warm

 # 不包含标题文字
-/cover-image path/to/article.md --no-title
+/baoyu-cover-image path/to/article.md --no-title
 ```

 可用风格：`elegant`（默认）、`tech`、`warm`、`bold`、`minimal`、`playful`、`nature`、`retro`

-### slide-deck
+### baoyu-slide-deck

 从内容生成专业的幻灯片图片。先创建包含样式说明的完整大纲，然后逐页生成幻灯片图片。

 ```bash
 # 从 markdown 文件生成
-/slide-deck path/to/article.md
+/baoyu-slide-deck path/to/article.md

 # 指定风格和受众
-/slide-deck path/to/article.md --style corporate
-/slide-deck path/to/article.md --audience executives
+/baoyu-slide-deck path/to/article.md --style corporate
+/baoyu-slide-deck path/to/article.md --audience executives

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

 # 指定语言
-/slide-deck path/to/article.md --lang zh
+/baoyu-slide-deck path/to/article.md --lang zh
 ```

 可用风格：`editorial`（默认）、`corporate`、`technical`、`playful`、`minimal`、`storytelling`、`warm`、`retro-flat`、`notion`

-### post-to-wechat
+### 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 --layout cinematic
+/baoyu-comic posts/turing-story/source.md --layout webtoon
+
+# 直接输入内容
+/baoyu-comic "图灵的故事与计算机科学的诞生"
+```
+
+**风格**（视觉美学）：
+| 风格 | 描述 | 适用场景 |
+|------|------|----------|
+| `classic` | 传统清线风格，平衡 | 传记、平衡叙事 |
+| `dramatic` | 高对比度，紧张感 | 突破时刻、冲突 |
+| `warm` | 怀旧、个人化 | 个人故事、师生情 |
+| `tech` | 现代、数字化 | 计算机史、AI 故事 |
+| `sepia` | 历史、档案感 | 1950 年前、古典科学 |
+| `vibrant` | 活力、吸引人 | 科普、青少年读者 |
+| `ohmsha` | 欧姆社漫画风格，视觉比喻 | 教程、复杂概念（机器学习、物理） |
+
+**布局**（分镜排列）：
+| 布局 | 每页分镜数 | 适用场景 |
+|------|-----------|----------|
+| `standard` | 4-6 | 对话、叙事推进 |
+| `cinematic` | 2-4 | 戏剧性时刻、建立镜头 |
+| `dense` | 6-9 | 技术说明、时间线 |
+| `splash` | 1-2 大图 | 关键时刻、揭示 |
+| `mixed` | 3-7 不等 | 复杂叙事、情感弧线 |
+| `webtoon` | 3-5 竖向 | 欧姆社教程、手机阅读 |
+
+### baoyu-post-to-wechat

 发布内容到微信公众号，支持两种模式：

 **图文模式** - 多图配短标题和正文：

 ```bash
-/post-to-wechat 图文 --markdown article.md --images ./photos/
-/post-to-wechat 图文 --markdown article.md --image img1.png --image img2.png --image img3.png
-/post-to-wechat 图文 --title "标题" --content "内容" --image img1.png --submit
+/baoyu-post-to-wechat 图文 --markdown article.md --images ./photos/
+/baoyu-post-to-wechat 图文 --markdown article.md --image img1.png --image img2.png --image img3.png
+/baoyu-post-to-wechat 图文 --title "标题" --content "内容" --image img1.png --submit
 ```

 **文章模式** - 完整 markdown/HTML 富文本格式：

 ```bash
-/post-to-wechat 文章 --markdown article.md
-/post-to-wechat 文章 --markdown article.md --theme grace
-/post-to-wechat 文章 --html article.html
+/baoyu-post-to-wechat 文章 --markdown article.md
+/baoyu-post-to-wechat 文章 --markdown article.md --theme grace
+/baoyu-post-to-wechat 文章 --html article.html
 ```

 前置要求：已安装 Google Chrome，首次运行需扫码登录（登录状态会保存）

 ## 免责声明

-### gemini-web
+### baoyu-gemini-web

 此技能使用 Gemini Web API（逆向工程）。

@@ -1,5 +1,5 @@
 ---
-name: article-illustrator
+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".
 ---

@@ -11,15 +11,15 @@ Analyze article structure and content, identify positions requiring visual aids,

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

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

 # Combine with other options
-/article-illustrator path/to/article.md --style playful
+/baoyu-article-illustrator path/to/article.md --style playful
 ```

 ## Options
@@ -0,0 +1,388 @@
+---
+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".
+---
+
+# Knowledge Comic Creator
+
+Create original knowledge comics supporting multiple visual styles: Logicomix-style Ligne Claire, Ohmsha manga guide, and more.
+
+## Usage
+
+```bash
+# From source material
+/baoyu-comic posts/turing-story/source.md
+
+# Specify style
+/baoyu-comic posts/turing-story/source.md --style dramatic
+
+# Specify layout preference
+/baoyu-comic posts/turing-story/source.md --layout cinematic
+
+# Direct content input
+/baoyu-comic
+[paste story content or topic description]
+
+# Direct input with options
+/baoyu-comic --style warm --layout dense
+[paste content]
+```
+
+## Options
+
+| Option | Description |
+|--------|-------------|
+| `--style <name>` | Visual style (see Style Gallery) |
+| `--layout <name>` | Panel layout preference (see Layout Gallery) |
+
+## Two Dimensions
+
+| Dimension | Controls | Options |
+|-----------|----------|---------|
+| **Style** | Color palette, mood, era treatment | classic, dramatic, warm, tech, sepia, vibrant, ohmsha |
+| **Layout** | Panel arrangement, density | standard, cinematic, dense, splash, mixed, webtoon |
+
+Style × Layout can be freely combined. Example: `--style dramatic --layout cinematic` creates high-contrast panels with wide aspect ratios.
+
+## Style Gallery
+
+| Style | Description |
+|-------|-------------|
+| `classic` (Default) | Traditional Ligne Claire, balanced and timeless |
+| `dramatic` | High contrast, intense moments |
+| `warm` | Nostalgic, personal storytelling |
+| `tech` | Modern, digital-age narratives |
+| `sepia` | Historical, archival feel |
+| `vibrant` | Energetic, engaging, educational |
+| `ohmsha` | Ohmsha Manga Guide style - educational manga with visual metaphors |
+
+Detailed style definitions: `references/styles/<style>.md`
+
+## Layout Gallery
+
+| Layout | Description |
+|--------|-------------|
+| `standard` (Default) | Classic comic grid, versatile (4-6 panels) |
+| `cinematic` | Wide panels, filmic feel (2-4 panels) |
+| `dense` | Information-rich, educational focus (6-9 panels) |
+| `splash` | Impact-focused, key moments (1-2 large + 2-3 small) |
+| `mixed` | Dynamic, varied rhythm (3-7 panels) |
+| `webtoon` | Vertical scrolling comic (竖版条漫) |
+
+Detailed layout definitions: `references/layouts/<layout>.md`
+
+## Auto Style Selection
+
+When no `--style` is specified, analyze content to select:
+
+| Content Signals | Selected Style |
+|----------------|----------------|
+| Tutorial, how-to, learning guide, beginner | `ohmsha` |
+| Computing, AI, digital, programming | `tech` |
+| Pre-1950, classical, ancient | `sepia` |
+| Personal story, childhood, mentor | `warm` |
+| Conflict, struggle, breakthrough | `dramatic` |
+| Young audience, science basics, wonder | `vibrant` |
+| Balanced narrative, biography | `classic` |
+
+## Auto Layout Selection
+
+When no `--layout` is specified, analyze content to select:
+
+| Content Signals | Selected Layout |
+|----------------|-----------------|
+| Technical explanation, timeline | `dense` |
+| Key discovery, major event | `splash` |
+| Establishing scene, location | `cinematic` |
+| Dialogue, conversation, debate | `standard` |
+| Mixed content, varied pacing | `mixed` |
+| Ohmsha style, tutorial, vertical scroll | `webtoon` |
+
+## Style × Layout Matrix
+
+| | standard | cinematic | dense | splash | mixed | webtoon |
+|---|:---:|:---:|:---:|:---:|:---:|:---:|
+| classic | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓ |
+| dramatic | ✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓ |
+| warm | ✓✓ | ✓✓ | ✓ | ✓ | ✓ | ✓ |
+| tech | ✓✓ | ✓ | ✓✓ | ✓ | ✓✓ | ✓✓ |
+| sepia | ✓✓ | ✓✓ | ✓ | ✓ | ✓ | ✓ |
+| vibrant | ✓✓ | ✓ | ✓ | ✓✓ | ✓✓ | ✓✓ |
+| ohmsha | ✓ | ✓ | ✓✓ | ✓ | ✓✓ | ✓✓ |
+
+✓✓ = highly recommended, ✓ = works well
+
+## File Management
+
+### With Source Path
+
+Save to `comic/` subdirectory in the same folder as the source:
+
+```
+posts/turing-story/
+├── source.md
+└── comic/
+    ├── outline.md
+    ├── prompts/
+    │   ├── 00-cover.md
+    │   ├── 01-page.md
+    │   └── ...
+    ├── 00-cover.png
+    ├── 01-page.png
+    └── ...
+```
+
+### Without Source Path
+
+Save to `comic-outputs/YYYY-MM-DD/[topic-slug]/`:
+
+```
+comic-outputs/
+└── 2026-01-16/
+    └── turing-biography/
+        ├── outline.md
+        ├── prompts/
+        │   ├── 00-cover.md
+        │   └── ...
+        ├── 00-cover.png
+        └── ...
+```
+
+**Directory collision**: If slug exists, generate a different slug (do not overwrite).
+
+## Workflow
+
+### Step 1: Analyze Content & Determine Scope
+
+1. Read source content
+2. If `--style` specified, use it; otherwise auto-select
+3. If `--layout` specified, use it; otherwise auto-select per page
+4. Determine page count based on content complexity:
+
+| Content Type | Page Count (incl. cover) |
+|-------------|--------------------------|
+| Single event / short story | 5-8 |
+| Medium complexity / mini biography | 9-15 |
+| Full biography / multi-thread | 16-25 |
+
+### Step 2: Generate Outline
+
+Plan cover + each page with detailed panel breakdowns:
+
+```markdown
+# [Comic Title] - Knowledge Biography Comic Outline
+
+**Topic**: [topic description]
+**Time Span**: [e.g., 1912-1954]
+**Style**: [selected style]
+**Default Layout**: [selected layout or "varies"]
+**Page Count**: Cover + N pages
+**Generated**: YYYY-MM-DD HH:mm
+
+---
+
+## Cover
+
+**Filename**: 00-cover.png
+**Core Message**: [one-liner]
+
+**Visual Design**:
+- Title typography style
+- Main visual composition
+- Color scheme
+- Subtitle / time span notation
+
+**Visual Prompt**:
+[Detailed image generation prompt]
+
+---
+
+## Page 1 / N
+
+**Filename**: 01-page.png
+**Layout**: [standard/cinematic/dense/splash/mixed]
+**Narrative Layer**: [Main narrative / Narrator layer / Mixed]
+**Core Message**: [What this page conveys]
+
+### Panel Layout
+
+**Panel Count**: X
+**Layout Type**: [grid/irregular/splash]
+
+#### Panel 1 (Size: 1/3 page, Position: Top)
+
+**Scene**: [Time, location]
+**Image Description**:
+- Camera angle: [bird's eye / low angle / eye level / close-up / wide shot]
+- Characters: [pose, expression, action]
+- Environment: [scene details, period markers]
+- Lighting: [atmosphere description]
+- Color tone: [palette reference]
+
+**Text Elements**:
+- Dialogue bubble (oval): "Character line"
+- Narrator box (rectangular): 「Narrator commentary」
+- Caption bar: [Background info text]
+
+#### Panel 2...
+
+**Page Hook**: [Cliffhanger or transition at page end]
+
+**Visual Prompt**:
+[Full page image generation prompt]
+
+---
+
+## Page 2 / N
+...
+```
+
+### Step 3: Save Outline
+
+Save as `outline.md` in target directory.
+
+### Step 4: Generate Images Page by Page
+
+For each page:
+
+1. **Save prompt file** to `prompts/` subdirectory
+2. **Call image generation skill**:
+
+```bash
+npx -y bun skills/baoyu-gemini-web/scripts/main.ts \
+  --promptfiles skills/baoyu-comic/prompts/system.md [target]/prompts/00-cover.md \
+  --image [target]/00-cover.png
+```
+
+After each generation:
+1. Confirm success
+2. Report progress: "Generated X/N pages"
+3. Continue to next
+
+### Step 5: Completion Report
+
+```
+Knowledge Biography Comic Complete!
+
+Title: [Comic Title]
+Time Span: [e.g., 1912-1954]
+Style: [style name]
+Layout: [layout name or "varies"]
+Location: [directory path]
+Pages: Cover + N pages
+
+- 00-cover.png ✓ Cover
+- 01-page.png ✓ Opening: [brief]
+- 02-page.png ✓ [brief]
+- ...
+- XX-page.png ✓ Ending: [brief]
+
+Outline: outline.md
+```
+
+## Narrative Structure Principles
+
+### Cover Design
+
+- Academic gravitas with visual appeal
+- Title typography reflecting knowledge/science theme
+- Composition hinting at core theme (character silhouette, iconic symbol, concept diagram)
+- Subtitle or time span for epic scope
+
+### Panel Composition Principles
+
+| Panel Type | Recommended Count | Usage |
+|-----------|-------------------|-------|
+| Main narrative | 3-5 per page | Story progression |
+| Concept diagram | 1-2 per page | Visualize abstractions |
+| Narrator panel | 0-1 per page | Commentary, transition, questions |
+| Splash (full/half) | Occasional | Major moments |
+
+### Panel Size Reference
+
+- **Full page (Splash)**: Major moments, key breakthroughs
+- **Half page**: Important scenes, turning points
+- **1/3 page**: Standard narrative panels
+- **1/4 or smaller**: Quick progression, sequential action
+
+### Concept Visualization Techniques
+
+Transform abstract concepts into concrete visuals:
+
+| Abstract Concept | Visual Approach |
+|-----------------|-----------------|
+| Neural network | Glowing nodes with connecting lines |
+| Gradient descent | Ball rolling down valley terrain |
+| Data flow | Luminous particles flowing through pipes |
+| Algorithm iteration | Ascending spiral staircase |
+| Breakthrough moment | Shattering barrier, piercing light |
+| Logical proof | Building blocks assembling |
+| Uncertainty | Forking paths, fog, multiple shadows |
+
+### Text Element Design
+
+| Text Type | Style | Usage |
+|-----------|-------|-------|
+| Character dialogue | Oval speech bubble | Main narrative speech |
+| Narrator commentary | Rectangular / hand-drawn box | Explanation, commentary |
+| Caption bar | Edge-mounted rectangle | Time, location info |
+| Thought bubble | Cloud shape | Character inner monologue |
+| Term label | Bold / special color | First appearance of technical terms |
+
+## Ohmsha Style Special Requirements
+
+When using `--style ohmsha`, follow these additional guidelines:
+
+### Character Setup (Required)
+
+Define characters before generating outline:
+
+| 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 |
+
+User can specify custom characters via `--characters "Student:小明,Mentor:教授,Antagonist:Bug怪"`
+
+### Outline Spec Block (Required)
+
+Every ohmsha outline must start with a spec block:
+
+```markdown
+【漫画规格单】
+- Language: [Same as input content]
+- Style: Ohmsha (Manga Guide), Full Color
+- Layout: Vertical Scrolling Comic (竖版条漫)
+- Characters: [List character names and roles]
+- Page Limit: ≤20 pages
+```
+
+### Visual Metaphor Rules (Critical)
+
+**NEVER** create "talking heads" panels. Every technical concept must become:
+
+1. **A tangible gadget/prop** - Something characters can hold, use, demonstrate
+2. **An action scene** - Characters doing something that illustrates the concept
+3. **A visual environment** - Stepping into a metaphorical space
+
+### Page Title Convention
+
+Avoid AI-style "Title: Subtitle" format. Use narrative descriptions:
+- ❌ "Page 3: Introduction to Neural Networks"
+- ✓ "Page 3: 大雄被海量单词淹没，哆啦A梦拿出'词向量压缩机'"
+
+### Ending Requirements
+
+- NO generic endings ("What will you choose?", "Thanks for reading")
+- End with: Technical summary moment OR character achieving a small goal
+- Final panel: Sense of accomplishment, not open-ended question
+
+## Notes
+
+- Image generation typically takes 30-60 seconds per page
+- Auto-retry once on generation failure
+- Historical figures rendered in portrait/illustration style for recognizability
+- All text in Chinese unless source is in another language
+- Each panel description should be detailed enough to serve as standalone AI art prompt
+- Maintain style consistency across all pages in series
@@ -0,0 +1,98 @@
+Create a knowledge biography comic page following these guidelines:
+
+## Image Specifications
+
+- **Type**: Comic book page with multiple panels
+- **Orientation**: Portrait (vertical)
+- **Aspect Ratio**: 2:3
+- **Style**: See style-specific reference for visual guidelines
+
+## Panel Structure
+
+### Panel Borders
+- Clean black lines (1-2px) around each panel
+- White gutters between panels (8-12px)
+- Panels arranged for clear reading flow
+- Variety in panel sizes for visual rhythm
+
+### Panel Composition
+- Clear focal points in each panel
+- Proper use of foreground, midground, background
+- Camera angles vary: eye level, bird's eye, low angle, close-up, wide shot
+- Action flows logically between panels
+- Negative space used intentionally
+
+## Text Elements
+
+### Speech Bubbles
+- **Dialogue**: Oval/elliptical bubbles with pointed tails
+- White fill with thin black outline
+- Tail points clearly to speaker
+- Hand-lettered style font (not computer-generated)
+
+### Narrator Boxes
+- **Fourth Wall/Narrator**: Rectangular boxes
+- Often positioned at panel edges (top or bottom)
+- Slightly different fill color (cream or light yellow)
+- Used for commentary, time jumps, explanations
+
+### Thought Bubbles
+- Cloud-shaped with bubble trail leading to thinker
+- Softer outline than speech bubbles
+- For internal monologue
+
+### Caption Bars
+- Rectangular bars at panel edges
+- Time and place information
+- "Meanwhile...", "Three years later..." type transitions
+- Darker fill with white text, or vice versa
+
+### Typography
+- Hand-drawn lettering style throughout
+- Bold for emphasis and key terms
+- Consistent letter sizing
+- Chinese text: use full-width punctuation ""，。！
+- Clear hierarchy: titles > dialogue > captions
+
+## Scientific/Concept Visualization
+
+When depicting abstract concepts:
+
+| Concept | Visual Metaphor |
+|---------|----------------|
+| Neural networks | Glowing nodes connected by clean lines |
+| Data flow | Luminous particles along simple paths |
+| Algorithms | Geometric patterns, building blocks |
+| Logic/proof | Interlocking puzzle pieces |
+| Discovery | Light breaking through darkness |
+| Uncertainty | Forking paths, question marks |
+| Time | Clock motifs, calendar pages |
+
+- Integrate diagrams naturally into narrative panels
+- Use inset panels or thought-bubble style for explanations
+- Simplified iconography over realistic depiction
+
+## Fourth Wall / Narrator Character
+
+When depicting narrator characters addressing the reader:
+- Character may look directly out of panel
+- Can appear in "present day" framing scenes
+- Distinct visual treatment from main timeline
+- Often at page edges or in dedicated panels
+- May comment on or question the events shown
+
+## Historical Accuracy
+
+- Research period-specific details: costumes, technology, architecture
+- Show aging naturally for characters across time periods
+- Iconic items and locations rendered recognizably
+- Balance accuracy with stylization
+
+## Language
+
+- All text in Chinese (中文) unless source material is in another language
+- Use Chinese full-width punctuation: ""，。！
+
+---
+
+Please generate the comic page based on the content provided below:
@@ -0,0 +1,23 @@
+# cinematic
+
+Wide panels, filmic feel
+
+## Panel Structure
+
+- **Panels per page**: 2-4
+- **Structure**: Horizontal emphasis, wide aspect panels
+- **Gutters**: Generous spacing (12-15px)
+
+## Grid Configuration
+
+- 1-2 columns, horizontal emphasis
+- Panel sizes: Wide aspect ratios (3:1, 4:1)
+- Reading flow: Horizontal sweep, filmic rhythm
+
+## Best For
+
+Establishing shots, dramatic moments, landscapes
+
+## Best Style Pairings
+
+dramatic, classic, sepia
@@ -0,0 +1,23 @@
+# dense
+
+Information-rich, educational focus
+
+## Panel Structure
+
+- **Panels per page**: 6-9
+- **Structure**: Compact grid, smaller panels
+- **Gutters**: Tight spacing (4-6px)
+
+## Grid Configuration
+
+- 3 columns × 3 rows
+- Panel sizes: Compact, uniform
+- Reading flow: Rapid progression, information-rich
+
+## Best For
+
+Technical explanations, complex narratives, timelines
+
+## Best Style Pairings
+
+tech, ohmsha, vibrant
@@ -0,0 +1,23 @@
+# mixed
+
+Dynamic, varied rhythm
+
+## Panel Structure
+
+- **Panels per page**: 3-7 (varies)
+- **Structure**: Intentionally varied for pacing
+- **Gutters**: Dynamic spacing
+
+## Grid Configuration
+
+- Intentionally irregular
+- Panel sizes: Varied for pacing and emphasis
+- Reading flow: Guides eye through varied rhythm
+
+## Best For
+
+Action sequences, emotional arcs, complex stories
+
+## Best Style Pairings
+
+dramatic, vibrant, ohmsha
@@ -0,0 +1,23 @@
+# splash
+
+Impact-focused, key moments
+
+## Panel Structure
+
+- **Panels per page**: 1-2 large + 2-3 small
+- **Structure**: Dominant splash with supporting panels
+- **Gutters**: Varied for emphasis
+
+## Grid Configuration
+
+- 1 dominant panel + 2-3 supporting
+- Panel sizes: 50-70% splash, remainder small
+- Reading flow: Splash dominates, supporting panels accent
+
+## Best For
+
+Revelations, breakthroughs, chapter openings
+
+## Best Style Pairings
+
+dramatic, classic, vibrant
@@ -0,0 +1,23 @@
+# standard
+
+Classic comic grid, versatile
+
+## Panel Structure
+
+- **Panels per page**: 4-6
+- **Structure**: Regular grid with occasional variation
+- **Gutters**: Consistent white space (8-10px)
+
+## Grid Configuration
+
+- 2-3 columns × 2-3 rows
+- Panel sizes: Mostly equal, occasional variation
+- Reading flow: Left→right, top→bottom (Z-pattern)
+
+## Best For
+
+Narrative flow, dialogue scenes
+
+## Best Style Pairings
+
+classic, warm, sepia
@@ -0,0 +1,30 @@
+# webtoon
+
+Vertical scrolling comic (竖版条漫)
+
+## Panel Structure
+
+- **Panels per page**: 3-5 vertically stacked
+- **Structure**: Single column, vertical flow optimized for scrolling
+- **Gutters**: Generous vertical spacing (20-40px), panels often bleed horizontally
+
+## Grid Configuration
+
+- Single column, vertical stack
+- Panel sizes: Full width, variable height (1:1 to 1:2 aspect)
+- Reading flow: Top→bottom continuous scroll
+
+## Special Features
+
+- Panels can extend beyond frame for dramatic effect
+- Generous whitespace between beats
+- Character close-ups alternate with wide explanation panels
+- "Float" effect - elements can exist between panels
+
+## Best For
+
+Ohmsha-style tutorials, mobile reading, step-by-step guides
+
+## Best Style Pairings
+
+ohmsha, tech, vibrant
@@ -0,0 +1,54 @@
+# 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
@@ -0,0 +1,34 @@
+# 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
@@ -0,0 +1,107 @@
+# 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
@@ -0,0 +1,34 @@
+# 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
@@ -0,0 +1,34 @@
+# tech
+
+Modern, digital-age narratives
+
+## Style Guidelines
+
+### Line Work
+- 2px, precise geometric undertones
+- Clean, technical precision
+- Circuit-like patterns in backgrounds
+
+### Character Design
+- Contemporary clothing, focused expressions
+- Modern tech accessories
+- Clean, precise features
+
+### Background Treatment
+- Digital elements, screens, circuit motifs
+- Grid patterns
+- Glowing interface elements
+
+## Color Palette
+
+- Primary: Cyan (#00D4FF), deep blue (#1A365D), white
+- Accents: Neon green (#00FF88), electric purple (#805AD5)
+- Background: Dark gray (#1A202C), grid patterns
+
+## Mood
+
+Innovation, digital, contemporary
+
+## Best For
+
+Computing history, AI stories, modern tech
@@ -0,0 +1,34 @@
+# 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
@@ -0,0 +1,34 @@
+# 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
@@ -0,0 +1,186 @@
+---
+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".
+---
+
+# Cover Image Generator
+
+Generate hand-drawn style cover images for articles with multiple style options.
+
+## Usage
+
+```bash
+# From markdown file (auto-select style 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
+/baoyu-cover-image path/to/article.md --style bold
+
+# Without title text
+/baoyu-cover-image path/to/article.md --no-title
+
+# Combine options
+/baoyu-cover-image path/to/article.md --style minimal --no-title
+
+# From direct text input
+/baoyu-cover-image
+[paste content or describe the topic]
+
+# Direct input with style
+/baoyu-cover-image --style playful
+[paste content]
+```
+
+## Options
+
+| Option | Description |
+|--------|-------------|
+| `--style <name>` | Specify cover style (see Style Gallery below) |
+| `--no-title` | Generate cover without title text (visual only) |
+
+## Style Gallery
+
+| Style | Description |
+|-------|-------------|
+| `elegant` (Default) | Refined, sophisticated, understated |
+| `tech` | Modern, clean, futuristic |
+| `warm` | Friendly, approachable, human-centered |
+| `bold` | High contrast, attention-grabbing, energetic |
+| `minimal` | Ultra-clean, zen-like, focused |
+| `playful` | Fun, creative, whimsical |
+| `nature` | Organic, calm, earthy |
+| `retro` | Vintage, nostalgic, classic |
+
+Detailed style definitions: `references/styles/<style>.md`
+
+## Auto Style Selection
+
+When no `--style` is specified, the system analyzes content to select the best style:
+
+| Content Signals | Selected Style |
+|----------------|----------------|
+| AI, coding, tech, digital, algorithm | `tech` |
+| Personal story, emotion, growth, life | `warm` |
+| Controversial, urgent, must-read, warning | `bold` |
+| Simple, zen, focus, essential | `minimal` |
+| Fun, easy, beginner, casual, tutorial | `playful` |
+| Nature, eco, wellness, health, organic | `nature` |
+| History, classic, vintage, old, traditional | `retro` |
+| Business, professional, strategy, analysis | `elegant` |
+
+## File Management
+
+### With Article Path
+
+Save to `imgs/` subdirectory in the same folder as the article:
+
+```
+path/to/
+├── article.md
+└── imgs/
+    ├── prompts/
+    │   └── cover.md
+    └── cover.png
+```
+
+### Without Article Path
+
+Save to current working directory:
+
+```
+./
+├── cover-prompt.md
+└── cover.png
+```
+
+## Workflow
+
+### Step 1: Analyze Content
+
+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: Select Style
+
+If `--style` specified, use that style. Otherwise:
+1. Scan content for style signals (see Auto Style Selection table)
+2. Match signals to most appropriate style
+3. Default to `elegant` if no clear signals
+
+### Step 3: 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 4: Create Prompt File
+
+**Prompt Format**:
+
+```markdown
+Cover theme: [topic in 2-3 words]
+Style: [selected style name]
+
+[If title included:]
+Title text: [8 characters or less, in content language]
+Subtitle: [optional, in content language]
+
+Visual composition:
+- Main visual: [description matching style]
+- Layout: [positioning based on title inclusion]
+- 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.
+```
+
+### Step 5: 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 and output path.
+
+### Step 6: Output Summary
+
+```
+Cover Image Generated!
+
+Topic: [topic]
+Style: [style name]
+Title: [cover title] (or "No title - visual only")
+Location: [output path]
+
+Preview the image to verify it matches your expectations.
+```
+
+## 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 language should match content language
@@ -0,0 +1,23 @@
+# bold
+
+High contrast, attention-grabbing, energetic
+
+## Color Palette
+
+- Primary: Vibrant red (#E53E3E), bright orange (#DD6B20), electric yellow (#F6E05E)
+- Background: Deep black (#000000), dark charcoal
+- Accents: White, neon highlights
+
+## Visual Elements
+
+- Exclamation marks, lightning bolts
+- Arrows, strong shapes
+- Dramatic compositions
+
+## Typography
+
+- Bold, impactful, large hand lettering with shadows
+
+## Best For
+
+Opinion pieces, controversial takes, urgent topics
@@ -0,0 +1,23 @@
+# elegant
+
+Refined, sophisticated, understated
+
+## Color Palette
+
+- Primary: Soft coral (#E8A598), muted teal (#5B8A8A), dusty rose (#D4A5A5)
+- Background: Warm cream (#F5F0E6), soft beige
+- Accents: Gold (#C9A962), copper
+
+## Visual Elements
+
+- Delicate lines, refined icons
+- Subtle gradients
+- Balanced composition
+
+## Typography
+
+- Elegant serif-style hand lettering
+
+## Best For
+
+Professional content, thought leadership, business topics
@@ -0,0 +1,23 @@
+# minimal
+
+Ultra-clean, zen-like, focused
+
+## Color Palette
+
+- Primary: Pure black (#000000), white (#FFFFFF)
+- Background: White or off-white (#FAFAFA)
+- Accents: Single color (user's choice or content-derived)
+
+## Visual Elements
+
+- Single focal point
+- Maximum negative space
+- Thin lines
+
+## Typography
+
+- Clean, simple hand lettering, lots of breathing room
+
+## Best For
+
+Philosophy, minimalism, focused concepts
@@ -0,0 +1,22 @@
+# nature
+
+Organic, calm, earthy
+
+## Color Palette
+
+- Primary: Forest green (#276749), sage (#9AE6B4), earth brown (#744210)
+- Background: Sand beige (#F5E6D3), sky blue (#E0F2FE)
+- Accents: Sunset orange, water blue
+
+## Visual Elements
+
+- Leaves, trees, mountains
+- Sun, clouds, organic flowing lines
+
+## Typography
+
+- Organic, flowing hand lettering with natural textures
+
+## Best For
+
+Sustainability, wellness, outdoor topics, slow living
@@ -0,0 +1,23 @@
+# playful
+
+Fun, creative, whimsical
+
+## Color Palette
+
+- Primary: Pastel pink (#FED7E2), mint (#C6F6D5), lavender (#E9D8FD), sky blue (#BEE3F8)
+- Background: Light cream (#FFFBEB), soft white
+- Accents: Bright pops - yellow, coral, turquoise
+
+## Visual Elements
+
+- Doodles, stars, swirls
+- Cute characters, emoji-style icons
+- Playful compositions
+
+## Typography
+
+- Bouncy, irregular hand lettering, playful angles
+
+## Best For
+
+Casual content, tutorials, beginner guides, fun topics
@@ -0,0 +1,22 @@
+# retro
+
+Vintage, nostalgic, classic
+
+## Color Palette
+
+- Primary: Muted orange (#ED8936 at 70%), dusty pink (#FED7E2 at 80%), faded teal
+- Background: Aged paper (#F5E6D3), sepia tones
+- Accents: Faded red, vintage gold
+
+## Visual Elements
+
+- Halftone dots, vintage badges
+- Classic icons, aged textures
+
+## Typography
+
+- Vintage-style hand lettering, classic serif influence
+
+## Best For
+
+History, retrospectives, classic topics, throwback content
@@ -0,0 +1,23 @@
+# tech
+
+Modern, clean, futuristic
+
+## Color Palette
+
+- Primary: Deep blue (#1A365D), electric cyan (#00D4FF), purple (#6B46C1)
+- Background: Dark gray (#1A202C), near-black (#0D1117)
+- Accents: Neon green (#00FF88), bright white
+
+## Visual Elements
+
+- Circuit patterns, data nodes
+- Geometric grids, code snippets
+- Glowing effects
+
+## Typography
+
+- Monospace-style hand lettering, glowing effects
+
+## Best For
+
+AI, programming, technology, digital transformation
@@ -0,0 +1,22 @@
+# warm
+
+Friendly, approachable, human-centered
+
+## Color Palette
+
+- Primary: Warm orange (#ED8936), golden yellow (#F6AD55), terracotta (#C05621)
+- Background: Cream (#FFFAF0), soft peach (#FED7AA)
+- Accents: Deep brown (#744210), soft red
+
+## Visual Elements
+
+- Rounded shapes, smiling faces
+- Sun rays, hearts, warm lighting
+
+## Typography
+
+- Friendly rounded hand lettering
+
+## Best For
+
+Personal growth, lifestyle, education, human stories
@@ -1,6 +1,6 @@
 ---
-name: gemini-web
-description: Interacts with Gemini Web to generate text and images. Use when the user needs AI-generated content via Gemini, including text responses and image generation.
+name: baoyu-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.
 ---

 # Gemini Web Client
@@ -100,7 +100,7 @@ export async function loadGeminiCookies(
  }

  log?.(
-    '[gemini-web] Missing Gemini auth cookies. Run `npx -y bun skills/gemini-web/scripts/main.ts --login` to sign in and refresh cookies.',
+    '[gemini-web] Missing Gemini auth cookies. Run `npx -y bun skills/baoyu-gemini-web/scripts/main.ts --login` to sign in and refresh cookies.',
  );
  return merged;
 }
@@ -124,7 +124,7 @@ export function createGeminiWebExecutor(
    const cookieMap = await loadGeminiCookies(runOptions.config, log);
    if (!hasRequiredGeminiCookies(cookieMap)) {
      throw new Error(
-        'Gemini browser mode requires auth cookies (missing __Secure-1PSID/__Secure-1PSIDTS). Run `npx -y bun skills/gemini-web/scripts/main.ts --login` to sign in and save cookies.',
+        'Gemini browser mode requires auth cookies (missing __Secure-1PSID/__Secure-1PSIDTS). Run `npx -y bun skills/baoyu-gemini-web/scripts/main.ts --login` to sign in and save cookies.',
      );
    }

@@ -16,10 +16,10 @@ function printUsage(exitCode = 0): never {
  const profileDir = resolveGeminiWebChromeProfileDir();

  console.log(`Usage:
-  npx -y bun skills/gemini-web/scripts/main.ts --prompt "Hello"
-  npx -y bun skills/gemini-web/scripts/main.ts "Hello"
-  npx -y bun skills/gemini-web/scripts/main.ts --prompt "A cute cat" --image generated.png
-  npx -y bun skills/gemini-web/scripts/main.ts --promptfiles system.md content.md --image out.png
+  npx -y bun skills/baoyu-gemini-web/scripts/main.ts --prompt "Hello"
+  npx -y bun skills/baoyu-gemini-web/scripts/main.ts "Hello"
+  npx -y bun skills/baoyu-gemini-web/scripts/main.ts --prompt "A cute cat" --image generated.png
+  npx -y bun skills/baoyu-gemini-web/scripts/main.ts --promptfiles system.md content.md --image out.png

 Options:
  -p, --prompt <text>       Prompt text
@@ -1,5 +1,5 @@
 ---
-name: post-to-wechat
+name: baoyu-post-to-wechat
 description: Post content to WeChat Official Account (微信公众号). Supports both article posting (文章) and image-text posting (图文).
 ---

@@ -7,25 +7,45 @@ description: Post content to WeChat Official Account (微信公众号). Supports

 Post content to WeChat Official Account using Chrome CDP automation.

+## 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/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 |
+
 ## Quick Usage

 ### Image-Text (图文) - Multiple images with title/content

 ```bash
 # From markdown file and image directory
-npx -y bun ./scripts/wechat-browser.ts --markdown article.md --images ./images/
+npx -y bun ${SKILL_DIR}/scripts/wechat-browser.ts --markdown article.md --images ./images/

 # With explicit parameters
-npx -y bun ./scripts/wechat-browser.ts --title "标题" --content "内容" --image img1.png --image img2.png --submit
+npx -y bun ${SKILL_DIR}/scripts/wechat-browser.ts --title "标题" --content "内容" --image img1.png --image img2.png --submit
 ```

 ### Article (文章) - Full markdown with formatting

 ```bash
 # Post markdown article
-npx -y bun ./scripts/wechat-article.ts --markdown article.md --theme grace
+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.
+
 ## References

 - **Image-Text Posting**: See `references/image-text-posting.md` for detailed image-text posting guide
@@ -0,0 +1,194 @@
+import { spawnSync } from 'node:child_process';
+import process from 'node:process';
+
+function printUsage(exitCode = 0): never {
+  console.log(`Send real paste keystroke (Cmd+V / Ctrl+V) to the frontmost application
+
+This bypasses CDP's synthetic events which websites can detect and ignore.
+
+Usage:
+  npx -y bun paste-from-clipboard.ts [options]
+
+Options:
+  --retries <n>     Number of retry attempts (default: 3)
+  --delay <ms>      Delay between retries in ms (default: 500)
+  --app <name>      Target application to activate first (macOS only)
+  --help            Show this help
+
+Examples:
+  # Simple paste
+  npx -y bun paste-from-clipboard.ts
+
+  # Paste to Chrome with retries
+  npx -y bun paste-from-clipboard.ts --app "Google Chrome" --retries 5
+
+  # Quick paste with shorter delay
+  npx -y bun paste-from-clipboard.ts --delay 200
+`);
+  process.exit(exitCode);
+}
+
+function sleepSync(ms: number): void {
+  Atomics.wait(new Int32Array(new SharedArrayBuffer(4)), 0, 0, ms);
+}
+
+function activateApp(appName: string): boolean {
+  if (process.platform !== 'darwin') return false;
+
+  // Activate and wait for app to be frontmost
+  const script = `
+    tell application "${appName}"
+      activate
+      delay 0.5
+    end tell
+
+    -- Verify app is frontmost
+    tell application "System Events"
+      set frontApp to name of first application process whose frontmost is true
+      if frontApp is not "${appName}" then
+        tell application "${appName}" to activate
+        delay 0.3
+      end if
+    end tell
+  `;
+  const result = spawnSync('osascript', ['-e', script], { stdio: 'pipe' });
+  return result.status === 0;
+}
+
+function pasteMac(retries: number, delayMs: number, targetApp?: string): boolean {
+  for (let i = 0; i < retries; i++) {
+    // Build script that activates app (if specified) and sends keystroke in one atomic operation
+    const script = targetApp
+      ? `
+        tell application "${targetApp}"
+          activate
+        end tell
+        delay 0.3
+        tell application "System Events"
+          keystroke "v" using command down
+        end tell
+      `
+      : `
+        tell application "System Events"
+          keystroke "v" using command down
+        end tell
+      `;
+
+    const result = spawnSync('osascript', ['-e', script], { stdio: 'pipe' });
+    if (result.status === 0) {
+      return true;
+    }
+
+    const stderr = result.stderr?.toString().trim();
+    if (stderr) {
+      console.error(`[paste] osascript error: ${stderr}`);
+    }
+
+    if (i < retries - 1) {
+      console.error(`[paste] Attempt ${i + 1}/${retries} failed, retrying in ${delayMs}ms...`);
+      sleepSync(delayMs);
+    }
+  }
+  return false;
+}
+
+function pasteLinux(retries: number, delayMs: number): boolean {
+  // Try xdotool first (X11), then ydotool (Wayland)
+  const tools = [
+    { cmd: 'xdotool', args: ['key', 'ctrl+v'] },
+    { cmd: 'ydotool', args: ['key', '29:1', '47:1', '47:0', '29:0'] }, // Ctrl down, V down, V up, Ctrl up
+  ];
+
+  for (const tool of tools) {
+    const which = spawnSync('which', [tool.cmd], { stdio: 'pipe' });
+    if (which.status !== 0) continue;
+
+    for (let i = 0; i < retries; i++) {
+      const result = spawnSync(tool.cmd, tool.args, { stdio: 'pipe' });
+      if (result.status === 0) {
+        return true;
+      }
+      if (i < retries - 1) {
+        console.error(`[paste] Attempt ${i + 1}/${retries} failed, retrying in ${delayMs}ms...`);
+        sleepSync(delayMs);
+      }
+    }
+    return false;
+  }
+
+  console.error('[paste] No supported tool found. Install xdotool (X11) or ydotool (Wayland).');
+  return false;
+}
+
+function pasteWindows(retries: number, delayMs: number): boolean {
+  const ps = `
+    Add-Type -AssemblyName System.Windows.Forms
+    [System.Windows.Forms.SendKeys]::SendWait("^v")
+  `;
+
+  for (let i = 0; i < retries; i++) {
+    const result = spawnSync('powershell.exe', ['-NoProfile', '-Command', ps], { stdio: 'pipe' });
+    if (result.status === 0) {
+      return true;
+    }
+    if (i < retries - 1) {
+      console.error(`[paste] Attempt ${i + 1}/${retries} failed, retrying in ${delayMs}ms...`);
+      sleepSync(delayMs);
+    }
+  }
+  return false;
+}
+
+function paste(retries: number, delayMs: number, targetApp?: string): boolean {
+  switch (process.platform) {
+    case 'darwin':
+      return pasteMac(retries, delayMs, targetApp);
+    case 'linux':
+      return pasteLinux(retries, delayMs);
+    case 'win32':
+      return pasteWindows(retries, delayMs);
+    default:
+      console.error(`[paste] Unsupported platform: ${process.platform}`);
+      return false;
+  }
+}
+
+async function main(): Promise<void> {
+  const args = process.argv.slice(2);
+
+  let retries = 3;
+  let delayMs = 500;
+  let targetApp: string | undefined;
+
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i] ?? '';
+    if (arg === '--help' || arg === '-h') {
+      printUsage(0);
+    }
+    if (arg === '--retries' && args[i + 1]) {
+      retries = parseInt(args[++i]!, 10) || 3;
+    } else if (arg === '--delay' && args[i + 1]) {
+      delayMs = parseInt(args[++i]!, 10) || 500;
+    } else if (arg === '--app' && args[i + 1]) {
+      targetApp = args[++i];
+    } else if (arg.startsWith('-')) {
+      console.error(`Unknown option: ${arg}`);
+      printUsage(1);
+    }
+  }
+
+  if (targetApp) {
+    console.log(`[paste] Target app: ${targetApp}`);
+  }
+  console.log(`[paste] Sending paste keystroke (retries=${retries}, delay=${delayMs}ms)...`);
+  const success = paste(retries, delayMs, targetApp);
+
+  if (success) {
+    console.log('[paste] Paste keystroke sent successfully');
+  } else {
+    console.error('[paste] Failed to send paste keystroke');
+    process.exit(1);
+  }
+}
+
+await main();
@@ -0,0 +1,103 @@
+---
+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.
+---
+
+# Post to X (Twitter)
+
+Post content, images, and long-form articles to X using real Chrome browser (bypasses anti-bot detection).
+
+## 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/x-browser.ts` | Regular posts (text + images) |
+| `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 |
+
+## Prerequisites
+
+- Google Chrome or Chromium installed
+- `bun` installed (for running scripts)
+- First run: log in to X in the opened browser window
+
+## References
+
+- **Regular Posts**: See `references/regular-posts.md` for manual workflow, troubleshooting, and technical details
+- **X Articles**: See `references/articles.md` for long-form article publishing guide
+
+---
+
+## Regular Posts
+
+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
+```
+
+> **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 |
+
+---
+
+## X Articles
+
+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
+```
+
+**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) |
+
+**Frontmatter** (optional):
+```yaml
+---
+title: My Article Title
+cover_image: /path/to/cover.jpg
+---
+```
+
+---
+
+## Notes
+
+- First run requires manual login (session is saved)
+- Always preview before using `--submit`
+- Browser closes automatically after operation
+- Supports macOS, Linux, and Windows
@@ -0,0 +1,176 @@
+# X Articles - Detailed Guide
+
+Publish Markdown articles to X Articles editor with rich text formatting and images.
+
+## Prerequisites
+
+- X Premium subscription (required for Articles)
+- Google Chrome installed
+- `bun` installed
+
+## Usage
+
+```bash
+# Publish markdown article (preview mode)
+npx -y bun ${SKILL_DIR}/scripts/x-article.ts article.md
+
+# With custom cover image
+npx -y bun ${SKILL_DIR}/scripts/x-article.ts article.md --cover ./cover.jpg
+
+# Actually publish
+npx -y bun ${SKILL_DIR}/scripts/x-article.ts article.md --submit
+```
+
+## Markdown Format
+
+```markdown
+---
+title: My Article Title
+cover_image: /path/to/cover.jpg
+---
+
+# Title (becomes article title)
+
+Regular paragraph text with **bold** and *italic*.
+
+## Section Header
+
+More content here.
+
+![Image alt text](./image.png)
+
+- List item 1
+- List item 2
+
+1. Numbered item
+2. Another item
+
+> Blockquote text
+
+[Link text](https://example.com)
+
+\`\`\`
+Code blocks become blockquotes (X doesn't support code)
+\`\`\`
+```
+
+## Frontmatter Fields
+
+| Field | Description |
+|-------|-------------|
+| `title` | Article title (or uses first H1) |
+| `cover_image` | Cover image path or URL |
+| `cover` | Alias for cover_image |
+| `image` | Alias for cover_image |
+
+## Image Handling
+
+1. **Cover Image**: First image or `cover_image` from frontmatter
+2. **Remote Images**: Automatically downloaded to temp directory
+3. **Placeholders**: Images in content use `[[IMAGE_PLACEHOLDER_N]]` format
+4. **Insertion**: Placeholders are found, selected, and replaced with actual images
+
+## Markdown to HTML Script
+
+Convert markdown and inspect structure:
+
+```bash
+# Get JSON with all metadata
+npx -y bun ${SKILL_DIR}/scripts/md-to-html.ts article.md
+
+# Output HTML only
+npx -y bun ${SKILL_DIR}/scripts/md-to-html.ts article.md --html-only
+
+# Save HTML to file
+npx -y bun ${SKILL_DIR}/scripts/md-to-html.ts article.md --save-html /tmp/article.html
+```
+
+JSON output:
+```json
+{
+  "title": "Article Title",
+  "coverImage": "/path/to/cover.jpg",
+  "contentImages": [
+    {
+      "placeholder": "[[IMAGE_PLACEHOLDER_1]]",
+      "localPath": "/tmp/x-article-images/img.png",
+      "blockIndex": 5
+    }
+  ],
+  "html": "<p>Content...</p>",
+  "totalBlocks": 20
+}
+```
+
+## Supported Formatting
+
+| Markdown | HTML Output |
+|----------|-------------|
+| `# H1` | Title only (not in body) |
+| `## H2` - `###### H6` | `<h2>` |
+| `**bold**` | `<strong>` |
+| `*italic*` | `<em>` |
+| `[text](url)` | `<a href>` |
+| `> quote` | `<blockquote>` |
+| `` `code` `` | `<code>` |
+| ```` ``` ```` | `<blockquote>` (X limitation) |
+| `- item` | `<ul><li>` |
+| `1. item` | `<ol><li>` |
+| `![](img)` | Image placeholder |
+
+## Workflow
+
+1. **Parse Markdown**: Extract title, cover, content images, generate HTML
+2. **Launch Chrome**: Real browser with CDP, persistent login
+3. **Navigate**: Open `x.com/compose/articles`
+4. **Create Article**: Click create button if on list page
+5. **Upload Cover**: Use file input for cover image
+6. **Fill Title**: Type title into title field
+7. **Paste Content**: Copy HTML to clipboard, paste into editor
+8. **Insert Images**: For each placeholder (reverse order):
+   - Find placeholder text in editor
+   - Select the placeholder
+   - Copy image to clipboard
+   - Paste to replace selection
+9. **Review**: Browser stays open for 60s preview
+10. **Publish**: Only with `--submit` flag
+
+## Example Session
+
+```
+User: /post-to-x article ./blog/my-post.md --cover ./thumbnail.png
+
+Claude:
+1. Parses markdown: title="My Post", 3 content images
+2. Launches Chrome with CDP
+3. Navigates to x.com/compose/articles
+4. Clicks create button
+5. Uploads thumbnail.png as cover
+6. Fills title "My Post"
+7. Pastes HTML content
+8. Inserts 3 images at placeholder positions
+9. Reports: "Article composed. Review and use --submit to publish."
+```
+
+## Troubleshooting
+
+- **No create button**: Ensure X Premium subscription is active
+- **Cover upload fails**: Check file path and format (PNG, JPEG)
+- **Images not inserting**: Verify placeholders exist in pasted content
+- **Content not pasting**: Check HTML clipboard: `npx -y bun ${SKILL_DIR}/scripts/copy-to-clipboard.ts html --file /tmp/test.html`
+
+## How It Works
+
+1. `md-to-html.ts` converts Markdown to HTML:
+   - Extracts frontmatter (title, cover)
+   - Converts markdown to HTML
+   - Replaces images with unique placeholders
+   - Downloads remote images locally
+   - Returns structured JSON
+
+2. `x-article.ts` publishes via CDP:
+   - Launches real Chrome (bypasses detection)
+   - Uses persistent profile (saved login)
+   - Navigates and fills editor via DOM manipulation
+   - Pastes HTML from system clipboard
+   - Finds/selects/replaces each image placeholder
@@ -0,0 +1,100 @@
+# Regular Posts - Detailed Guide
+
+Detailed documentation for posting text and images to X.
+
+## Manual Workflow
+
+If you prefer step-by-step control:
+
+### Step 1: Copy Image to Clipboard
+
+```bash
+npx -y bun ${SKILL_DIR}/scripts/copy-to-clipboard.ts image /path/to/image.png
+```
+
+### Step 2: Paste from Clipboard
+
+```bash
+# Simple paste to frontmost app
+npx -y bun ${SKILL_DIR}/scripts/paste-from-clipboard.ts
+
+# Paste to Chrome with retries
+npx -y bun ${SKILL_DIR}/scripts/paste-from-clipboard.ts --app "Google Chrome" --retries 5
+
+# Quick paste with shorter delay
+npx -y bun ${SKILL_DIR}/scripts/paste-from-clipboard.ts --delay 200
+```
+
+### Step 3: Use Playwright MCP (if Chrome session available)
+
+```bash
+# Navigate
+mcp__playwright__browser_navigate url="https://x.com/compose/post"
+
+# Get element refs
+mcp__playwright__browser_snapshot
+
+# Type text
+mcp__playwright__browser_click element="editor" ref="<ref>"
+mcp__playwright__browser_type element="editor" ref="<ref>" text="Your content"
+
+# Paste image (after copying to clipboard)
+mcp__playwright__browser_press_key key="Meta+v"  # macOS
+# or
+mcp__playwright__browser_press_key key="Control+v"  # Windows/Linux
+
+# Screenshot to verify
+mcp__playwright__browser_take_screenshot filename="preview.png"
+```
+
+## Image Support
+
+- Formats: PNG, JPEG, GIF, WebP
+- Max 4 images per post
+- Images copied to system clipboard, then pasted via keyboard shortcut
+
+## Example Session
+
+```
+User: /post-to-x "Hello from Claude!" --image ./screenshot.png
+
+Claude:
+1. Runs: npx -y bun ${SKILL_DIR}/scripts/x-browser.ts "Hello from Claude!" --image ./screenshot.png
+2. Chrome opens with X compose page
+3. Text is typed into editor
+4. Image is copied to clipboard and pasted
+5. Browser stays open 30s for preview
+6. Reports: "Post composed. Use --submit to post."
+```
+
+## Troubleshooting
+
+- **Chrome not found**: Set `X_BROWSER_CHROME_PATH` environment variable
+- **Not logged in**: First run opens Chrome - log in manually, cookies are saved
+- **Image paste fails**:
+  - Verify clipboard script: `npx -y bun ${SKILL_DIR}/scripts/copy-to-clipboard.ts image <path>`
+  - On macOS, grant "Accessibility" permission to Terminal/iTerm in System Settings > Privacy & Security > Accessibility
+  - Keep Chrome window visible and in front during paste operations
+- **osascript permission denied**: Grant Terminal accessibility permissions in System Preferences
+- **Rate limited**: Wait a few minutes before retrying
+
+## How It Works
+
+The `x-browser.ts` script uses Chrome DevTools Protocol (CDP) to:
+1. Launch real Chrome (not Playwright) with `--disable-blink-features=AutomationControlled`
+2. Use persistent profile directory for saved login sessions
+3. Interact with X via CDP commands (Runtime.evaluate, Input.dispatchKeyEvent)
+4. **Paste images using osascript** (macOS): Sends real Cmd+V keystroke to Chrome, bypassing CDP's synthetic events that X can detect
+
+This approach bypasses X's anti-automation detection that blocks Playwright/Puppeteer.
+
+### Image Paste Mechanism (macOS)
+
+CDP's `Input.dispatchKeyEvent` sends "synthetic" keyboard events that websites can detect. X ignores synthetic paste events for security. The solution:
+
+1. Copy image to system clipboard via Swift/AppKit (`copy-to-clipboard.ts`)
+2. Bring Chrome to front via `osascript`
+3. Send real Cmd+V keystroke via `osascript` and System Events
+4. Wait for upload to complete
+
+This requires Terminal to have "Accessibility" permission in System Settings.
@@ -303,6 +303,7 @@ export async function parseMarkdown(
  // Resolve image paths (download remote, resolve relative)
  const contentImages: ImageInfo[] = [];
  let isFirstImage = true;
+  let coverPlaceholder: string | null = null;

  for (let i = 0; i < images.length; i++) {
    const img = images[i]!;
@@ -311,6 +312,7 @@ export async function parseMarkdown(
    // First image becomes cover if no cover specified
    if (isFirstImage && !coverImagePath) {
      coverImagePath = localPath;
+      coverPlaceholder = `[[IMAGE_PLACEHOLDER_${i + 1}]]`;
      isFirstImage = false;
      // Don't add to contentImages, it's the cover
      continue;
@@ -325,6 +327,13 @@ export async function parseMarkdown(
    });
  }

+  // Remove cover placeholder from HTML if first image was used as cover
+  let finalHtml = html;
+  if (coverPlaceholder) {
+    // Remove the placeholder and its containing <p> tag
+    finalHtml = finalHtml.replace(new RegExp(`<p>${coverPlaceholder.replace(/[[\]]/g, '\\$&')}</p>\\n?`, 'g'), '');
+  }
+
  // Resolve cover image path
  let resolvedCoverImage: string | null = null;
  if (coverImagePath) {
@@ -335,7 +344,7 @@ export async function parseMarkdown(
    title,
    coverImage: resolvedCoverImage,
    contentImages,
-    html,
+    html: finalHtml,
    totalBlocks,
  };
 }
@@ -0,0 +1,194 @@
+import { spawnSync } from 'node:child_process';
+import process from 'node:process';
+
+function printUsage(exitCode = 0): never {
+  console.log(`Send real paste keystroke (Cmd+V / Ctrl+V) to the frontmost application
+
+This bypasses CDP's synthetic events which websites can detect and ignore.
+
+Usage:
+  npx -y bun paste-from-clipboard.ts [options]
+
+Options:
+  --retries <n>     Number of retry attempts (default: 3)
+  --delay <ms>      Delay between retries in ms (default: 500)
+  --app <name>      Target application to activate first (macOS only)
+  --help            Show this help
+
+Examples:
+  # Simple paste
+  npx -y bun paste-from-clipboard.ts
+
+  # Paste to Chrome with retries
+  npx -y bun paste-from-clipboard.ts --app "Google Chrome" --retries 5
+
+  # Quick paste with shorter delay
+  npx -y bun paste-from-clipboard.ts --delay 200
+`);
+  process.exit(exitCode);
+}
+
+function sleepSync(ms: number): void {
+  Atomics.wait(new Int32Array(new SharedArrayBuffer(4)), 0, 0, ms);
+}
+
+function activateApp(appName: string): boolean {
+  if (process.platform !== 'darwin') return false;
+
+  // Activate and wait for app to be frontmost
+  const script = `
+    tell application "${appName}"
+      activate
+      delay 0.5
+    end tell
+
+    -- Verify app is frontmost
+    tell application "System Events"
+      set frontApp to name of first application process whose frontmost is true
+      if frontApp is not "${appName}" then
+        tell application "${appName}" to activate
+        delay 0.3
+      end if
+    end tell
+  `;
+  const result = spawnSync('osascript', ['-e', script], { stdio: 'pipe' });
+  return result.status === 0;
+}
+
+function pasteMac(retries: number, delayMs: number, targetApp?: string): boolean {
+  for (let i = 0; i < retries; i++) {
+    // Build script that activates app (if specified) and sends keystroke in one atomic operation
+    const script = targetApp
+      ? `
+        tell application "${targetApp}"
+          activate
+        end tell
+        delay 0.3
+        tell application "System Events"
+          keystroke "v" using command down
+        end tell
+      `
+      : `
+        tell application "System Events"
+          keystroke "v" using command down
+        end tell
+      `;
+
+    const result = spawnSync('osascript', ['-e', script], { stdio: 'pipe' });
+    if (result.status === 0) {
+      return true;
+    }
+
+    const stderr = result.stderr?.toString().trim();
+    if (stderr) {
+      console.error(`[paste] osascript error: ${stderr}`);
+    }
+
+    if (i < retries - 1) {
+      console.error(`[paste] Attempt ${i + 1}/${retries} failed, retrying in ${delayMs}ms...`);
+      sleepSync(delayMs);
+    }
+  }
+  return false;
+}
+
+function pasteLinux(retries: number, delayMs: number): boolean {
+  // Try xdotool first (X11), then ydotool (Wayland)
+  const tools = [
+    { cmd: 'xdotool', args: ['key', 'ctrl+v'] },
+    { cmd: 'ydotool', args: ['key', '29:1', '47:1', '47:0', '29:0'] }, // Ctrl down, V down, V up, Ctrl up
+  ];
+
+  for (const tool of tools) {
+    const which = spawnSync('which', [tool.cmd], { stdio: 'pipe' });
+    if (which.status !== 0) continue;
+
+    for (let i = 0; i < retries; i++) {
+      const result = spawnSync(tool.cmd, tool.args, { stdio: 'pipe' });
+      if (result.status === 0) {
+        return true;
+      }
+      if (i < retries - 1) {
+        console.error(`[paste] Attempt ${i + 1}/${retries} failed, retrying in ${delayMs}ms...`);
+        sleepSync(delayMs);
+      }
+    }
+    return false;
+  }
+
+  console.error('[paste] No supported tool found. Install xdotool (X11) or ydotool (Wayland).');
+  return false;
+}
+
+function pasteWindows(retries: number, delayMs: number): boolean {
+  const ps = `
+    Add-Type -AssemblyName System.Windows.Forms
+    [System.Windows.Forms.SendKeys]::SendWait("^v")
+  `;
+
+  for (let i = 0; i < retries; i++) {
+    const result = spawnSync('powershell.exe', ['-NoProfile', '-Command', ps], { stdio: 'pipe' });
+    if (result.status === 0) {
+      return true;
+    }
+    if (i < retries - 1) {
+      console.error(`[paste] Attempt ${i + 1}/${retries} failed, retrying in ${delayMs}ms...`);
+      sleepSync(delayMs);
+    }
+  }
+  return false;
+}
+
+function paste(retries: number, delayMs: number, targetApp?: string): boolean {
+  switch (process.platform) {
+    case 'darwin':
+      return pasteMac(retries, delayMs, targetApp);
+    case 'linux':
+      return pasteLinux(retries, delayMs);
+    case 'win32':
+      return pasteWindows(retries, delayMs);
+    default:
+      console.error(`[paste] Unsupported platform: ${process.platform}`);
+      return false;
+  }
+}
+
+async function main(): Promise<void> {
+  const args = process.argv.slice(2);
+
+  let retries = 3;
+  let delayMs = 500;
+  let targetApp: string | undefined;
+
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i] ?? '';
+    if (arg === '--help' || arg === '-h') {
+      printUsage(0);
+    }
+    if (arg === '--retries' && args[i + 1]) {
+      retries = parseInt(args[++i]!, 10) || 3;
+    } else if (arg === '--delay' && args[i + 1]) {
+      delayMs = parseInt(args[++i]!, 10) || 500;
+    } else if (arg === '--app' && args[i + 1]) {
+      targetApp = args[++i];
+    } else if (arg.startsWith('-')) {
+      console.error(`Unknown option: ${arg}`);
+      printUsage(1);
+    }
+  }
+
+  if (targetApp) {
+    console.log(`[paste] Target app: ${targetApp}`);
+  }
+  console.log(`[paste] Sending paste keystroke (retries=${retries}, delay=${delayMs}ms)...`);
+  const success = paste(retries, delayMs, targetApp);
+
+  if (success) {
+    console.log('[paste] Paste keystroke sent successfully');
+  } else {
+    console.error('[paste] Failed to send paste keystroke');
+    process.exit(1);
+  }
+}
+
+await main();
@@ -141,44 +141,30 @@ class CdpConnection {
  }
 }

+function getScriptDir(): string {
+  return path.dirname(new URL(import.meta.url).pathname);
+}
+
 function copyImageToClipboard(imagePath: string): boolean {
-  const scriptDir = path.dirname(new URL(import.meta.url).pathname);
-  const copyScript = path.join(scriptDir, 'copy-to-clipboard.ts');
+  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 scriptDir = path.dirname(new URL(import.meta.url).pathname);
-  const copyScript = path.join(scriptDir, 'copy-to-clipboard.ts');
+  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 sendRealPasteKeystroke(retries = 3): boolean {
-  if (process.platform !== 'darwin') {
-    console.log('[x-article] Real keystroke only supported on macOS');
-    return false;
+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);
  }
-
-  // Use osascript to send Cmd+V to frontmost application (Chrome)
-  const script = `
-    tell application "System Events"
-      keystroke "v" using command down
-    end tell
-  `;
-
-  for (let i = 0; i < retries; i++) {
-    const result = spawnSync('osascript', ['-e', script], { stdio: 'pipe' });
-    if (result.status === 0) {
-      return true;
-    }
-    // Wait a bit before retry
-    if (i < retries - 1) {
-      Atomics.wait(new Int32Array(new SharedArrayBuffer(4)), 0, 0, 500);
-    }
-  }
-  return false;
+  const result = spawnSync(args[0]!, args.slice(1), { stdio: 'inherit' });
+  return result.status === 0;
 }

 interface ArticleOptions {
@@ -300,11 +286,6 @@ export async function publishArticle(options: ArticleOptions): Promise<void> {
      }, { sessionId });
    };

-    const pasteFromClipboard = async (): Promise<void> => {
-      const modifiers = process.platform === 'darwin' ? 4 : 2; // Meta or Ctrl
-      await pressKey('v', modifiers);
-    };
-
    // Check if we're on the articles list page (has Write button)
    console.log('[x-article] Looking for Write button...');
    const writeButtonFound = await waitForElement('[data-testid="empty_state_button_text"]', 10_000);
@@ -538,7 +519,7 @@ export async function publishArticle(options: ArticleOptions): Promise<void> {
        }, { sessionId });

        // Wait for scroll animation
-        await sleep(300);
+        await sleep(500);

        if (!placeholderFound.result.value) {
          console.warn(`[x-article] Placeholder not found in DOM: ${img.placeholder}`);
@@ -553,25 +534,26 @@ export async function publishArticle(options: ArticleOptions): Promise<void> {
          continue;
        }

-        await sleep(300);
+        // Wait for clipboard to be fully ready
+        await sleep(800);

        // Delete placeholder by pressing Enter (placeholder is already selected)
        console.log(`[x-article] Deleting placeholder with Enter...`);
        await cdp.send('Input.dispatchKeyEvent', { type: 'keyDown', key: 'Enter', code: 'Enter', windowsVirtualKeyCode: 13 }, { sessionId });
        await cdp.send('Input.dispatchKeyEvent', { type: 'keyUp', key: 'Enter', code: 'Enter', windowsVirtualKeyCode: 13 }, { sessionId });
-        await sleep(200);
+        await sleep(300);

-        // Paste image
+        // Paste image using paste script (activates Chrome, sends real keystroke)
        console.log(`[x-article] Pasting image...`);
-        if (sendRealPasteKeystroke()) {
+        if (pasteFromClipboard('Google Chrome', 5, 800)) {
          console.log(`[x-article] Image pasted: ${path.basename(img.localPath)}`);
        } else {
-          console.warn(`[x-article] Failed to paste image`);
+          console.warn(`[x-article] Failed to paste image after retries`);
        }

        // Wait for image to upload
        console.log(`[x-article] Waiting for upload...`);
-        await sleep(4000);
+        await sleep(5000);
      }

      console.log('[x-article] All images processed.');
@@ -633,17 +615,15 @@ export async function publishArticle(options: ArticleOptions): Promise<void> {
      console.log('[x-article] Article published!');
    } else {
      console.log('[x-article] Article composed (draft mode).');
-      console.log('[x-article] Browser will stay open for 60 seconds for review...');
-      await sleep(60_000);
+      console.log('[x-article] Browser remains open for manual review.');
    }

  } finally {
+    // Disconnect CDP but keep browser open
    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 {}
+    // Don't kill Chrome - let user review and close manually
  }
 }

@@ -8,6 +8,26 @@ import process from 'node:process';

 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));
 }
@@ -274,37 +294,46 @@ export async function postToX(options: XBrowserOptions): Promise<void> {

      console.log(`[x-browser] Pasting image: ${imagePath}`);

-      const scriptDir = path.dirname(new URL(import.meta.url).pathname);
-      const copyScript = path.join(scriptDir, 'copy-to-clipboard.ts');
-
-      const result = spawnSync('npx', ['-y', 'bun', copyScript, 'image', imagePath], { stdio: 'inherit' });
-      if (result.status !== 0) {
+      if (!copyImageToClipboard(imagePath)) {
        console.warn(`[x-browser] Failed to copy image to clipboard: ${imagePath}`);
        continue;
      }

+      // Wait for clipboard to be ready
+      await sleep(500);
+
+      // Focus the editor
      await cdp.send('Runtime.evaluate', {
        expression: `document.querySelector('[data-testid="tweetTextarea_0"]')?.focus()`,
      }, { sessionId });
+      await sleep(200);

-      const modifiers = process.platform === 'darwin' ? 4 : 2;
-      await cdp.send('Input.dispatchKeyEvent', {
-        type: 'keyDown',
-        key: 'v',
-        code: 'KeyV',
-        modifiers,
-        windowsVirtualKeyCode: 86,
-      }, { sessionId });
-      await cdp.send('Input.dispatchKeyEvent', {
-        type: 'keyUp',
-        key: 'v',
-        code: 'KeyV',
-        modifiers,
-        windowsVirtualKeyCode: 86,
-      }, { sessionId });
+      // Use paste script (handles platform differences, activates Chrome)
+      console.log('[x-browser] Pasting from clipboard...');
+      const pasteSuccess = pasteFromClipboard('Google Chrome', 5, 500);
+
+      if (!pasteSuccess) {
+        // Fallback to CDP (may not work for images on X)
+        console.log('[x-browser] Paste script failed, trying CDP fallback...');
+        const modifiers = process.platform === 'darwin' ? 4 : 2;
+        await cdp.send('Input.dispatchKeyEvent', {
+          type: 'keyDown',
+          key: 'v',
+          code: 'KeyV',
+          modifiers,
+          windowsVirtualKeyCode: 86,
+        }, { sessionId });
+        await cdp.send('Input.dispatchKeyEvent', {
+          type: 'keyUp',
+          key: 'v',
+          code: 'KeyV',
+          modifiers,
+          windowsVirtualKeyCode: 86,
+        }, { sessionId });
+      }

      console.log('[x-browser] Waiting for image upload...');
-      await sleep(3000);
+      await sleep(4000);
    }

    if (submit) {
@@ -0,0 +1,299 @@
+---
+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".
+---
+
+# Slide Deck Generator
+
+Transform content into professional slide deck with comprehensive outlines and generated slide images.
+
+## Usage
+
+```bash
+# From markdown file
+/baoyu-slide-deck path/to/article.md
+
+# With style preference
+/baoyu-slide-deck path/to/article.md --style corporate
+/baoyu-slide-deck path/to/article.md --style playful
+/baoyu-slide-deck path/to/article.md --style technical
+
+# With audience specification
+/baoyu-slide-deck path/to/article.md --audience beginners
+/baoyu-slide-deck path/to/article.md --audience executives
+
+# With language
+/baoyu-slide-deck path/to/article.md --lang zh
+/baoyu-slide-deck path/to/article.md --lang en
+
+# Outline only (no image generation)
+/baoyu-slide-deck path/to/article.md --outline-only
+
+# Direct content input
+/baoyu-slide-deck
+[paste content]
+```
+
+## Options
+
+| Option | Description |
+|--------|-------------|
+| `--style <name>` | Visual style preset (see Style Gallery) |
+| `--audience <type>` | Target audience level |
+| `--lang <code>` | Output language (en, zh, etc.) |
+| `--slides <number>` | Target slide count (max 20) |
+| `--outline-only` | Generate outline only, skip image generation |
+
+## Style Gallery
+
+| Style | Description |
+|-------|-------------|
+| `editorial` (Default) | Clean, sophisticated, minimalist |
+| `corporate` | Professional, trustworthy, polished |
+| `technical` | Precise, data-driven, analytical |
+| `playful` | Bold, energetic, engaging |
+| `minimal` | Ultra-clean, zen-like, focused |
+| `storytelling` | Narrative-driven, cinematic, immersive |
+| `warm` | Cozy, healing, hand-drawn illustration style |
+| `retro-flat` | Flat vector illustration with retro palette |
+| `notion` | Minimalist hand-drawn line art, intellectual |
+
+Detailed style definitions: `references/styles/<style>.md`
+
+## Auto Style Selection
+
+When no `--style` is specified, analyze content for style signals:
+
+| Content Signals | Selected Style |
+|----------------|----------------|
+| AI, coding, tech, digital, algorithm, data | `technical` |
+| Business, strategy, investment, corporate | `corporate` |
+| Personal story, journey, narrative, emotion | `storytelling` |
+| Simple, zen, focus, essential, one idea | `minimal` |
+| Fun, creative, workshop, educational | `playful` |
+| Research, analysis, thought leadership | `editorial` |
+| Wellness, healing, cozy, self-care, lifestyle, comfort | `warm` |
+| Tutorial, explainer, how-to, beginner, product, guide | `retro-flat` |
+| Knowledge, concept, productivity, SaaS, notion, intellectual | `notion` |
+
+## Audience Presets
+
+| Audience | Approach |
+|----------|----------|
+| `beginners` | Step-by-step, more context, simpler visuals |
+| `intermediate` | Balanced detail, some assumed knowledge |
+| `experts` | Dense information, technical depth, less hand-holding |
+| `executives` | High-level insights, key metrics, strategic focus |
+| `general` | Accessible language, broad appeal, clear takeaways |
+
+## File Management
+
+### With Article Path
+
+```
+path/to/
+├── article.md
+└── slide-deck/
+    ├── outline.md
+    ├── prompts/
+    │   ├── 01-cover.md
+    │   ├── 02-content-1.md
+    │   └── ...
+    ├── 01-cover.png
+    ├── 02-content-1.png
+    └── ...
+```
+
+### Without Article Path
+
+```
+./baoyu-slide-deck-outputs/YYYY-MM-DD/[topic-slug]/
+├── outline.md
+├── prompts/
+│   ├── 01-cover.md
+│   └── ...
+├── 01-cover.png
+└── ...
+```
+
+## Workflow
+
+### Step 1: Analyze Content & Select Style
+
+1. Read source content
+2. If `--style` specified, use that style
+3. Otherwise, analyze content for style signals
+4. Extract key information:
+   - Core narrative and key messages
+   - Important data points and statistics
+   - Logical flow and structure
+   - Target audience signals
+
+### Step 2: Generate Outline
+
+Create outline with `STYLE_INSTRUCTIONS` block and slide specifications.
+
+**Outline Format**:
+
+```markdown
+# Slide Deck Outline: [Topic]
+
+**Source**: [source file or "Direct input"]
+**Style**: [selected style]
+**Audience**: [target audience]
+**Language**: [output language]
+**Slide Count**: N slides
+**Generated**: YYYY-MM-DD HH:mm
+
+---
+
+<STYLE_INSTRUCTIONS>
+Design Aesthetic: [Overall style description]
+Background Color: [Description and Hex Code]
+Primary Font: [Font name for Headlines]
+Secondary Font: [Font name for Body copy]
+Color Palette:
+  Primary Text Color: [Hex Code]
+  Primary Accent Color: [Hex Code]
+Visual Elements: [Lines, shapes, imagery style, etc.]
+</STYLE_INSTRUCTIONS>
+
+---
+
+## Slide 1: [Descriptive Title]
+
+**Position**: Cover
+**Filename**: 01-cover.png
+
+// NARRATIVE GOAL
+[Storytelling purpose within the overall arc]
+
+// KEY CONTENT
+Headline: [Main message - narrative, not "Title: Subtitle" format]
+Sub-headline: [Supporting context]
+Body:
+- [Key point 1 with specific data from source]
+- [Key point 2 with specific data from source]
+
+// VISUAL
+[Detailed description of imagery, charts, graphics, or abstract visuals]
+
+// LAYOUT
+[Composition, hierarchy, spatial arrangement, focus points]
+
+---
+
+## Slide 2: [First Content]
+...
+
+## Slide N: [Back Cover]
+...
+```
+
+**Required Slide Structure**:
+1. **Slide 1**: Cover Slide (poster-style, heroic typography)
+2. **Slides 2-N-1**: Content slides (consistent internal style)
+3. **Slide N**: Back Cover (closing statement, not "Thank You")
+
+### Step 3: Save Outline
+
+Save outline as `outline.md` in target directory.
+
+If `--outline-only` flag is set, stop here.
+
+### Step 4: Create Prompt Files
+
+For each slide, create a style-specific prompt file.
+
+**Prompt Format**:
+
+```markdown
+Slide theme: [slide title]
+Style: [style name]
+Position: [cover/content/back-cover]
+
+Visual composition:
+- Main visual: [style-appropriate description from VISUAL section]
+- Layout: [from LAYOUT section]
+- Decorative elements: [style-specific decorations]
+
+Color scheme:
+- Background: [style background color]
+- Primary text: [style text color]
+- Accent: [style accent color]
+
+Text content:
+- Headline: [headline text]
+- Sub-headline: [sub-headline if any]
+- Body points: [bullet points if any]
+
+Style notes: [specific style characteristics to emphasize]
+```
+
+### Step 5: Generate Images
+
+For each slide, generate using:
+
+```bash
+/baoyu-gemini-web --promptfiles [SKILL_ROOT]/skills/baoyu-slide-deck/prompts/system.md [TARGET_DIR]/prompts/01-cover.md --image [TARGET_DIR]/01-cover.png
+```
+
+Generation flow:
+1. Generate images sequentially
+2. After each image, output progress: "Generated X/N"
+3. On failure, auto-retry once
+4. If retry fails, log reason, continue to next
+
+### Step 6: Completion Report
+
+```
+Slide Deck Generated!
+
+Topic: [topic]
+Style: [style name]
+Audience: [audience]
+Location: [directory path]
+Slides: N total
+
+- 01-cover.png ✓ Cover
+- 02-content-1.png ✓ Content
+- 03-content-2.png ✓ Content
+- ...
+- 0N-back-cover.png ✓ Back Cover
+
+Outline: outline.md
+
+[If any failures]
+Failed:
+- 0X-slide-name.png: [failure reason]
+```
+
+## Notes
+
+### Design Philosophy
+- Deck is designed for **reading and sharing**, not live presentation
+- Structure should be self-explanatory without a presenter
+- Include enough context for visuals to be understood standalone
+- Err on the side of audience having **more expertise** than expected
+
+### Content Rules
+- Maximum 20 slides per deck
+- Every data point must trace to source material
+- All details in prompts - image generator has no access to source
+
+### Style Rules
+- Avoid AI-generated clichés ("It wasn't just X, it was Y")
+- Use narrative headlines, not "Title: Subtitle" format
+- Cover and Back Cover should be visually distinct (poster-style)
+- Back Cover should be meaningful closure, not "Thank You" or "Questions?"
+
+### Prohibited
+- Never include photorealistic images of prominent individuals
+- Never include placeholder slides for author name, date, etc.
+
+### Image Generation
+- Image generation typically takes 10-30 seconds per slide
+- Auto-retry once on generation failure
+- Use cartoon alternatives for sensitive public figures
+- Output language matches content language
+- Maintain style consistency across all slides
@@ -0,0 +1,29 @@
+# corporate
+
+Professional, trustworthy, polished
+
+## Design Aesthetic
+
+Clean lines, structured layouts, business-appropriate
+
+## Color Palette
+
+- Background: Clean white (#FFFFFF) with navy accents
+- Primary Text: Navy (#1E3A5F)
+- Accent: Gold (#C9A227)
+
+## Typography
+
+- Primary Font: Inter (headlines)
+- Secondary Font: Source Sans Pro (body)
+
+## Visual Elements
+
+- Clean charts
+- Professional icons
+- Structured grids
+- Subtle shadows
+
+## Best For
+
+Business presentations, investor decks, reports
@@ -0,0 +1,29 @@
+# editorial
+
+Clean, sophisticated, minimalist
+
+## Design Aesthetic
+
+High-end journal, architectural blueprints
+
+## Color Palette
+
+- Background: Subtle textured off-white (#F8F7F5)
+- Primary Text: Dark slate grey (#2F3542)
+- Accent: Intelligent blue (#007AFF)
+
+## Typography
+
+- Primary Font: Neue Haas Grotesk Display Pro (bold headlines)
+- Secondary Font: Tiempos Text (body copy, annotations)
+
+## Visual Elements
+
+- Thin precise line work
+- Schematic diagrams
+- Clean vectors
+- Spacious layouts
+
+## Best For
+
+Thought leadership, research presentations
@@ -0,0 +1,29 @@
+# minimal
+
+Ultra-clean, zen-like, focused
+
+## Design Aesthetic
+
+Maximum whitespace, single focal points, elegant typography
+
+## Color Palette
+
+- Background: Pure white (#FFFFFF)
+- Primary Text: Pure black (#000000)
+- Accent: Single accent (content-derived)
+
+## Typography
+
+- Primary Font: Helvetica Neue (headlines)
+- Secondary Font: Garamond (body)
+
+## Visual Elements
+
+- Maximum whitespace
+- Single focal points
+- Hairline rules
+- Elegant typography
+
+## Best For
+
+Keynotes, philosophical content, product launches
@@ -0,0 +1,38 @@
+# notion
+
+Minimalist hand-drawn line art, intellectual
+
+## Design Aesthetic
+
+Simple line doodles with hand-drawn wobble, geometric shapes, maximum whitespace, SaaS product feel
+
+## Color Palette
+
+- Background: Pure white (#FFFFFF), off-white (#FAFAFA)
+- Primary Text: Black (#1A1A1A), dark gray (#4A4A4A)
+- Accent: Pastel blue (#A8D4F0), Pastel yellow (#F9E79F), Pastel pink (#FADBD8)
+
+## Typography
+
+- Primary Font: Clean hand-drawn lettering, simple sans-serif
+- Secondary Font: Simple sans-serif labels
+
+## Visual Elements
+
+- Simple line doodles with hand-drawn wobble effect
+- Geometric shapes
+- Stick figures
+- Maximum whitespace
+- Single-weight ink lines
+
+## Style Rules
+
+- Single color lines (black/dark gray)
+- 1-2 pastel accents only
+- NO complex gradients
+- NO heavy shadows
+- Imperfect hand-drawn feel
+
+## Best For
+
+Knowledge sharing, concept explanations, productivity content, SaaS presentations
@@ -0,0 +1,30 @@
+# playful
+
+Bold, energetic, engaging
+
+## Design Aesthetic
+
+Dynamic shapes, vibrant colors, creative layouts
+
+## Color Palette
+
+- Background: Warm white (#FFFDF7)
+- Primary Text: Deep purple (#4A1D96)
+- Accent: Vibrant coral (#FF6B6B)
+
+## Typography
+
+- Primary Font: Poppins (headlines)
+- Secondary Font: Nunito (body)
+
+## Visual Elements
+
+- Rounded shapes
+- Gradients
+- Illustrations
+- Dynamic compositions
+- Bright pops
+
+## Best For
+
+Creative pitches, educational content, workshops
@@ -0,0 +1,43 @@
+# retro-flat
+
+Flat vector illustration with retro palette
+
+## Design Aesthetic
+
+Flat vector with clear black outlines (monoline), geometric simplification, toy-model cuteness, NO gradients
+
+## Color Palette
+
+- Background: Off-white (#F5F0E6), soft cream
+- Primary Text: Black (#000000) (clean outlines)
+- Accent: Retro muted palette
+  - Dusty pink (#E8B4B8)
+  - Sage green (#A8C686)
+  - Mustard yellow (#E8B84A)
+  - Muted blue (#7BA7BC)
+
+## Typography
+
+- Primary Font: Bold geometric sans-serif with black outline
+- Secondary Font: Clean sans-serif
+
+## Visual Elements
+
+- Clear black monoline outlines (uniform width)
+- Flat color fills with NO gradients
+- Geometric simplified shapes
+- Toy-like proportions
+- Minimal shadows
+- Vintage badge style
+- Halftone dots (optional)
+
+## Style Rules
+
+- MUST use clear black outlines on all elements
+- NO 3D effects
+- NO gradients
+- Simple flat color blocks only
+
+## Best For
+
+Tutorials, explainers, product introductions, educational content
@@ -0,0 +1,29 @@
+# storytelling
+
+Narrative-driven, cinematic, immersive
+
+## Design Aesthetic
+
+Full-bleed imagery, dramatic typography, chapter-like flow
+
+## Color Palette
+
+- Background: Rich charcoal (#2D2D2D) or full-bleed imagery
+- Primary Text: Warm white (#FAF9F6)
+- Accent: Warm gold (#D4AF37)
+
+## Typography
+
+- Primary Font: Playfair Display (headlines)
+- Secondary Font: Lora (body)
+
+## Visual Elements
+
+- Full-bleed photos
+- Dramatic typography
+- Chapter markers
+- Emotional imagery
+
+## Best For
+
+Case studies, journey narratives, brand stories
@@ -0,0 +1,29 @@
+# technical
+
+Precise, data-driven, analytical
+
+## Design Aesthetic
+
+Blueprint style, schematic diagrams, grid layouts
+
+## Color Palette
+
+- Background: Dark charcoal (#1A1A2E)
+- Primary Text: Light gray (#E8E8E8)
+- Accent: Cyan (#00D4FF)
+
+## Typography
+
+- Primary Font: JetBrains Mono (headlines)
+- Secondary Font: IBM Plex Sans (body)
+
+## Visual Elements
+
+- Grid overlays
+- Circuit patterns
+- Data visualizations
+- Monospace code blocks
+
+## Best For
+
+Technical documentation, engineering presentations
@@ -0,0 +1,32 @@
+# warm
+
+Cozy, healing, hand-drawn illustration style
+
+## Design Aesthetic
+
+Soft hand-drawn illustrations, cozy and healing atmosphere, gentle curves, watercolor textures
+
+## Color Palette
+
+- Background: Cream gradient (#FFF8E7 → #FFE4C4)
+- Primary Text: Warm brown (#5D4037)
+- Accent: Soft coral (#FF8A80), Peachy pink (#FFAB91)
+
+## Typography
+
+- Primary Font: Rounded hand-drawn style lettering
+- Secondary Font: Soft serif hand lettering
+
+## Visual Elements
+
+- Soft watercolor textures
+- Gentle curves
+- Cozy illustrations
+- Warm lighting
+- Hearts and stars
+- Plant motifs
+- Cute characters
+
+## Best For
+
+Personal growth, wellness, emotional content, lifestyle topics
@@ -0,0 +1,317 @@
+---
+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".
+---
+
+# Xiaohongshu Infographic Series Generator
+
+Break down complex content into eye-catching infographic series for Xiaohongshu with multiple style options.
+
+## Usage
+
+```bash
+# Auto-select style and layout based on content
+/baoyu-xhs-images posts/ai-future/article.md
+
+# Specify style
+/baoyu-xhs-images posts/ai-future/article.md --style notion
+
+# Specify layout
+/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
+
+# Direct content input
+/baoyu-xhs-images
+[paste content]
+
+# Direct input with options
+/baoyu-xhs-images --style bold --layout comparison
+[paste content]
+```
+
+## Options
+
+| Option | Description |
+|--------|-------------|
+| `--style <name>` | Visual style (see Style Gallery) |
+| `--layout <name>` | Information layout (see Layout Gallery) |
+
+## Two Dimensions
+
+| Dimension | Controls | Options |
+|-----------|----------|---------|
+| **Style** | Visual aesthetics: colors, lines, decorations | cute, fresh, tech, warm, bold, minimal, retro, pop, notion |
+| **Layout** | Information structure: density, arrangement | sparse, balanced, dense, list, comparison, flow |
+
+Style × Layout can be freely combined. Example: `--style notion --layout dense` creates an intellectual-looking knowledge card with high information density.
+
+## Style Gallery
+
+| Style | Description |
+|-------|-------------|
+| `cute` (Default) | Sweet, adorable, girly - classic Xiaohongshu aesthetic |
+| `fresh` | Clean, refreshing, natural |
+| `tech` | Modern, smart, digital |
+| `warm` | Cozy, friendly, approachable |
+| `bold` | High impact, attention-grabbing |
+| `minimal` | Ultra-clean, sophisticated |
+| `retro` | Vintage, nostalgic, trendy |
+| `pop` | Vibrant, energetic, eye-catching |
+| `notion` | Minimalist hand-drawn line art, intellectual |
+
+Detailed style definitions: `references/styles/<style>.md`
+
+## Layout Gallery
+
+| Layout | Description |
+|--------|-------------|
+| `sparse` (Default) | Minimal information, maximum impact (1-2 points) |
+| `balanced` | Standard content layout (3-4 points) |
+| `dense` | High information density, knowledge card style (5-8 points) |
+| `list` | Enumeration and ranking format (4-7 items) |
+| `comparison` | Side-by-side contrast layout |
+| `flow` | Process and timeline layout (3-6 steps) |
+
+Detailed layout definitions: `references/layouts/<layout>.md`
+
+## Auto Style Selection
+
+When no `--style` is specified, analyze content to select:
+
+| Content Signals | Selected Style |
+|----------------|----------------|
+| Beauty, fashion, cute, girl, pink | `cute` |
+| Health, nature, clean, fresh, organic | `fresh` |
+| Tech, AI, code, digital, app, tool | `tech` |
+| Life, story, emotion, feeling, warm | `warm` |
+| Warning, important, must, critical | `bold` |
+| Professional, business, elegant, simple | `minimal` |
+| Classic, vintage, old, traditional | `retro` |
+| Fun, exciting, wow, amazing | `pop` |
+| Knowledge, concept, productivity, SaaS, notion | `notion` |
+
+## Auto Layout Selection
+
+When no `--layout` is specified, analyze content structure to select:
+
+| Content Signals | Selected Layout |
+|----------------|-----------------|
+| Single quote, one key point, cover | `sparse` |
+| 3-4 points, explanation, tutorial | `balanced` |
+| 5+ points, summary, cheat sheet, 干货 | `dense` |
+| Numbered items, top N, checklist, steps | `list` |
+| vs, compare, before/after, pros/cons | `comparison` |
+| Process, flow, timeline, steps with order | `flow` |
+
+**Layout by Position**:
+| Position | Recommended Layout |
+|----------|-------------------|
+| Cover | `sparse` |
+| Content | `balanced` or content-appropriate |
+| Ending | `sparse` or `balanced` |
+
+## File Management
+
+### With Article Path
+
+Save to `xhs-images/` subdirectory in the same folder as the article:
+
+```
+posts/ai-future/
+├── article.md
+└── xhs-images/
+    ├── outline.md
+    ├── prompts/
+    │   ├── 01-cover.md
+    │   ├── 02-content-1.md
+    │   └── ...
+    ├── 01-cover.png
+    ├── 02-content-1.png
+    └── 03-ending.png
+```
+
+### Without Article Path
+
+Save to `xhs-outputs/YYYY-MM-DD/[topic-slug]/`:
+
+```
+xhs-outputs/
+└── 2026-01-13/
+    └── ai-agent-guide/
+        ├── outline.md
+        ├── prompts/
+        │   ├── 01-cover.md
+        │   └── ...
+        ├── 01-cover.png
+        └── 02-ending.png
+```
+
+## Workflow
+
+### Step 1: Analyze Content & Select Style/Layout
+
+1. Read content
+2. If `--style` specified, use that style; otherwise auto-select
+3. If `--layout` specified, use that layout; otherwise auto-select per image
+4. Determine image count based on content complexity:
+
+| Content Type | Image Count |
+|-------------|-------------|
+| Simple opinion / single topic | 2-3 |
+| Medium complexity / tutorial | 4-6 |
+| Deep dive / multi-dimensional | 7-10 |
+
+**Note**: Layout can vary per image in a series. Cover typically uses `sparse`, content pages use `balanced`/`dense`/`list` as appropriate.
+
+### Step 2: Generate Outline
+
+Plan for each image with style and layout specifications:
+
+```markdown
+# Xiaohongshu Infographic Series Outline
+
+**Topic**: [topic description]
+**Style**: [selected style]
+**Default Layout**: [selected layout or "varies"]
+**Image Count**: N
+**Generated**: YYYY-MM-DD HH:mm
+
+---
+
+## Image 1 of N
+
+**Position**: Cover
+**Layout**: sparse
+**Core Message**: [one-liner]
+**Filename**: 01-cover.png
+
+**Text Content**:
+- Title: xxx
+- Subtitle: xxx
+
+**Visual Concept**: [style + layout appropriate description]
+
+---
+
+## Image 2 of N
+
+**Position**: Content
+**Layout**: [balanced/dense/list/comparison/flow]
+**Core Message**: [one-liner]
+**Filename**: 02-xxx.png
+
+**Text Content**:
+- Title: xxx
+- Points: [list based on layout density]
+
+**Visual Concept**: [description matching style + layout]
+
+---
+...
+```
+
+### Step 3: Save Outline
+
+Save outline as `outline.md`.
+
+### Step 4: Generate Images One by One
+
+For each image, create a prompt file with style and layout specifications.
+
+**Prompt Format**:
+
+```markdown
+Infographic theme: [topic]
+Style: [style name]
+Layout: [layout name]
+Position: [cover/content/ending]
+
+Visual composition:
+- Main visual: [style-appropriate description]
+- Arrangement: [layout-specific structure]
+- Decorative elements: [style-specific decorations]
+
+Color scheme:
+- Primary: [style primary color]
+- Background: [style background color]
+- Accent: [style accent color]
+
+Text content:
+- Title: 「xxx」(large, prominent)
+- Key points: [based on layout density]
+
+Layout instructions: [layout-specific guidance]
+Style notes: [style-specific characteristics]
+```
+
+**Layout-Specific Instructions**:
+
+| Layout | Arrangement Instructions |
+|--------|-------------------------|
+| `sparse` | Single focal point centered, 1-2 text elements, maximum breathing room |
+| `balanced` | Title at top, 3-4 points in clear sections, moderate spacing |
+| `dense` | Grid or multi-section layout, 5-8 points, compact but organized |
+| `list` | Vertical numbered/bulleted list, consistent item spacing, clear hierarchy |
+| `comparison` | Two-column split, clear divider, mirrored structure left/right |
+| `flow` | Horizontal or vertical flow with arrows, connected nodes/steps |
+
+**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. Confirm generation success
+3. Report progress: "Generated X/N"
+4. Continue to next
+
+### Step 5: Completion Report
+
+```
+Xiaohongshu Infographic Series Complete!
+
+Topic: [topic]
+Style: [style name]
+Layout: [layout name or "varies"]
+Location: [directory path]
+Images: N total
+
+- 01-cover.png ✓ Cover (sparse)
+- 02-content-1.png ✓ Content (balanced)
+- 03-content-2.png ✓ Content (dense)
+- 04-ending.png ✓ Ending (sparse)
+
+Outline: outline.md
+```
+
+## Content Breakdown Principles
+
+1. **Cover (Image 1)**: Strong visual impact, core title, attention hook → `sparse` layout
+2. **Content (Middle)**: Core points per image, density varies by content → `balanced`/`dense`/`list`/`comparison`/`flow`
+3. **Ending (Last)**: Summary / call-to-action / memorable quote → `sparse` or `balanced`
+
+**Style × Layout Matrix** (recommended combinations):
+
+| | sparse | balanced | dense | list | comparison | flow |
+|---|:---:|:---:|:---:|:---:|:---:|:---:|
+| cute | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✓ |
+| fresh | ✓✓ | ✓✓ | ✓ | ✓ | ✓ | ✓✓ |
+| tech | ✓ | ✓✓ | ✓✓ | ✓✓ | ✓✓ | ✓✓ |
+| warm | ✓✓ | ✓✓ | ✓ | ✓ | ✓✓ | ✓ |
+| bold | ✓✓ | ✓ | ✓ | ✓✓ | ✓✓ | ✓ |
+| minimal | ✓✓ | ✓✓ | ✓✓ | ✓ | ✓ | ✓ |
+| retro | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✓ |
+| pop | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓ |
+| notion | ✓✓ | ✓✓ | ✓✓ | ✓✓ | ✓✓ | ✓✓ |
+
+✓✓ = highly recommended, ✓ = works well
+
+## Notes
+
+- Image generation typically takes 10-30 seconds per image
+- Auto-retry once on generation failure
+- Use cartoon alternatives for sensitive public figures
+- Output language matches input content language
+- Maintain selected style consistency across all images in series
@@ -0,0 +1,30 @@
+# 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
@@ -0,0 +1,31 @@
+# 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)
@@ -0,0 +1,31 @@
+# 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)
@@ -0,0 +1,30 @@
+# 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)
@@ -0,0 +1,31 @@
+# list
+
+Enumeration and ranking format
+
+## Information Density
+
+- 4-7 items
+- Whitespace: 30-40% of canvas
+
+## Structure
+
+- Numbered or bulleted vertical list
+- Consistent item format
+
+## Text Elements
+
+- Title + numbered/bulleted items
+- Consistent format per item
+
+## Visual Balance
+
+- Left-aligned list
+- Clear number/bullet hierarchy
+
+## Best For
+
+Top N lists, checklists, step-by-step guides, rankings
+
+## Best Style Pairings
+
+All styles, especially cute (checklist), bold (rankings)
@@ -0,0 +1,31 @@
+# sparse
+
+Minimal information, maximum impact
+
+## Information Density
+
+- 1-2 key points per image
+- Whitespace: 60-70% of canvas
+
+## Structure
+
+- Single focal point centered
+- One core message
+- Single centered focal point
+
+## Text Elements
+
+- Title only, or title + one subtitle/tagline
+
+## Visual Balance
+
+- Centered, symmetrical
+- Breathing room on all sides
+
+## Best For
+
+Covers, quotes, impactful statements, emotional content
+
+## Best Style Pairings
+
+Any style, especially effective with bold, minimal, notion
@@ -0,0 +1,23 @@
+# bold
+
+High impact, attention-grabbing
+
+## Color Palette
+
+- Primary: Vibrant red (#E53E3E), orange (#DD6B20), yellow (#F6E05E)
+- Background: Deep black (#000000), dark charcoal
+- Accents: White, neon yellow
+
+## Visual Elements
+
+- Exclamation marks, arrows, warning icons
+- Strong shapes, high contrast elements
+- Dramatic compositions
+
+## Typography
+
+- Bold, impactful hand lettering with shadows
+
+## Best For
+
+Important tips, warnings, must-know content
@@ -0,0 +1,23 @@
+# cute
+
+Sweet, adorable, girly - classic Xiaohongshu aesthetic
+
+## Color Palette
+
+- Primary: Pink (#FED7E2), peach (#FEEBC8), mint (#C6F6D5), lavender (#E9D8FD)
+- Background: Cream (#FFFAF0), soft pink (#FFF5F7)
+- Accents: Hot pink, coral
+
+## Visual Elements
+
+- Hearts, stars, sparkles, cute faces
+- Ribbon decorations, sticker-style
+- Cute stickers, emoji icons
+
+## Typography
+
+- Rounded, bubbly hand lettering
+
+## Best For
+
+Lifestyle, beauty, fashion, daily tips
@@ -0,0 +1,23 @@
+# fresh
+
+Clean, refreshing, natural
+
+## Color Palette
+
+- Primary: Mint green (#9AE6B4), sky blue (#90CDF4), light yellow (#FAF089)
+- Background: Pure white (#FFFFFF), soft mint (#F0FFF4)
+- Accents: Leaf green, water blue
+
+## Visual Elements
+
+- Plant leaves, clouds, water drops
+- Simple geometric shapes
+- Breathing room, open composition
+
+## Typography
+
+- Clean, light hand lettering with breathing room
+
+## Best For
+
+Health, wellness, minimalist lifestyle, self-care
@@ -0,0 +1,23 @@
+# minimal
+
+Ultra-clean, sophisticated
+
+## Color Palette
+
+- Primary: Black (#000000), white (#FFFFFF)
+- Background: Off-white (#FAFAFA), pure white
+- Accents: Single color (content-derived - blue, green, or coral)
+
+## Visual Elements
+
+- Single focal point, thin lines
+- Maximum whitespace
+- Simple, clean decorations
+
+## Typography
+
+- Clean, simple hand lettering
+
+## Best For
+
+Professional content, serious topics, elegant presentations
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Jim Liu 宝玉	c6d96d4134	add new skill baoyu-comic	2026-01-16 01:12:21 -06:00
Jim Liu 宝玉	e174d642df	feat: add quick install instructions to README files	2026-01-15 22:06:38 -06:00
Jim Liu 宝玉	db7eaa2847	feat: update version number to 0.4.2 and enhance description for baoyu-gemini-web skill	2026-01-15 17:05:58 -06:00
Jim Liu 宝玉	e3d2f5d03f	Add clipboard paste functionality and documentation for X Articles and regular posts - Implemented `paste-from-clipboard.ts` script to send real paste keystrokes across macOS, Linux, and Windows. - Created detailed guides for publishing articles to X Articles and posting regular content, including usage examples and troubleshooting tips. - Added support for Markdown formatting and image handling in X Articles. - Documented manual workflows for image pasting and browser interactions using Playwright MCP.	2026-01-15 15:38:03 -06:00
Jim Liu 宝玉	da920bb830	feat: add baoyu- prefix	2026-01-15 14:18:56 -06:00