| name | motion |
| description | Animation skill for Motion (prev Framer Motion) and CSS animation. Provides best practices (vanilla JS, React, Vue, Base UI, Radix), docs search, CSS spring generation, MotionScore perf audit. Use for animations (motion/react, motion-v), CSS linear() springs, jank audits, or spring/easing visuals. Triggers: Motion, framer-motion, animate UI, CSS spring, linear(), MotionScore. |
Motion
Implementation toolkit for web animation with the Motion library (vanilla JS, motion/react, motion-v) and CSS: platform-specific best practices, official docs/example search, CSS linear() spring generation, MotionScore performance audits, and easing/spring visualisation. Route the request to one capability below.
Argument examples: audit src/Modal.tsx, spring bounce 0.3, see easeOut, how do I animate a list.
- Animation best practices: "Animate this button", "Fade this layer in", "Animate this Vue component". This includes platform-specific best practices for vanilla JS, React, Vue, Base UI and Radix. Contains advice for both Motion and CSS animation.
- Documentation and examples search: "What options does X have", "How does X work", "Use X (specific Motion API) to do Y", "Show me an example of X", "Make a X (i.e. carousel, ticker, modal etc)"
- CSS spring generation: "Generate a CSS spring for a bounce of 0.5 and duration of 0.3s", "Make a bouncy spring [in a CSS context]"
- MotionScore performance audit: "Audit src/Modal.tsx for jank", "Runtime audit of homepage", "Is this code janky: [code snippet]", "Grade the performance of this site: [URL]" - or if you, the agent, wish to profile a site or codebase without a user prompt, you can proactively run audits and report findings.
- Transition visualisation: "Show me the curve for easeOut", "Visualise a spring with bounce 0.5 and duration 0.3s"
Boundaries
- This skill owns web animation implementation and tooling: Motion-library and CSS animation code, perf audits, spring/easing generation and visuals.
- Web motion values and taste (what to animate, durations/easing choices as design decisions) →
web-design (web-animation-design), the default when platform is unstated.
- Native Apple animation →
swiftui (swiftui-animation). Never cross-apply web timing values to native or vice versa.
If a required Motion MCP tool is unavailable
This skill ships with an MCP server. Some tools expect this server to be running. If you attempt to use a tool that requires the MCP server and it is not found, tell the user:
This capability requires the Motion AI Kit. Install it from https://motion.dev/docs/ai-kit.
Then fall back to the guidance in the relevant capability directory where possible (e.g. best-practices/ and performance-audit/ work without any MCP tool).
Staleness note: vendor-imported skill (Motion AI Kit). Tooling assumptions — the MCP tool names (search-motion-codex, generate-css-spring, visualise-spring, visualise-cubic-bezier), the npx motionscore CLI, and the motion/motion-v package guidance — reflect the kit as of mid-2026. If a tool name, command, or API disagrees with reality, trust the live docs at https://motion.dev/docs/ai-kit and current Motion docs over this file.
