with-svg-animation

Installation
SKILL.md

with-svg-animation

You already know how to animate SVG. What you reliably fail to do is raise these conditions when the user hasn't named them — a vague request produces a plausible answer that breaks on the user's actual artwork. This body is a pre-flight, not a tutorial.

Pre-flight — answer before writing any code

Read the actual path data; if you can't see it, ask for it. Never answer from the request alone — every trap below is invisible in the request and obvious in the markup.

  1. Is the thing being animated the root <svg>, or an element inside it? Inner elements need transform-box.
  2. Does the target d contain more than one M command? One <path> can hold several disconnected subpaths.
  3. Is the artwork stroked or filled? A draw-on animation only animates a stroke; a filled logo needs stroke-then-crossfade, or a mask wipe instead.
  4. How many elements animate at once, and is it scroll-linked? Dash and d are paint-level, not compositable — dozens of them on a mid-range phone is a different problem than one logo, and answering "many" or "scroll-linked" puts you under the paint budget in the last NEVER before you write anything.

Already broken? Match the symptom

Installs
2
GitHub Stars
1
First Seen
Aug 14, 2026
with-svg-animation — robcsaszar/frontend-kit