Framer motion best practices

Skill ulpi-io/plugin-marketplace/plugins/pproenca/skills/framer-motion-best-practices

A curated collection of 7,800+ agent skills for Claude Desktop, sourced from skills.sh

Install

npx -y skills add ulpi-io/plugin-marketplace --skill framer-motion-best-practices

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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.

SKILL.md

6.8 KB, ~1.5k tokens by cl100k_base, as published. Nobody here has run it

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 - Use LazyMotion and m component instead of motion
bundle-dynamic-features - Dynamically import motion features
bundle-dom-animation - Use domAnimation for basic animations
bundle-use-animate-mini - Use mini useAnimate for simple cases
bundle-strict-mode - Enable strict mode to catch accidental imports

2. Re-render Prevention (CRITICAL)

rerender-motion-value - Use useMotionValue instead of useState
rerender-use-transform - Derive values with useTransform
rerender-stable-callbacks - Keep animation callbacks stable
rerender-variants-object - Define variants outside component
rerender-animate-prop - Use stable animate values
rerender-motion-value-event - Use motion value events

3. Animation Properties (HIGH)

anim-transform-properties - Animate transform properties
anim-opacity-filter - Prefer opacity and filter for visual effects
anim-hardware-acceleration - Leverage hardware acceleration
anim-will-change - Use willChange prop judiciously
anim-independent-transforms - Animate transforms independently
anim-keyframes-array - Use keyframe arrays for sequences

4. Layout Animations (HIGH)

layout-dependency - Use layoutDependency to limit measurements
layout-position-size - Use layout="position" or "size" appropriately
layout-group - Group related layout animations
layout-id-shared - Use layoutId for shared element transitions
layout-scroll - Add layoutScroll to scrollable ancestors

5. Scroll Animations (MEDIUM-HIGH)

scroll-use-scroll - Use useScroll hook for scroll-linked animations
scroll-use-spring-smooth - Smooth scroll animations with useSpring
scroll-element-tracking - Track specific elements entering viewport
scroll-offset-configuration - Configure scroll offsets
scroll-container-ref - Track scroll within specific containers

6. Gesture Optimization (MEDIUM)

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

7. Spring & Physics (MEDIUM)

spring-physics-based - Use physics-based springs for interruptibility
spring-damping-ratio - Configure damping to control oscillation
spring-mass-inertia - Adjust mass for heavier/lighter feel
spring-use-spring-hook - Use useSpring for reactive values

8. SVG & Path Animations (LOW-MEDIUM)

svg-path-length - Use pathLength for line drawing animations
svg-motion-components - Use motion.path and motion.circle
svg-viewbox-animation - Animate viewBox for zoom effects
svg-morph-matching-points - Match point counts for morphing

9. Exit Animations (LOW)

exit-animate-presence - Wrap conditional renders with AnimatePresence
exit-unique-keys - Provide unique keys for AnimatePresence children
exit-mode-wait - Use mode="wait" for sequential transitions

How to Use

Read individual reference files for detailed explanations and code examples:

Section definitions - Category structure and impact levels
Rule template - Template for adding new rules

Reference Files

File	Description
references/_sections.md	Category definitions and ordering
assets/templates/_template.md	Template for new rules
metadata.json	Version and reference information