# baoyu-skills English | [中文](./README.zh.md) Skills shared by Baoyu for improving daily work efficiency with AI Agents (Claude Code, Codex, etc.). ## Prerequisites - Node.js environment installed - Ability to run `npx bun` commands ## Installation > **Tip**: This repository contains 20+ skills. Install only the ones you actually need — bulk-installing every skill adds unnecessary context overhead for your AI agent on every run. ### Quick Install (Recommended) ```bash npx skills add jimliu/baoyu-skills ``` ### Codex Project-Level Install If you only need a subset of skills in one project, you do not need to install the full plugin. Codex scans `.agents/skills` inside a project, so copy or symlink each needed skill as a full directory: ```text /.agents/skills/baoyu-cover-image/SKILL.md /.agents/skills/baoyu-article-illustrator/SKILL.md /.agents/skills/baoyu-post-to-wechat/SKILL.md ``` For a WeChat Official Account article workflow, the usual minimal set is: - `baoyu-cover-image` - `baoyu-article-illustrator` - `baoyu-post-to-wechat` You do not need to install `baoyu-markdown-to-html` separately. `baoyu-post-to-wechat` already includes the Markdown to WeChat-ready HTML conversion flow. Install `baoyu-format-markdown` only if you need to first turn raw text or drafts into structured Markdown articles with titles, summaries, headings, bold text, lists, and similar formatting. Place WeChat API credentials according to the scope you want: - User-level: `~/.baoyu-skills/.env` - Project-level: `/.baoyu-skills/.env` Project-level `.env` files are useful when credentials should apply only to the current project. Do not commit them to Git. ### Publish to ClawHub / OpenClaw This repository now supports publishing each `skills/baoyu-*` directory as an individual ClawHub skill. ```bash # Preview what would be published ./scripts/sync-clawhub.sh --dry-run # Publish all changed skills from ./skills ./scripts/sync-clawhub.sh --all ``` ClawHub installs skills individually, not as one marketplace bundle. After publishing, users can install specific skills such as: ```bash clawhub install baoyu-image-gen clawhub install baoyu-markdown-to-html ``` Publishing to ClawHub releases the published skill under `MIT-0`, per ClawHub's registry rules. ### Register as Plugin Marketplace Run the following command in the Agent: ```bash /plugin marketplace add JimLiu/baoyu-skills ``` ### Install Skills **Option 1: Via Browse UI** 1. Select **Browse and install plugins** 2. Select **baoyu-skills** 3. Select the **baoyu-skills** plugin 4. Select **Install now** **Option 2: Direct Install** ```bash # Install the marketplace's single plugin /plugin install baoyu-skills@baoyu-skills ``` **Option 3: Ask the Agent** Simply tell the Agent: > Please install Skills from github.com/JimLiu/baoyu-skills ### Available Plugin The marketplace now exposes a single plugin so each skill is registered exactly once. | Plugin | Description | Includes | |--------|-------------|----------| | **baoyu-skills** | Content generation, AI backends, and utility tools for daily work efficiency | All skills in this repository, organized below as Content Skills, AI Generation Skills, and Utility Skills | ## Update Skills To update skills to the latest version: 1. Run `/plugin` in the Agent 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. If you want a design-focused Agent Skill, check out [JimLiu/baoyu-design](https://github.com/JimLiu/baoyu-design). It is a separate project that runs Claude Design locally in Cursor, Claude Code, Codex, Claude Desktop, or any file-capable coding agent, producing polished UI mockups, interactive prototypes, wireframes, landing pages, dashboards, mobile apps, and slide decks as self-contained HTML.

