Motion

Improve the animation capabilities of the agent.

• 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"

Where this skill sits

This skill owns the Motion library and the Motion AI Kit: its APIs, spring and easing generation, and MotionScore grading. It is self-sufficient for all of that.

Adjacent concerns have better owners. Treat every row as "prefer if available, otherwise apply the guidance here" — never as a blocker. Check availability at runtime rather than assuming either way; a static list of what is installed rots the moment the estate changes.