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.
- Installs
- 1.1K
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/pproenca/dot-skills --skill framer-motion- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads framer-motion automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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 motionbundle-dynamic-features- Dynamically import motion featuresbundle-dom-animation- Use domAnimation for basic animationsbundle-use-animate-mini- Use mini useAnimate for simple casesbundle-strict-mode- Enable strict mode to catch accidental imports
2. Re-render Prevention (CRITICAL)
rerender-motion-value- Use useMotionValue instead of useStatererender-use-transform- Derive values with useTransformrerender-stable-callbacks- Keep animation callbacks stablererender-variants-object- Define variants outside componentrerender-animate-prop- Use stable animate valuesrerender-motion-value-event- Use motion value events
3. Animation Properties (HIGH)
anim-transform-properties- Animate transform propertiesanim-opacity-filter- Prefer opacity and filter for visual effectsanim-hardware-acceleration- Leverage hardware accelerationanim-will-change- Use willChange prop judiciouslyanim-independent-transforms- Animate transforms independentlyanim-keyframes-array- Use keyframe arrays for sequences
4. Layout Animations (HIGH)
layout-dependency- Use layoutDependency to limit measurementslayout-position-size- Use layout="position" or "size" appropriatelylayout-group- Group related layout animationslayout-id-shared- Use layoutId for shared element transitionslayout-scroll- Add layoutScroll to scrollable ancestors
5. Scroll Animations (MEDIUM-HIGH)
scroll-use-scroll- Use useScroll hook for scroll-linked animationsscroll-use-spring-smooth- Smooth scroll animations with useSpringscroll-element-tracking- Track specific elements entering viewportscroll-offset-configuration- Configure scroll offsetsscroll-container-ref- Track scroll within specific containers
6. Gesture Optimization (MEDIUM)
gesture-while-props- Use whileHover/whileTap instead of handlersgesture-variants-flow- Let gesture variants flow to childrengesture-drag-constraints- Use dragConstraints ref for boundariesgesture-drag-elastic- Configure dragElastic for natural feelgesture-tap-cancel- Use onTapCancel for interrupted gestures
7. Spring & Physics (MEDIUM)
spring-physics-based- Use physics-based springs for interruptibilityspring-damping-ratio- Configure damping to control oscillationspring-mass-inertia- Adjust mass for heavier/lighter feelspring-use-spring-hook- Use useSpring for reactive values
8. SVG & Path Animations (LOW-MEDIUM)
svg-path-length- Use pathLength for line drawing animationssvg-motion-components- Use motion.path and motion.circlesvg-viewbox-animation- Animate viewBox for zoom effectssvg-morph-matching-points- Match point counts for morphing
9. Exit Animations (LOW)
exit-animate-presence- Wrap conditional renders with AnimatePresenceexit-unique-keys- Provide unique keys for AnimatePresence childrenexit-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 |
FAQ
What does the framer-motion skill do?
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.
How do I install framer-motion?
Run npx skills add https://github.com/pproenca/dot-skills --skill framer-motion in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/framer-motion/ (personal) or .claude/skills/framer-motion/ (project).
Which AI agents can use framer-motion?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is framer-motion safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains framer-motion?
It is published by pproenca in pproenca/dot-skills. It has 1,139 recorded installs.
More from pproenca/dot-skills
zod
pproenca/dot-skills
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).
vitest
pproenca/dot-skills
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.
react-hook-form
pproenca/dot-skills
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).
emilkowal-animations
pproenca/dot-skills
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.
nuqs
pproenca/dot-skills
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.
clean-architecture
pproenca/dot-skills
Clean Architecture principles and best practices from Robert C. Martin's book. This skill should be used when designing software systems, reviewing code structure, or refactoring applications to achieve better separation of concerns. Triggers on tasks involving layers, boundaries, dependency direction, entities, use cases, or system architecture.
Popular code quality & workflow skills
grill-me
mattpocock/skills
A relentless interview to sharpen a plan or design.
improve-codebase-architecture
mattpocock/skills
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
handoff
mattpocock/skills
Compact the current conversation into a handoff document for another agent to pick up.
domain-modeling
mattpocock/skills
Build and sharpen a project's domain model. Use when discussing codebase terminology, writing or editing a GLOSSARY.md, or recording or editing an ADR.
codebase-design
mattpocock/skills
Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.
diagnosing-bugs
mattpocock/skills
Diagnosis loop for hard bugs and performance regressions. Use when the user says "diagnose"/"debug this", or reports something broken/throwing/failing/slow.