Individual skill

framer-motion

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.

skills/.experimental/framer-motion/SKILL.md

Read pinned source

Source commit cf93c57cac89d6fc3e4194686000411567f5caf3

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: Yes
Repository scan complete: No
Skill scan complete: Yes
Observed behavior: Instructions only
Last checked: Nov 5, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings): 221
Repository last updated: Aug 15, 2026
License: MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

writing Derived category
engineering Derived category
engineering-web Derived category

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files

SKILL.mdcore · 6,933 bytes
assets/templates/_template.mddoc · 1,275 bytes
metadata.jsonasset · 1,040 bytes
references/_sections.mddoc · 2,164 bytes
references/anim-hardware-acceleration.mddoc · 2,865 bytes
references/anim-independent-transforms.mddoc · 2,927 bytes
references/anim-keyframes-array.mddoc · 3,324 bytes
references/anim-opacity-filter.mddoc · 2,320 bytes
references/anim-transform-properties.mddoc · 2,156 bytes
references/anim-will-change.mddoc · 2,760 bytes
references/bundle-dom-animation.mddoc · 2,358 bytes
references/bundle-dynamic-features.mddoc · 1,777 bytes
references/bundle-lazy-motion.mddoc · 1,807 bytes
references/bundle-strict-mode.mddoc · 2,282 bytes
references/bundle-use-animate-mini.mddoc · 2,076 bytes
references/exit-animate-presence.mddoc · 1,606 bytes
references/exit-mode-wait.mddoc · 1,974 bytes
references/exit-unique-keys.mddoc · 1,719 bytes
references/gesture-drag-constraints.mddoc · 2,179 bytes
references/gesture-drag-elastic.mddoc · 2,071 bytes
references/gesture-tap-cancel.mddoc · 2,094 bytes
references/gesture-variants-flow.mddoc · 2,086 bytes
references/gesture-while-props.mddoc · 1,812 bytes
references/layout-dependency.mddoc · 1,788 bytes
references/layout-group.mddoc · 2,367 bytes
references/layout-id-shared.mddoc · 3,120 bytes
references/layout-position-size.mddoc · 2,038 bytes
references/layout-scroll.mddoc · 2,416 bytes
references/rerender-animate-prop.mddoc · 1,696 bytes
references/rerender-motion-value-event.mddoc · 1,779 bytes
references/rerender-motion-value.mddoc · 1,378 bytes
references/rerender-stable-callbacks.mddoc · 1,614 bytes
references/rerender-use-transform.mddoc · 1,367 bytes
references/rerender-variants-object.mddoc · 1,515 bytes
references/scroll-container-ref.mddoc · 2,387 bytes
references/scroll-element-tracking.mddoc · 2,046 bytes
references/scroll-offset-configuration.mddoc · 2,296 bytes
references/scroll-use-scroll.mddoc · 1,813 bytes
references/scroll-use-spring-smooth.mddoc · 1,430 bytes
references/spring-damping-ratio.mddoc · 1,944 bytes
references/spring-mass-inertia.mddoc · 2,045 bytes
references/spring-physics-based.mddoc · 1,832 bytes
references/spring-use-spring-hook.mddoc · 1,995 bytes
references/svg-morph-matching-points.mddoc · 2,028 bytes
references/svg-motion-components.mddoc · 1,723 bytes
references/svg-path-length.mddoc · 1,674 bytes
references/svg-viewbox-animation.mddoc · 1,652 bytes

Read excerpt


# 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