Motion AI Kit — guide skill for animation & motion graphics

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

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

• Type: Guide · Animation & motion graphics
• 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://s3.varg.ai/how-to/previews/4d6ef8ae7622/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: 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: Handwriting that writes itself, photos that paint themselves and clips repainted as living paintings, in p5.js code.
• Session Story: A 40–70 s watercolor film of a typical session with your agent, told in your real messages, with its own score.
• Remotion Markup: Write Remotion markup that animates well: timing, transitions, motion blur, effects, audio, fonts and 3D.
• Motion Design: Animate with intent: timing, easing, choreography and Disney principles for UI and motion graphics.
• dotLottie Web: Ship Lottie animations on the web with dotLottie: package choice, workers, state machines, theming, slots.