Skip to main content
affpapa.org
RU EN
skill CX Codex

framer-motion · pproenca — Claude Code skill: what it does, how to install

Optimizes React animations using Framer Motion guidelines: slashes bundle size, eliminates unnecessary re-renders, and polishes gesture or scroll transitions.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add pproenca/dot-skills --skill framer-motion -a claude-code
Open on GitHub

What framer-motion does

The skill injects 42 Framer Motion optimization rules across 9 impact-ranked categories directly into your coding assistant. It triggers whenever the model writes, reviews, or refactors React code involving motion components, layout transitions, scroll effects, or SVG paths. Bundle footprint reduction and re-render prevention take top priority.

Inside, the guidelines enforce swapping heavyweight motion primitives for LazyMotion and the m component, using domAnimation for basic cases. It replaces re-rendering useState calls with useMotionValue or useTransform, pushes animation variants outside components, and restricts layout recalculations via layoutDependency.

Without switching to dynamic feature imports and the m component, bundle optimization remains ineffective, so the rules enforce strict import checks early.

What it helps with

  • Shrink React bundle size by switching from motion to LazyMotion and domAnimation
  • Prevent component re-renders during animations using useMotionValue and useTransform
  • Synchronize shared element layout transitions via layoutId
  • Smooth out scroll-linked and gesture interactions with physics-based springs

Example prompts for the agent

  • Refactor this Framer Motion card component to eliminate unnecessary React re-renders
  • Reduce bundle size in this modal by converting motion.div to LazyMotion and m.div
  • Implement a scroll-linked header animation using useScroll and useSpring

How to install framer-motion

1Skills CLI (Vercel)

npx skills add pproenca/dot-skills --skill framer-motion -a claude-code

2Manually: put the files in place

~/.claude/skills/framer-motion/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/framer-motion/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about framer-motion

How to install framer-motion in Claude Code?

Run npx skills add pproenca/dot-skills --skill framer-motion -a claude-code in your terminal. This downloads the skill into ~/.claude/skills/framer-motion/SKILL.md.

What does the framer-motion skill do?

It provides your coding assistant with 42 prioritized rules for React animation performance. The guide directs the model to eliminate re-renders, trim bundle size, and handle gestures, layout shifts, and SVG transitions efficiently.

How does the skill address bundle size optimization?

It directs the assistant to replace direct motion component imports with LazyMotion and the lightweight m component. It also guides dynamic feature imports and recommends domAnimation for straightforward transitions.

Source text

SKILL.md · MIT 
---
name: framer-motion
description: Framer Motion performance optimization guidelines. This skill should be used when writing, reviewing, or refactoring React animations with Framer Motion to ensure optimal performance patterns. Triggers on tasks involving motion components, animations, gestures, layout transitions, scroll-linked effects, and SVG animations.
---

# Community Framer Motion Best Practices

Comprehensive performance optimization guide for Framer Motion animations in React applications. Contains 42 rules across 9 categories, prioritized by impact to guide automated refactoring and code generation.

## When to Apply

Reference these guidelines when:
- Adding animations to React components with Framer Motion
- Optimizing bundle size for animation-heavy applications
- Preventing unnecessary re-renders during animations
- Implementing layout transitions or shared element animations
- Building scroll-linked or gesture-based interactions

## Rule Categories by Priority

| Priority | Category | Impact | Prefix |
|----------|----------|--------|--------|
| 1 | Bundle Optimization | CRITICAL | `bundle-` |
| 2 | Re-render Prevention | CRITICAL | `rerender-` |
| 3 | Animation Properties | HIGH | `anim-` |
| 4 | Layout Animations | HIGH | `layout-` |
| 5 | Scroll Animations | MEDIUM-HIGH | `scroll-` |
| 6 | Gesture Optimization | MEDIUM | `gesture-` |
| 7 | Spring & Physics | MEDIUM | `spring-` |
| 8 | SVG & Path Animations | LOW-MEDIUM | `svg-` |
| 9 | Exit Animations | LOW | `exit-` |

## Quick Reference

### 1. Bundle Optimization (CRITICAL)

