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.

1,131
installs: 0 up / 0 down, score 0.00
votes: 218
repo stars
Updated: 2 months ago
In the catalog since: 6 Oct 2026
From: pproenca/dot-skills

Get it through your agent npx skills add pproenca/dot-skills@framer-motion

Skill instructions

Rendered from the published SKILL.md, 114 lines.

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

Get it through your agent

Call the Graph-of-Skills MCP server's retrieve_skill_bundle tool and it returns this skill's text inside your budget.

{
  "tool": "retrieve_skill_bundle",
  "arguments": {
    "query": "framer-motion"
  }
}

New to this? Set up Graph-of-Skills or get a free key. The text on this page comes from its authors: how skills are sourced and what we check. If none fits your task, your agent can write a skill for your own library. To keep a skill from your own library on a machine, see how to install one of your skills.

Share on X Share on LinkedIn Share on Bluesky Share on Hacker News

Share on Reddit

Source

Source repository pproenca/dot-skills
Listing on skills.sh

From pproenca/dot-skills via skills.sh

Related skills

framer-motion
Expert guidelines for building performant animations with Framer Motion/Motion library in React applications
2,991 installs
motion-framer
Modern animation library for React and JavaScript. Create smooth, production-ready animations with motion components, variants, gestures (hover/tap/drag), layout animations, AnimatePresence exit animations, spring physics, and scroll-based effects. Use when building interactive UI components, micro-interactions, page transitions, or complex animation sequences.
5,841 installs
motion-react
Build React animations with Motion (formerly Framer Motion) - gestures (drag, hover, tap), scroll effects, spring physics, layout animations, SVG, exit animations, and motion values. Use when: building React animations, adding hover/tap/drag interactions, scroll-triggered effects, layout transitions, shared element animations, exit animations with AnimatePresence, or working with motion values and springs. Triggers: "animate", "motion component", "framer motion", "gesture", "drag", "scroll animation", "layout animation", "exit animation", "spring", "whileHover", "whileTap", "whileInView", "AnimatePresence", "layoutId", "useScroll", "useSpring", "useAnimate", "motion value", "reorder", "parallax".
1,208 installs
frontend-react-best-practices
React performance optimization guidelines. Use when writing, reviewing, or refactoring React components to ensure optimal rendering and bundle patterns. Triggers on tasks involving React components, hooks, memoization, or bundle optimization.
1,203 installs
framer-motion
Use when implementing Disney's 12 animation principles with Framer Motion in React applications
1,692 installs

More from pproenca/dot-skills

zod
Zod schema validation best practices for type safety, parsing, and error handling. This skill should be used when defining z.object schemas, using z.string validations, safeParse, or z.infer. This skill does NOT cover React Hook Form integration patterns (use react-hook-form skill) or OpenAPI client generation (use orval skill).
6,996 installs
vitest
Vitest testing framework patterns for test setup, async testing, mocking with vi.*, snapshots, and test performance (formerly test-vitest). This skill should be used when writing or debugging Vitest tests. This skill does NOT cover TDD methodology (use test-tdd skill), API mocking with MSW (use test-msw skill), or Jest-specific APIs.
5,969 installs
react-hook-form
React Hook Form performance optimization for client-side form validation using useForm, useWatch, useController, useFieldArray, the subscribe() API, and the Watch / FormStateSubscribe / FieldArray render-prop components. Covers RHF 7.82 additions including resetDefaultValues() and the disabled field-array option. This skill should be used when building client-side controlled forms with React Hook Form library. This skill does NOT cover React 19 Server Actions, useActionState, or server-side form handling (use react-19 skill for those).
2,977 installs
emilkowal-animations
Emil Kowalski's animation best practices for web interfaces. Use when writing, reviewing, or implementing animations in React, CSS, or Framer Motion. Triggers on tasks involving transitions, easing, gestures, toasts, drawers, or motion.
2,793 installs
nuqs
nuqs (type-safe URL query state) best practices for Next.js and other React frameworks. This skill should be used when writing, reviewing, or refactoring code that uses nuqs for URL state management. Triggers on tasks involving useQueryState, useQueryStates, search params, URL state, query parameters, nuqs parsers, limitUrlUpdates, Standard Schema, NuqsAdapter, or Next.js routing with state.
2,320 installs

Content is provided as published by its creators; you are responsible for how you use it.

To request removal, use the contact form.