```bash npx skills add JimLiu/baoyu-design ``` ### Content Skills Content generation and publishing skills. #### baoyu-xhs-images Xiaohongshu image card series generator. Breaks down content into 1-10 cartoon-style image cards with **Style × Layout** system and optional palette override. ```bash # Auto-select style and layout /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 notion --layout list # Override palette /baoyu-xhs-images posts/ai-future/article.md --style notion --palette macaron # Direct content input /baoyu-xhs-images 今日星座运势 # Non-interactive (skip all confirmations, for scheduled tasks) /baoyu-xhs-images posts/ai-future/article.md --yes /baoyu-xhs-images posts/ai-future/article.md --yes --preset knowledge-card ``` **Styles** (visual aesthetics): `cute` (default), `fresh`, `warm`, `bold`, `minimal`, `retro`, `pop`, `notion`, `chalkboard`, `study-notes`, `screen-print`, `sketch-notes` **Palettes** (optional color override): `macaron`, `warm`, `neon` **Style Previews**: | | | | |:---:|:---:|:---:| | ![cute](./screenshots/xhs-images-styles/cute.webp) | ![fresh](./screenshots/xhs-images-styles/fresh.webp) | ![warm](./screenshots/xhs-images-styles/warm.webp) | | cute | fresh | warm | | ![bold](./screenshots/xhs-images-styles/bold.webp) | ![minimal](./screenshots/xhs-images-styles/minimal.webp) | ![retro](./screenshots/xhs-images-styles/retro.webp) | | bold | minimal | retro | | ![pop](./screenshots/xhs-images-styles/pop.webp) | ![notion](./screenshots/xhs-images-styles/notion.webp) | ![chalkboard](./screenshots/xhs-images-styles/chalkboard.webp) | | pop | notion | chalkboard | **Layouts** (information density): | Layout | Density | Best for | |--------|---------|----------| | `sparse` | 1-2 pts | Covers, quotes | | `balanced` | 3-4 pts | Regular content | | `dense` | 5-8 pts | Knowledge cards, cheat sheets | | `list` | 4-7 items | Checklists, rankings | | `comparison` | 2 sides | Before/after, pros/cons | | `flow` | 3-6 steps | Processes, timelines | **Layout Previews**: | | | | |:---:|:---:|:---:| | ![sparse](./screenshots/xhs-images-layouts/sparse.webp) | ![balanced](./screenshots/xhs-images-layouts/balanced.webp) | ![dense](./screenshots/xhs-images-layouts/dense.webp) | | sparse | balanced | dense | | ![list](./screenshots/xhs-images-layouts/list.webp) | ![comparison](./screenshots/xhs-images-layouts/comparison.webp) | ![flow](./screenshots/xhs-images-layouts/flow.webp) | | list | comparison | flow | #### baoyu-infographic Generate professional infographics with 21 layout types and 21 visual styles. Analyzes content, recommends layout×style combinations, and generates publication-ready infographics. ```bash # Auto-recommend combinations based on content /baoyu-infographic path/to/content.md # Specify layout /baoyu-infographic path/to/content.md --layout pyramid # Specify style (default: craft-handmade) /baoyu-infographic path/to/content.md --style technical-schematic # Specify both /baoyu-infographic path/to/content.md --layout funnel --style corporate-memphis # With aspect ratio (named preset or custom W:H) /baoyu-infographic path/to/content.md --aspect portrait /baoyu-infographic path/to/content.md --aspect 3:4 ``` **Options**: | Option | Description | |--------|-------------| | `--layout ` | Information layout (20 options) | | `--style ` | Visual style (17 options, default: craft-handmade) | | `--aspect ` | Named: landscape (16:9), portrait (9:16), square (1:1). Custom: any W:H ratio (e.g., 3:4, 4:3, 2.35:1) | | `--lang

