motion · motiondivision — Claude Code skill: animations and setup
This skill guides Motion and CSS animation work, finds docs and examples, and helps inspect performance issues. Use it when building UI motion or upgrading Motion.
npx skills add motiondivision/ai-kit --skill motion -a claude-codeWhat motion does
The skill offers animation guidance for Motion and plain CSS, with advice tailored to vanilla JS, React, Vue, Base UI, and Radix. It can search documentation and examples, generate CSS spring easing with a bounce, and open a visual editor for tuning transitions.
Code and runtime performance audits use MotionScore and Performance Doctor, and require Motion+. Search, easing generation, and the transition editor need the Motion MCP server; the core animation guidance works without a server. For an upgrade from Framer Motion, the skill checks the installed version before consulting the relevant migration guide. Keep framer-motion and motion out of the same installation.
What it helps with
- animate a UI component with Motion or CSS
- find an example for a carousel or modal
- generate CSS spring easing with a bounce
- inspect animation code for jank
- migrate a project from Framer Motion
Example prompts for the agent
- Animate this panel entering the React interface.
- Create CSS spring easing with a visible bounce.
- Check
src/Modal.tsxfor animation performance problems.
How to install motion
1Skills CLI (Vercel)
npx skills add motiondivision/ai-kit --skill motion -a claude-code2Manually: put the files in place
~/.claude/skills/motion/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/motion/
1Skills CLI (Vercel)
npx skills add motiondivision/ai-kit --skill motion -a codex2Manually: put the files in place
.agents/skills/motion/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add motiondivision/ai-kit --skill motion -a cursor2Manually: put the files in place
.cursor/skills/motion/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install motiondivision/ai-kit motion2Manually: put the files in place
.github/skills/motion/SKILL.md1Skills CLI (Vercel)
npx skills add motiondivision/ai-kit --skill motion -a gemini-cli2Platform CLI
gemini skills install https://github.com/motiondivision/ai-kit --path plugins/motion/skills/motionManually: put the files in place
.devin/skills/motion/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add motiondivision/ai-kit --skill motion -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 motion
How do I install motion in Claude Code?
Run npx skills add motiondivision/ai-kit --skill motion -a claude-code. The skill file is placed at ~/.claude/skills/motion/SKILL.md.
What does motion do?
It provides guidance for Motion and CSS animations, searches docs and examples, and generates CSS spring easing. Motion+ provides the performance audit features.
Does motion need an MCP server?
Core animation guidance works without one. Search, easing generation, and the transition editor need the Motion MCP server; MotionScore audits require Motion+.
Similar skills
Everything for Frontend and UI →motion by other authors comes first.