- [`bundle-lazy-motion`](references/bundle-lazy-motion.md) - Use LazyMotion and m component instead of motion
- [`bundle-dynamic-features`](references/bundle-dynamic-features.md) - Dynamically import motion features
- [`bundle-dom-animation`](references/bundle-dom-animation.md) - Use domAnimation for basic animations
- [`bundle-use-animate-mini`](references/bundle-use-animate-mini.md) - Use mini useAnimate for simple cases
- [`bundle-strict-mode`](references/bundle-strict-mode.md) - Enable strict mode to catch accidental imports

### 2. Re-render Prevention (CRITICAL)

- [`rerender-motion-value`](references/rerender-motion-value.md) - Use useMotionValue instead of useState
- [`rerender-use-transform`](references/rerender-use-transform.md) - Derive values with useTransform
- [`rerender-stable-callbacks`](references/rerender-stable-callbacks.md) - Keep animation callbacks stable
- [`rerender-variants-object`](references/rerender-variants-object.md) - Define variants outside component
- [`rerender-animate-prop`](references/rerender-animate-prop.md) - Use stable animate values
- [`rerender-motion-value-event`](references/rerender-motion-value-event.md) - Use motion value events

### 3. Animation Properties (HIGH)

- [`anim-transform-properties`](references/anim-transform-properties.md) - Animate transform properties
- [`anim-opacity-filter`](references/anim-opacity-filter.md) - Prefer opacity and filter for visual effects
- [`anim-hardware-acceleration`](references/anim-hardware-acceleration.md) - Leverage hardware acceleration
- [`anim-will-change`](references/anim-will-change.md) - Use willChange prop judiciously
- [`anim-independent-transforms`](references/anim-independent-transforms.md) - Animate transforms independently
- [`anim-keyframes-array`](references/anim-keyframes-array.md) - Use keyframe arrays for sequences

### 4. Layout Animations (HIGH)

- [`layout-dependency`](references/layout-dependency.md) - Use layoutDependency to limit measurements
- [`layout-position-size`](references/layout-position-size.md) - Use layout="position" or "size" appropriately
- [`layout-group`](references/layout-group.md) - Group related layout animations
- [`layout-id-shared`](references/layout-id-shared.md) - Use layoutId for shared element transitions
- [`layout-scroll`](references/layout-scroll.md) - Add layoutScroll to scrollable ancestors

### 5. Scroll Animations (MEDIUM-HIGH)

- [`scroll-use-scroll`](references/scroll-use-scroll.md) - Use useScroll hook for scroll-linked animations
- [`scroll-use-spring-smooth`](references/scroll-use-spring-smooth.md) - Smooth scroll animations with useSpring
- [`scroll-element-tracking`](references/scroll-element-tracking.md) - Track specific elements entering viewport
- [`scroll-offset-configuration`](references/scroll-offset-configuration.md) - Configure scroll offsets
- [`scroll-container-ref`](references/scroll-container-ref.md) - Track scroll within specific containers

### 6. Gesture Optimization (MEDIUM)

- [`gesture-while-props`](references/gesture-while-props.md) - Use whileHover/whileTap instead of handlers
- [`gesture-variants-flow`](references/gesture-variants-flow.md) - Let gesture variants flow to children
- [`gesture-drag-constraints`](references/gesture-drag-constraints.md) - Use dragConstraints ref for boundaries
- [`gesture-drag-elastic`](references/gesture-drag-elastic.md) - Configure dragElastic for natural feel
- [`gesture-tap-cancel`](references/gesture-tap-cancel.md) - Use onTapCancel for interrupted gestures

### 7. Spring & Physics (MEDIUM)

- [`spring-physics-based`](references/spring-physics-based.md) - Use physics-based springs for interruptibility
- [`spring-damping-ratio`](references/spring-damping-ratio.md) - Configure damping to control oscillation
- [`spring-mass-inertia`](references/spring-mass-inertia.md) - Adjust mass for heavier/lighter feel
- [`spring-use-spring-hook`](references/spring-use-spring-hook.md) - Use useSpring for reactive values

### 8. SVG & Path Animations (LOW-MEDIUM)

- [`svg-path-length`](references/svg-path-length.md) - Use pathLength for line drawing animations
- [`svg-motion-components`](references/svg-motion-components.md) - Use motion.path and motion.circle
- [`svg-viewbox-animation`](references/svg-viewbox-animation.md) - Animate viewBox for zoom effects
- [`svg-morph-matching-points`](references/svg-morph-matching-points.md) - Match point counts for morphing

