Svg Animation Engineer

This generates production-ready SVG animations using flat design principles and CSS keyframes. It's meant for when you need Lottie alternatives or vector motion graphics that run directly in browsers without dependencies. The skill enforces proper animation physics like squash and stretch, overlapping action with animation delays, and secondary motion for things like hair or clothing. It outputs complete SVG code blocks with proper structure including defs, gradients, and layered groups for parallax effects. The source includes specific guidance on transform-box compatibility for Safari and the two-layer group pattern to prevent transform conflicts. If you're building web animations and want clean, self-contained SVG instead of external libraries, this handles the boilerplate and motion design patterns for you.

Install to Claude Code

npx -y skills add liuyunlong2021-wq/svg-skills --skill svg-animation-engineer --agent claude-code