` | Output language (en, zh, ja, etc.) |

**Layouts** (information structure):

| Layout | Best For |
|--------|----------|
| `bridge` | Problem-solution, gap-crossing |
| `circular-flow` | Cycles, recurring processes |
| `comparison-table` | Multi-factor comparisons |
| `do-dont` | Correct vs incorrect practices |
| `equation` | Formula breakdown, input-output |
| `feature-list` | Product features, bullet points |
| `fishbone` | Root cause analysis |
| `funnel` | Conversion processes, filtering |
| `grid-cards` | Multiple topics, overview |
| `iceberg` | Surface vs hidden aspects |
| `journey-path` | Customer journey, milestones |
| `layers-stack` | Technology stack, layers |
| `mind-map` | Brainstorming, idea mapping |
| `nested-circles` | Levels of influence, scope |
| `priority-quadrants` | Eisenhower matrix, 2x2 |
| `pyramid` | Hierarchy, Maslow's needs |
| `scale-balance` | Pros vs cons, weighing |
| `timeline-horizontal` | History, chronological events |
| `tree-hierarchy` | Org charts, taxonomy |
| `venn` | Overlapping concepts |

**Layout Previews**:

| | | |
|:---:|:---:|:---:|
| ![bridge](./screenshots/infographic-layouts/bridge.webp) | ![circular-flow](./screenshots/infographic-layouts/circular-flow.webp) | ![comparison-table](./screenshots/infographic-layouts/comparison-table.webp) |
| bridge | circular-flow | comparison-table |
| ![do-dont](./screenshots/infographic-layouts/do-dont.webp) | ![equation](./screenshots/infographic-layouts/equation.webp) | ![feature-list](./screenshots/infographic-layouts/feature-list.webp) |
| do-dont | equation | feature-list |
| ![fishbone](./screenshots/infographic-layouts/fishbone.webp) | ![funnel](./screenshots/infographic-layouts/funnel.webp) | ![grid-cards](./screenshots/infographic-layouts/grid-cards.webp) |
| fishbone | funnel | grid-cards |
| ![iceberg](./screenshots/infographic-layouts/iceberg.webp) | ![journey-path](./screenshots/infographic-layouts/journey-path.webp) | ![layers-stack](./screenshots/infographic-layouts/layers-stack.webp) |
| iceberg | journey-path | layers-stack |
| ![mind-map](./screenshots/infographic-layouts/mind-map.webp) | ![nested-circles](./screenshots/infographic-layouts/nested-circles.webp) | ![priority-quadrants](./screenshots/infographic-layouts/priority-quadrants.webp) |
| mind-map | nested-circles | priority-quadrants |
| ![pyramid](./screenshots/infographic-layouts/pyramid.webp) | ![scale-balance](./screenshots/infographic-layouts/scale-balance.webp) | ![timeline-horizontal](./screenshots/infographic-layouts/timeline-horizontal.webp) |
| pyramid | scale-balance | timeline-horizontal |
| ![tree-hierarchy](./screenshots/infographic-layouts/tree-hierarchy.webp) | ![venn](./screenshots/infographic-layouts/venn.webp) | |
| tree-hierarchy | venn | |

**Styles** (visual aesthetics):

| Style | Description |
|-------|-------------|
| `craft-handmade` (Default) | Hand-drawn illustration, paper craft aesthetic |
| `claymation` | 3D clay figures, playful stop-motion |
| `kawaii` | Japanese cute, big eyes, pastel colors |
| `storybook-watercolor` | Soft painted illustrations, whimsical |
| `chalkboard` | Colorful chalk on black board |
| `cyberpunk-neon` | Neon glow on dark, futuristic |
| `bold-graphic` | Comic style, halftone dots, high contrast |
| `aged-academia` | Vintage science, sepia sketches |
| `corporate-memphis` | Flat vector people, vibrant fills |
| `technical-schematic` | Blueprint, isometric 3D, engineering |
| `origami` | Folded paper forms, geometric |
| `pixel-art` | Retro 8-bit, nostalgic gaming |
| `ui-wireframe` | Grayscale boxes, interface mockup |
| `subway-map` | Transit diagram, colored lines |
| `ikea-manual` | Minimal line art, assembly style |
| `knolling` | Organized flat-lay, top-down |
| `lego-brick` | Toy brick construction, playful |

**Style Previews**:

| | | |
|:---:|:---:|:---:|
| ![craft-handmade](./screenshots/infographic-styles/craft-handmade.webp) | ![claymation](./screenshots/infographic-styles/claymation.webp) | ![kawaii](./screenshots/infographic-styles/kawaii.webp) |
| craft-handmade | claymation | kawaii |
| ![storybook-watercolor](./screenshots/infographic-styles/storybook-watercolor.webp) | ![chalkboard](./screenshots/infographic-styles/chalkboard.webp) | ![cyberpunk-neon](./screenshots/infographic-styles/cyberpunk-neon.webp) |
| storybook-watercolor | chalkboard | cyberpunk-neon |
| ![bold-graphic](./screenshots/infographic-styles/bold-graphic.webp) | ![aged-academia](./screenshots/infographic-styles/aged-academia.webp) | ![corporate-memphis](./screenshots/infographic-styles/corporate-memphis.webp) |
| bold-graphic | aged-academia | corporate-memphis |
| ![technical-schematic](./screenshots/infographic-styles/technical-schematic.webp) | ![origami](./screenshots/infographic-styles/origami.webp) | ![pixel-art](./screenshots/infographic-styles/pixel-art.webp) |
| technical-schematic | origami | pixel-art |
| ![ui-wireframe](./screenshots/infographic-styles/ui-wireframe.webp) | ![subway-map](./screenshots/infographic-styles/subway-map.webp) | ![ikea-manual](./screenshots/infographic-styles/ikea-manual.webp) |
| ui-wireframe | subway-map | ikea-manual |
| ![knolling](./screenshots/infographic-styles/knolling.webp) | ![lego-brick](./screenshots/infographic-styles/lego-brick.webp) | |
| knolling | lego-brick | |

#### baoyu-diagram

Generate publication-ready SVG diagrams from source material — flowcharts, sequence/protocol diagrams, structural/architecture diagrams, and illustrative intuition diagrams. Analyzes input material to recommend diagram type(s) and splitting strategy, confirms the plan once, then generates all diagrams. Claude writes real SVG code directly following a cohesive design system. Output is self-contained `.svg` files with embedded styles and auto dark-mode.

```bash
# Topic string — skill analyzes and proposes a plan
/baoyu-diagram "how JWT authentication works"
/baoyu-diagram "Kubernetes architecture" --type structural
/baoyu-diagram "OAuth 2.0 flow"          --type sequence

