# animate

Animation guidelines and ready-made patterns for React and Next.js interfaces. Helps agents write performant transitions and Framer Motion code.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 3600 installs · ★ 131
- Author: delphi-ai
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/delphi-ai/animate-skill/tree/HEAD/SKILL.md
- Updated: 2026-01-28
- HTML: https://affpapa.org/en/nevibecode/skills/delphi-ai-animate

## What it does

The skill supplies your coding assistant with UI motion patterns for React and Next.js. It compiles timing tables and custom easing curves inspired by Emil Kowalski's web animation course.

Guidance restricts transitions mostly to `transform` and `opacity` to keep rendering on the GPU. Assistants learn to make closing transitions roughly a quarter faster than opening ones. For advanced layout morphing or measuring DOM nodes, your app must install `framer-motion`, `react-use-measure`, and `usehooks-ts`.

## Install

### Claude Code (native platform)

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

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add delphi-ai/animate-skill --skill delphi-ai-animate -a codex
```

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

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add delphi-ai/animate-skill --skill delphi-ai-animate -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install delphi-ai/animate-skill delphi-ai-animate
```

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

### Gemini CLI

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

2. **Platform CLI**
```bash
gemini skills install https://github.com/delphi-ai/animate-skill
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add delphi-ai/animate-skill --skill delphi-ai-animate -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/delphi-ai/animate-skill/tree/HEAD/SKILL.md

## When to use it
- configure durations and cubic-bezier curves for UI state changes
- implement modal entrance and exit transitions with `AnimatePresence`
- build sliding tab indicators using `layoutId` layout morphing
- respect user accessibility preferences via `prefers-reduced-motion`

## Example prompts
- Animate our pricing cards on hover with a slight lift and shadow change using CSS variables.
- Create a staggered list entrance using Framer Motion variants.
- Build an accessible modal component that exits faster than it enters.

## Similar
- [mastering-animate-presence](https://affpapa.org/en/nevibecode/skills/mastering-animate-presence.md) — skill · 322 installs
- [framer-motion-animator](https://affpapa.org/en/nevibecode/skills/framer-motion-animator.md) — skill · 11100 installs
- [animation-performance](https://affpapa.org/en/nevibecode/skills/animation-performance.md) — skill · 36800 installs
- [page-transition-animation](https://affpapa.org/en/nevibecode/skills/page-transition-animation.md) — skill · 2300 installs
- [motion-dev-animations](https://affpapa.org/en/nevibecode/skills/motion-dev-animations.md) — skill · 594 installs
- [micro-interaction](https://affpapa.org/en/nevibecode/skills/micro-interaction.md) — skill · 2500 installs

## Other versions with the same name
- [animate · emilkowalski](https://affpapa.org/en/nevibecode/skills/animate.md) — 172700 installs
- [animate · aladicf](https://affpapa.org/en/nevibecode/skills/aladicf-animate.md) — 607 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