Svg Animation Engineer

liuyunlong2021-wq/svg-skills

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.

skills.sh installs: 208
GitHub stars: 19
last updated: Aug 21, 2026

View on GitHub

Install

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

Installs into .claude/skills of the current project.

Files

SVG 动画工程师指南

编写直接在浏览器中运行、具备“优质商业宣传片纯享质感”的纯 SVG 代码动画。

美术与设计准则

视觉风格：严格采用 Flat Design（扁平化设计）和 Vector Illustration（矢量插画）。拒绝写实，采用精确的几何图形组合表现物体（正圆、胶囊形、平滑贝塞尔曲线）。
色彩科学：采用高对比度、中饱和度色系（参考现代 Tech Brand 或马卡龙色）。背景使用柔和的线性渐变（Linear Gradient）营造空间感。
视觉层次：明确划分前景（核心角色/运动物件）、中景（运动的地面/地貌）、远景（视差移动背景），构建 2.5D 纵深错觉。

动画法则与物理规律

代码中需体现专业的运动法则与物理自然感：

次要动作 (Secondary Action)：衣服、围巾或毛发随主运动飘动。
跟随动作 (Overlapping Action)：各关节间通过 animation-delay 设置时间差，避免所有部位同起同落。
挤压与拉伸 (Squash & Stretch)：展现质量感与弹性反馈。

Advanced Animation See references/motion-examples.md for exact CSS implementations of Squash & Stretch, Overlapping Action, and exact easing parameters.