Bring Ian Xiaohei Comics to Life as Editable SVG Motion

Where this fits

You're drafting a Chinese tech article or script and need a visual that shows a concept like "data sorting" or "request rerouting." Instead of generating a static raster image or manually animating a messy PNG trace, you want a clean, layered SVG comic frame that you can tweak, edit text on, and sync to voiceover cues. This skill turns that need into a repeatable workflow.

Why agents benefit

• Semantic scene reconstruction: Rebuilds the illustration as named SVG groups (arms, objects, background) instead of path soup, so agents can target elements by meaning.
• GSAP timeline control: Generates a timeline object that maps to a storyboard, enabling precise cue-aligned animation for video or slides.
• Metaphor-driven composition: Picks a physical metaphor (folding, leaking, bridging) from the text's cognitive anchor, making the animation communicative, not decorative.
• Editable output: Produces HTML+SVG that works in any editor—change a character's expression or swap a label without touching javascript.
• Chinese-content aware: Understands triggers like "小黑 SVG" or "口播流程动画" and follows Xiaohei's comic style rules (bold outlines, simple shapes, exaggerated poses).

Practical scenarios

Explaining a workflow in a blog post

You're writing about microservice retries. The skill extracts the cognitive anchor (retry loop) and picks the "rerouting" metaphor. Xiaohei appears as a traffic controller, redirecting packets in a layered SVG with a pulsing route path—animated with GSAP to show the retry sequence.

Storyboarding a short video script

Your script has a scene where Xiaohei "carries" heavy logs to illustrate batch processing. The skill generates a storyboard as a static SVG first, then you approve the layout. It returns a GSAP timeline with staggered lifting motions, ready for you to record voiceover and export frames.

Creating interactive educational graphics

For an online course on database indexing, the skill produces an interactive SVG where Xiaohei "folds" a table into a B-tree. Users can hover to trigger GSAP animations—no heavy JS, just semantic groups and timeline control.

Add it to your agent workflow

Install via npx:

npx skills add Pluviobyte/rnskill --skill ian-xiaohei-svg-motion

Then instruct your agent:

Use ian-xiaohei-svg-motion to animate a sorting metaphor for the article section on priority queues.

The agent will return an HTML file with embedded SVG and GSAP code, plus a short README on how to tune the timing. For more context on this skill’s origin, see the OpenAgentSkill entry.

Compare before adopting

Before committing, evaluate against: quality—does the generated SVG reuse semantic groups or encode a flat trace? maintenance—check the GitHub repo for recent commits and issue responses. alternatives—could a generic vector animation library (e.g., SVGA or Lottie) serve better if you already have existing asset pipelines? workflow fit—does it integrate with your existing content generation flow (e.g., article drafting, video scripting)?

Why it is worth tracking

With 1.3k stars and an active author, the skill shows strong community momentum. If you regularly produce Chinese-language illustrated content or need controllable comic-style animation for technical explanations, this skill fills a niche between static illustration and full motion design. Evaluate it now, but reassess when you scale to collaborative projects where asset management and style consistency matter.