# motion

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.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 717 installs · ★ 62
- Author: motiondivision
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/motiondivision/ai-kit/tree/HEAD/plugins/motion/skills/motion/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/motiondivision-motion

## What it 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.

## Requirements
- Works with: Linear

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add motiondivision/ai-kit --skill motion -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/motion/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/motion/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add motiondivision/ai-kit --skill motion -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/motion/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add motiondivision/ai-kit --skill motion -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/motion/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install motiondivision/ai-kit motion
```

2. **Manually: put the files in place**
- File: `.github/skills/motion/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add motiondivision/ai-kit --skill motion -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/motiondivision/ai-kit --path plugins/motion/skills/motion
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/motion/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add motiondivision/ai-kit --skill motion -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/motiondivision/ai-kit/tree/HEAD/plugins/motion/skills/motion/SKILL.md

## When to use it
- 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
- Animate this panel entering the React interface.
- Create CSS spring easing with a visible bounce.
- Check `src/Modal.tsx` for animation performance problems.

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

## Other versions with the same name
- [motion · secondsky](https://affpapa.org/en/nevibecode/skills/motion.md) — 1100 installs
- [motion · mindrally](https://affpapa.org/en/nevibecode/skills/mindrally-motion.md) — 812 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md