baoyu-skills — Use Cases, Install & Live Demo

Why use it

Key features

Xiaohongshu card series generator with multiple layouts/styles
Infographic generator with 21 layouts × 17 visual styles
SVG diagram skills: flowchart / sequence / structural / illustrative
Slide deck + article illustration + comic skills
Multi-provider image gen routing (OpenAI / Google / DashScope / MiniMax)
Bilingual docs; many Chinese-internet integrations

Live Demo

What it looks like in practice

ready

Install

Pick your client

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "baoyu-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/JimLiu/baoyu-skills",
        "~/.claude/skills/baoyu-skills"
      ],
      "_inferred": true
    }
  }
}

Open Claude Desktop → Settings → Developer → Edit Config. Restart after saving.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "baoyu-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/JimLiu/baoyu-skills",
        "~/.claude/skills/baoyu-skills"
      ],
      "_inferred": true
    }
  }
}

Cursor uses the same mcpServers schema as Claude Desktop. Project config wins over global.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "baoyu-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/JimLiu/baoyu-skills",
        "~/.claude/skills/baoyu-skills"
      ],
      "_inferred": true
    }
  }
}

Click the MCP Servers icon in the Cline sidebar, then "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "baoyu-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/JimLiu/baoyu-skills",
        "~/.claude/skills/baoyu-skills"
      ],
      "_inferred": true
    }
  }
}

Same shape as Claude Desktop. Restart Windsurf to pick up changes.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "baoyu-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/JimLiu/baoyu-skills",
        "~/.claude/skills/baoyu-skills"
      ]
    }
  ]
}

Continue uses an array of server objects rather than a map.

~/.config/zed/settings.json

{
  "context_servers": {
    "baoyu-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/JimLiu/baoyu-skills",
          "~/.claude/skills/baoyu-skills"
        ]
      }
    }
  }
}

Add to context_servers. Zed hot-reloads on save.

claude mcp add baoyu-skill -- git clone https://github.com/JimLiu/baoyu-skills ~/.claude/skills/baoyu-skills

One-liner. Verify with claude mcp list. Remove with claude mcp remove.

Use Cases

Real-world ways to use baoyu-skills

Generate a 9-card Xiaohongshu post from an article

👤 Content creators on RED / Xiaohongshu ⏱ ~15 min beginner

When to use: You wrote a long-form article and need square card visuals for the platform.

Prerequisites

Skill installed — git clone https://github.com/JimLiu/baoyu-skills ~/.claude/skills/baoyu-skills

Flow

Pick layout + style

Use baoyu-skills. From article.md, generate a 9-card Xiaohongshu series in 'minimal' style with serif title font.✓ Copied

→ 9 SVG/PNG cards generated, square ratio
Iterate on cover

Cover (card 1) is too plain — try 'magazine' style with a number badge.✓ Copied

→ New cover variants; pick one
Export

Export all 9 cards as PNG at 1080×1080, save to /posts/<slug>/.✓ Copied

→ PNGs ready to upload

Outcome: Ship-ready card series in under 10 minutes per post.

Pitfalls

Card text overflows on long Chinese sentences — Ask the skill to summarize per-card text to ≤24 chars or auto-shrink the font

Combine with: humanizer-skill

Build an infographic from a small dataset

👤 Marketers, analysts, anyone presenting numbers ⏱ ~20 min beginner

When to use: You have a CSV with 5–10 stats and want a single shareable infographic.

Flow

Pick layout

Use baoyu-skills. From data.csv (5 rows), pick the most appropriate of the 21 infographic layouts.✓ Copied

→ Layout recommendation with reasoning
Generate

Generate it in 'editorial' style. Use my brand colors #0F172A and #38BDF8.✓ Copied

→ SVG output; preview in chat
Refine

Add a 1-line takeaway under each stat. Reduce icon weight by 30%.✓ Copied

→ Refined SVG

Outcome: Infographic ready for blog/social — no Figma needed.

Pitfalls

21 layouts × 17 styles = decision paralysis — Let the skill recommend based on data shape; only override if you have a strong opinion

