/ Directory / Playground / baoyu-skills
● Community JimLiu ⚡ Instant

baoyu-skills

by JimLiu · JimLiu/baoyu-skills

Turn ideas into shareable visuals — Xiaohongshu cards, infographics, SVG diagrams, slide decks — all from natural-language prompts.

baoyu-skills bundles 20+ visual content skills for Claude Code. Strong on Chinese-internet formats (Xiaohongshu cards, WeChat-ready), but the SVG/infographic/slide skills are language-neutral. Includes multi-provider image gen routing (OpenAI, Google, DashScope, MiniMax) and content utilities like YouTube transcript extraction and URL-to-markdown.

Why use it

Key features

Live Demo

What it looks like in practice

ready

Install

Author repository · Claude Skills documentation

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.

Flow
  1. 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
  2. Iterate on cover
    Cover (card 1) is too plain — try 'magazine' style with a number badge.✓ Copied
    → New cover variants; pick one
  3. 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
  1. Pick layout
    Use baoyu-skills. From data.csv (5 rows), pick the most appropriate of the 21 infographic layouts.✓ Copied
    → Layout recommendation with reasoning
  2. Generate
    Generate it in 'editorial' style. Use my brand colors #0F172A and #38BDF8.✓ Copied
    → SVG output; preview in chat
  3. 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
  1. 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
  2. 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
  1. Pull transcript
    Use baoyu-skills YouTube transcript skill on <url>. Translate if non-English.✓ Copied
    → Cleaned transcript in chat
  2. 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

ToolInputsWhen to callCost
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

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

AlternativeWhen to use it insteadTradeoff
skyll-skillYou want a focused image card studio rather than a 20-skill bundleLess surface, more focused
AntV mcp-server-chartYou only need data charts, not visual cards/illustrationsDifferent shape — chart-centric

More

Resources

📖 Read the official README on GitHub

🐙 Browse open issues

🔍 Browse all 400+ MCP servers and Skills

Continue exploring

Related tools and workflows

Choose another guide for your workflow, or explore a collection.

Browse all topic collections → · See 29 new official additions →