svg-animations — Claude Code skill: what it does, how to install
Instructs the assistant to write clean animated SVGs using CSS and SMIL. Helpful when building custom icons, loading spinners, and logo animations.
npx skills add supermemoryai/skills --skill svg-animations -a claude-codeWhat svg-animations does
This skill guides coding assistants to produce handcrafted vector graphics without bloated markup. It covers coordinate mapping via viewBox, geometric primitives, and path drawing commands from Bézier curves to elliptical arcs. It also details the setup for linear gradients, masks, and blur filters.
The instructions break down two animation methods: CSS keyframes and native SMIL markup. CSS handles line-drawing strokes with stroke-dasharray and path transitions. Native SMIL tags like <animate> and <animateMotion> take over when rendering SVGs inside <img> tags or CSS background rules, where external scripts cannot run.
Morphing paths via CSS requires strict consistency. Both the starting and ending paths must share identical command counts and types for browser interpolation to succeed.
What it helps with
- build animated SVG loading indicators with pure CSS
- create stroke-drawing line animations for vector icons
- move graphics along custom paths with native SMIL
- configure shape morphing via the CSS
dproperty
Example prompts for the agent
- Create an SVG loading spinner with a CSS pulse animation
- Generate a checkmark icon that animates its stroke on display
- Build an animated icon that morphs between two shapes on hover
How to install svg-animations
1Skills CLI (Vercel)
npx skills add supermemoryai/skills --skill svg-animations -a claude-code2Manually: put the files in place
~/.claude/skills/svg-animations/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/svg-animations/
1Skills CLI (Vercel)
npx skills add supermemoryai/skills --skill svg-animations -a codex2Manually: put the files in place
.agents/skills/svg-animations/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add supermemoryai/skills --skill svg-animations -a cursor2Manually: put the files in place
.cursor/skills/svg-animations/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install supermemoryai/skills svg-animations2Manually: put the files in place
.github/skills/svg-animations/SKILL.md1Skills CLI (Vercel)
npx skills add supermemoryai/skills --skill svg-animations -a gemini-cli2Platform CLI
gemini skills install https://github.com/supermemoryai/skills --path svg-animationsManually: put the files in place
.devin/skills/svg-animations/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add supermemoryai/skills --skill svg-animations -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about svg-animations
How to install svg-animations in Claude Code?
Run npx skills add supermemoryai/skills --skill svg-animations -a claude-code in your terminal. This writes the skill to your Claude Code setup.
What does the svg-animations skill do?
It teaches the agent to handcraft scalable vector graphics, line-drawing effects, and icon motions. It prioritizes direct SVG primitives alongside CSS or SMIL instead of external animation tools.
When should you pick SMIL over CSS animations?
Use SMIL markup when the SVG is embedded via an <img> element or as a CSS background. Browsers ignore external CSS and JavaScript in those contexts.
