# baoyu-skills English | [中文](./README.zh.md) Skills shared by Baoyu for improving daily work efficiency with Claude Code. ## Prerequisites - Node.js environment installed - Ability to run `npx bun` commands ## Installation ### Quick Install (Recommended) ```bash npx skills add jimliu/baoyu-skills ``` ### 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-imagine 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 Claude Code: ```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 Claude Code: > 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 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 Skills are organized into three categories: ### 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 — flowcharts, sequence/protocol diagrams, structural/architecture diagrams, and illustrative intuition diagrams. Supports single-diagram mode (one topic) and multi-diagram mode (analyze article content and generate diagrams at identified positions). 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 # Single-diagram mode: auto-route on the verb in the prompt /baoyu-diagram "how JWT authentication works" /baoyu-diagram "Kubernetes architecture" --type structural /baoyu-diagram "OAuth 2.0 flow" --type sequence # Multi-diagram mode: analyze article and generate diagrams at identified positions /baoyu-diagram path/to/article.md /baoyu-diagram path/to/article.md --density balanced /baoyu-diagram path/to/article.md --density per-section --lang zh # 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). Forces single mode. | | `--lang ` | Output language (en, zh, ja, ...) | | `--out ` | Output file path (default: `diagram/{slug}/diagram.svg`). Forces single mode. | | `--density ` | Multi mode only: `minimal` (1-2), `balanced` (3-5, default), `per-section`, `rich` (6+) | | `--mode ` | `single`, `multi`, `auto` (default — detect from input) | **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 `