# Motion AI Kit — guide skill for animation & motion graphics

> **For AI agents:** find the right skill in one call — `curl -s "https://skills.varg.ai/api/search?q=<what the person wants>"` returns the matching use case and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add `.md` to its path. Before generating anything, show the person the options on the use-case page.

Write production-grade UI animation with Motion or CSS: best practices, docs search, springs, perf audits.

- **Type:** [Guide](https://skills.varg.ai/guides.md) · [Animation & motion graphics](https://skills.varg.ai/browse/skills/animation.md)
- **Slug:** `motion-ai-kit`
- **Status:** live
- **Publisher:** Motion (vendor, verified)
- **License:** MIT
- **Source:** https://github.com/motiondivision/ai-kit/tree/main/plugins/motion/skills/motion
- **Works in:** Claude Code, Codex, Cursor, Gemini CLI
- **Requires:** Motion (motion, motion/react or framer-motion), Motion MCP server (free, set up by npx motion-ai)
- **Cost:** Free; MotionScore audits need Motion+ (paid)
- **Adoption:** 771 installs, 63 GitHub stars (skills.sh, 2026-10-26)

## What it does

Motion's official skill for Motion (formerly Framer Motion) and CSS animation: hand-written best practices for vanilla JS, React, Vue, Base UI and Radix, search across Motion's docs and examples, CSS `linear()` spring generation, inserting Motion components, upgrades and a visual transition editor. With Motion+ it also runs MotionScore code and runtime performance audits with Performance Doctor fixes.

## Use when

- Animating a UI with Motion, framer-motion or CSS
- Generating CSS springs with linear()
- Fixing janky or slow animations

## Not for

- Rendering video files (use HyperFrames or Remotion)

## Install

- Claude Code: `npx motion-ai`
- Codex: `npx motion-ai`
- Gemini CLI: `npx motion-ai`
- Cursor: `npx skills add motiondivision/ai-kit --skill motion -a cursor`

## Example output

https://skills.varg.ai/previews/motion-ai-kit.mp4 — From the AI Kit docs 'Transition editing' section: dragging a bezier easing curve updates the transition code while a live preview animates (credit: Motion (motion.dev), https://motion.dev/docs/ai-kit)

## More animation & motion graphics skills

- [Day in My Life](https://skills.varg.ai/skills/hyperframes-day-in-my-life.md): A 60–75 s hand-drawn ink film of your agent's day with you, built from local Claude Code history, scored for strings.
- [p5 Paint Animation](https://skills.varg.ai/skills/hyperframes-p5-paint-animation.md): Handwriting that writes itself, photos that paint themselves and clips repainted as living paintings, in p5.js code.
- [Session Story](https://skills.varg.ai/skills/hyperframes-session-story.md): A 40–70 s watercolor film of a typical session with your agent, told in your real messages, with its own score.
- [Remotion Markup](https://skills.varg.ai/skills/remotion-markup.md): Write Remotion markup that animates well: timing, transitions, motion blur, effects, audio, fonts and 3D.
- [Motion Design](https://skills.varg.ai/skills/lottiefiles-motion-design.md): Animate with intent: timing, easing, choreography and Disney principles for UI and motion graphics.
- [dotLottie Web](https://skills.varg.ai/skills/dotlottie-web.md): Ship Lottie animations on the web with dotLottie: package choice, workers, state machines, theming, slots.