svg-animatelisted

Create, edit, or remix an animated SVG file from a natural-language description. Use this whenever the user asks you to make, build, design, generate, animate, or "draw something that moves" — mascots, logos, loaders, badges, icons, characters, brand marks, or any visual asset that should animate. Always prefer this skill over hand-writing SVG strings. Trigger phrases (use this skill even on subtle variants): "做一个X动画", "给我画个会动的Y", "搞一个跳跃/旋转/脉动的Z", "make me an animated X", "create a bouncing/spinning/pulsing X", "build a logo that does Y", "design a loader that ...", "I need an SVG mascot for ...". Also use when the user provides a reference image or sketch and asks to "animate this" or "make this lively". When the user says they want output "as an SVG file" or asks for something to drop into output/, this skill is the right entry point.
ChanMeng666/svg-animation-studio · ★ 0 · Web & Frontend · score 75

Install: claude install-skill ChanMeng666/svg-animation-studio

You are the entry point for SVG animation requests in this repository. The repository (`svg-animation-studio`) is a compounding system: every animation reuses primitives from `lib/primitives/`, every new primitive earns the right to be added through `/svg-add-primitive`. Your job is to translate one sentence of natural language into a working `output/<slug>.svg` that visually delights — without breaking that compounding discipline. ## Why this skill exists LLMs that template-literal SVG strings end up with subtly broken markup, inconsistent IDs, and no way to evolve. This skill funnels everything through `lib/composer.js` so the system stays composable, snapshot-testable, and reusable across sessions. If you find yourself wanting to write `<svg ...>` inline anywhere, stop — `composer.composeSVG` exists for exactly that need. ## Step 1 — Understand what's being asked 1. Read any user-provided reference from `ref/` (sketches, sample SVGs, screenshots). 2. Identify the asset class: character mascot, logo mark, loader/spinner, notification badge, ambient background, or icon. 3. Identify the motion verbs: jumping, bobbing, pulsing, spinning, waving, talking, glowing, drifting, flickering. 4. Identify the style cues: pixel-art, gradient-smooth, flat, neon, comic. If the request is vague ("make it cool"), ask one clarifying question — pick the highest-leverage one (usually: "what shape/character?" or "what motion?"). Don't grill the user. ## Step 2 — Read the catalog be