Framer Motion Skill

Framer Motion Skill is an Agent Skill that gives AI coding agents production-ready knowledge of Motion (formerly Framer Motion) — the declarative React animation library — covering motion components, variants, gestures, layout animations, AnimatePresence, spring physics, and scroll-triggered effects, with a runnable Vite starter and two boilerplate generators.

What is Framer Motion?

Framer Motion is the most widely used animation library for React. It turns any element into an animatable one via motion.div, motion.button, or motion.svg, and drives everything from declarative props — initial, animate, exit, transition, whileHover, whileTap, drag, layout. Motion (v11+) is the smaller, framework-agnostic successor from the same authors, published at motion.dev. The API is largely shared, and this skill covers both.

What the skill teaches your agent

• Motion components and props — animate, initial, exit, style, and when initial={false} is the right call.
• Transitions — tween, spring, and inertia; per-property transitions; stiffness / damping / mass; the newer visualDuration and bounce controls; and four named spring presets (gentle, wobbly, stiff, slow).
• Variants — named animation states, propagation to children, staggerChildren, staggerDirection, and when: "beforeChildren" / "afterChildren" orchestration.
• Gestures — whileHover, whileTap, whileFocus, whileDrag, whileInView, the full event set (onHoverStart, onTap, onDragEnd, onViewportEnter), and the point / offset / velocity info objects.
• Drag — axis locking, dragConstraints against a ref or a pixel box, dragElastic, and dragTransition bounce.
• Exit animations — AnimatePresence, the unique-key requirement, list exits, and staggered exit sequences.
• Layout animations — layout, layout="position", layout="size", and layoutId for shared-element transitions such as sliding tab underlines and thumbnail-to-modal expansion.
• Scroll — whileInView with viewport={{ once, amount, margin }}, plus useInView for imperative control.
• Hooks — useAnimate with scoped selectors and stagger(), useSpring, useMotionValue, useTransform, useScroll, useReducedMotion, useAnimationControls, and usePresence.
• Performance and accessibility — transform properties over layout properties, individual transform values, the real cost of layoutId, and honouring prefers-reduced-motion.

How it works

The skill is a folder, not a package. SKILL.md carries YAML frontmatter telling the agent exactly when to activate — building interactive components, micro-interactions, page transitions, or drag interfaces. Alongside it sit references/api_reference.md for deeper lookups, two Python generators, and a complete starter app. Progressive disclosure means the agent reads SKILL.md first and only opens the reference when a task needs it.

Copy the folder into .claude/skills/, or install it as a Claude Code plugin from the parent marketplace — the plugin form adds two slash commands and a Framer Motion Animation Choreographer agent.

Six pitfalls it fixes

Each is documented with the broken code and the correction: exit animations without AnimatePresence, list items missing a unique key, animating top / left / width instead of transforms, overusing layout across long lists, duplicating props instead of using variants, and placing transition where it never applies to whileHover.

Who it is for

React developers building interactive UI with Claude Code, Cursor, or claude.ai — anyone who wants micro-interactions, page transitions, and layout animations written correctly rather than approximated from training data.

What you can build

Hover and press micro-interactions, drag-and-drop cards, modals that animate out properly, staggered lists, tab indicators that slide between items, thumbnail-to-fullscreen shared element transitions, scroll-reveal sections, animated form validation, loading states, image galleries, and route transitions.

Why it matters

This library was renamed and restructured — Framer Motion became Motion, and the docs moved from framer.com/motion to motion.dev — so training data blends two naming eras and several API generations. The failures that follow are specific and repeatable: exit animations that silently do nothing because AnimatePresence is missing, a transition prop that never reaches whileHover, and animations on left and width that stutter on every frame. This skill names each one and shows the correct form.

Option 1 — Install as a Claude Code plugin (recommended)

This skill lives in a plugin marketplace, so Claude Code can install it, its two slash commands, and its choreographer agent in one step:

/plugin marketplace add freshtechbro/claudedesignskills
/plugin install motion-framer

Option 2 — Copy the skill folder

Use the Download button above to get just the motion-framer folder, then unzip it into your project:

mkdir -p .claude/skills
unzip motion-framer.zip -d .claude/skills/

Your tree should end up as .claude/skills/motion-framer/SKILL.md.

Option 3 — Upload to claude.ai

Zip the motion-framer folder and upload it in claude.ai under Settings → Capabilities → Skills.

Install the library in your project

The skill documents the API; it does not bundle the library.

npm install framer-motion

For the newer package, use npm install motion — the skill covers both.

Try the starter

cd .claude/skills/motion-framer/assets/starter_motion
npm install
npm run dev

Run the generators (optional)

Both scripts use only the Python standard library:

python3 scripts/animation_generator.py --type exit --name Modal --typescript
python3 scripts/variant_builder.py --preset modal --output variants.js

Note: SKILL.md lists references/variants_patterns.md and references/gesture_guide.md under Bundled Resources, but only references/api_reference.md ships in the repo. Variant and gesture coverage is in SKILL.md and the API reference instead.