Combine with: filesystem

Generate an SVG architecture diagram from a description

👤 Engineers writing docs ⏱ ~12 min beginner

When to use: You need a system diagram for a README and don't want to open a drawing tool.

Flow

Describe the system

Use baoyu-skills. Generate a structural diagram for: web client → API gateway → 3 services (auth, billing, content) → Postgres + Redis. Show external dependencies.✓ Copied

→ SVG produced with named nodes
Annotate

Add HTTP/gRPC labels on edges; mark Postgres as 'primary' and 'replica'.✓ Copied

→ Annotations applied

Outcome: Diagram in repo; renders in any markdown viewer.

Pitfalls

Diagram becomes unreadable with many nodes — Split into two diagrams (high-level + per-service detail); never cram

Combine with: filesystem

Turn a YouTube talk into a blog post draft

👤 Bloggers repurposing video content ⏱ ~25 min beginner

When to use: You watched a great conference talk and want a post-ready summary.

Flow

Pull transcript

Use baoyu-skills YouTube transcript skill on <url>. Translate if non-English.✓ Copied

→ Cleaned transcript in chat
Restructure

Convert to a 1200-word post: hook, 4 sections matching the talk's arc, takeaways. Cite timestamps.✓ Copied

→ Post draft with timestamp citations

Outcome: Sourced post draft in 15 minutes.

Pitfalls

Auto-transcripts mishear technical terms — Have the skill flag low-confidence words; spot-check against the video

Combine with: humanizer-skill

Combinations

Pair with other MCPs for X10 leverage

baoyu-skill + humanizer-skill

Generate cards/posts, then strip AI tells

Generate the post draft via baoyu-skills, then run humanizer on it before publishing.✓ Copied

baoyu-skill + filesystem

Save outputs into a content repo

Save all generated cards under /content/<slug>/ with a stable naming convention.✓ Copied

Tools

What this MCP exposes

Tool	Inputs	When to call	Cost
make_xhs_cards	source_text, layout, style, count	Card series for RED / Xiaohongshu	Image gen API for any rendered images
make_infographic	data, layout, style, palette?	Single-image data viz	0 (SVG is template-rendered)
make_svg_diagram	type (flow\|seq\|struct\|illust), description	Diagrams for docs	0
make_slides	outline, theme	Lightning-talk decks	0
yt_transcript	url, translate_to?	Repurpose video	0
url_to_md	url	Quote a web article cleanly	0

Cost & Limits

What this costs to run

API quota: Image-gen skills depend on chosen provider's quota
Tokens per call: SVG/template skills: low. Image-gen: varies by model
Monetary: Free (skill); pay for image gen if used
Tip: Use SVG-template skills (cards, infographics, diagrams) — they don't call paid models

Security

Permissions, secrets, blast radius

Minimum scopes: filesystem-write (for output)

Credential storage: Image-gen API keys via env vars; skill reads from env, not committed

Data egress: Only when image-gen sub-skills are used; SVG/template skills are local

Outputs may carry brand-IP if you embed logos/photos — ensure you have rights

Troubleshooting

Common errors and fixes

Chinese characters render as boxes

Install a CJK-capable font; the skill ships fallback list but local OS may lack a match

Verify: Check fonts available; install Noto Sans CJK

Image-gen sub-skill fails

Check provider env var; provider may be down or out of credits

Card text overflows

Provide shorter text per card (≤24 chars for headline) or pass auto_shrink=true

SVG won't render in GitHub README

Convert to PNG for GitHub (it strips some SVG tags); SVG works fine in most blogs

Alternatives

baoyu-skills vs others

Alternative	When to use it instead	Tradeoff
skyll-skill	You want a focused image card studio rather than a 20-skill bundle	Less surface, more focused
AntV mcp-server-chart	You only need data charts, not visual cards/illustrations	Different shape — chart-centric

More

Resources

📖 Read the official README on GitHub

🐙 Browse open issues

🔍 Browse all 400+ MCP servers and Skills