# File path — skill reads, analyzes, and proposes a plan
/baoyu-diagram path/to/article.md

# Language and output path
/baoyu-diagram "微服务架构" --lang zh
/baoyu-diagram "build pipeline" --out docs/build-pipeline.svg
```

**Options**:
| Option | Description |
|--------|-------------|
| `--type ` | `flowchart`, `sequence`, `structural`, `illustrative`, `class`, `auto` (default). Skips type recommendation. |
| `--lang ` | Output language (en, zh, ja, ...) |
| `--out ` | Output file path. Generates exactly one diagram focused on the most important aspect. |

**Diagram types**:

| Type | Reader need | Verbs that trigger it |
|------|-------------|------------------------|
| `flowchart` | Walk me through the steps in order | walk through, steps, process, lifecycle, workflow, state machine |
| `sequence` | Who talks to whom, in what order | protocol, handshake, auth flow, OAuth, TCP, request/response |
| `structural` | Show me what's inside what, how it's organised | architecture, components, topology, layout, what's inside |
| `illustrative` | Give me the intuition — draw the mechanism | how does X work, explain X, intuition for, why does X do Y |
| `class` | What are the types and how are they related | class diagram, UML, inheritance, interface, schema |

Not an image-generation skill — no LLM image model is called. Claude writes the SVG by hand with hand-computed layout math, so every diagram honors the design system. Embedded `