### 9. Exit Animations (LOW)

- [`exit-animate-presence`](references/exit-animate-presence.md) - Wrap conditional renders with AnimatePresence
- [`exit-unique-keys`](references/exit-unique-keys.md) - Provide unique keys for AnimatePresence children
- [`exit-mode-wait`](references/exit-mode-wait.md) - Use mode="wait" for sequential transitions

## How to Use

Read individual reference files for detailed explanations and code examples:

- [Section definitions](references/_sections.md) - Category structure and impact levels
- [Rule template](assets/templates/_template.md) - Template for adding new rules

## Reference Files

| File | Description |
|------|-------------|
| [references/_sections.md](references/_sections.md) | Category definitions and ordering |
| [assets/templates/_template.md](assets/templates/_template.md) | Template for new rules |
| [metadata.json](metadata.json) | Version and reference information |

© pproenca · MIT · pproenca/dot-skills

Similar skills

Everything for Frontend and UI →

framer-motion by other authors comes first.

framer-motion AThevon Guides coding agents on Framer Motion and Motion patterns in React: layout transitions, gestures, and DOM-direct motion values. CX Codex +1 990installs framer-motion Mindrally Tells your agent which properties to animate in Motion and which ones wreck layout. Useful when the project already runs React and TypeScript. CX Codex +1 3,000installs framer-motion dylantarre This skill guides the agent in implementing Disney's 12 animation principles with Framer Motion in React. Useful for building UI transitions and gesture animations. CX Codex +1 1,700installs framer-motion-animator patricio0312rev Generates smooth Framer Motion animations and micro-interactions in React. Useful for building page transitions, drag gestures, and scroll effects. CX Codex +1 11,100installs motion-framer freshtechbro Guides an agent through Motion and Framer Motion animations for React interfaces, from hover effects to state and layout transitions. CX Codex +1 5,900installs framer-motion-react C-Jeril A Framer Motion skill for React and Next.js: AnimatePresence, layout animations, useAnimation, and the SSR workarounds that keep hydration quiet. CX Codex +1 822installs framer-motion-scroll C-Jeril A Framer Motion skill that tells your agent how to build scroll-linked animations, parallax and progress indicators. CX Codex +1 803installs design-motion-principles kylezantos Builds or audits UI motion with rules based on project context and interaction frequency. Use it for transitions, hover states, and micro-interactions. CX Codex +1 12,700installs motion secondsky A skill that feeds your agent the Motion (Framer Motion) docs for React: drag-and-drop, scroll effects, layout transitions. Useful when the agent guesses at props. CX Codex +1 1,100installs

From the same set45

nuqs A skill with 39 nuqs rules covering typed parsers, adapters, Server Components and URL update performance. Useful when an agent writes or refactors URL state code. CX Codex +1 2,300installs clean-architecture A skill with 42 rules from Robert C. Martin's book: it tells the agent which way dependencies should point and where layer boundaries belong. CX Codex +1 2,000installs code-simplifier A skill that gives AI agents 47 rules for cleaning up recently changed code without altering what it does. CX Codex +1 1,600installs expo-react-native-performance Performance guidelines with 42 prioritized rules for Expo React Native apps. Helps agents refactor startup bottlenecks, list virtualization, re-renders, and animations. CX Codex +1 1,500installs msw A skill with 45 rules for Mock Service Worker v2: setup, handlers, test integration, GraphQL. Useful when your agent writes or fixes HTTP mocks. CX Codex +1 842installs clean-code A skill that feeds the agent 48 rules on naming, functions, errors and tests, drawn from Robert C. Martin's book with modern fixes. Useful during reviews and refactors. CX Codex +1 842installs terminal-ui A skill with 42 rules for TypeScript terminal interfaces: rendering, keyboard input, prompts. Useful when you build a CLI on Ink or Clack. CX Codex +1 836installs typescript-refactor A skill with 47 rules for refactoring TypeScript and React/TSX: type architecture, narrowing, generics, and modern TS 6.0 / React 19 features. CX Codex +1 788installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor