animate

Build motion that feels smooth, fast, and accessible.

frontend animation

What it does

Guides implementation of smooth, performant, and accessible animations in React and Next.js applications.

When to use it

Use when implementing animations, transitions, hover effects, page transitions, modals, or other motion in React components.

It changes how the agent implements animations and other motion in React components.

What you provide

This skill

framer-motion

Execute

Installs framer-motion for examples

react-use-measure

Execute

Installs react-use-measure for examples

usehooks-ts

Execute

Installs usehooks-ts for examples

Required when using the Framer Motion examples.

Required when using Framer Motion examples that measure dynamic content dimensions.

Required when using Framer Motion examples that rely on the supplied hooks.