Framer Motion
Apply prioritized Framer Motion performance rules when adding or refactoring React motion, gestures, layout, and scroll animations so pages stay smooth and bundles stay lean.
Install
npx skills add https://github.com/pproenca/dot-skills --skill framer-motionWhat is this skill?
- 42 performance rules organized across 9 impact-prioritized categories (bundle through exit animations)
- Critical paths: bundle optimization and re-render prevention before animation property tuning
- Covers layout transitions, scroll-linked motion, gestures, springs, SVG paths, and exit animations
- Structured prefixes (bundle-, rerender-, anim-, layout-, scroll-, gesture-, spring-, svg-) for scanability during review
- Intended for automated refactoring and codegen tasks involving motion.* APIs
Adoption & trust: 598 installs on skills.sh; 157 GitHub stars; 3/3 security scanners passed (skills.sh audits).
Recommended Skills
Frontend Designanthropics/skills
Vercel React Best Practicesvercel-labs/agent-skills
Remotion Best Practicesremotion-dev/skills
Vercel Composition Patternsvercel-labs/agent-skills
Develop Userscriptsxixu-me/skills
Next Best Practicesvercel-labs/next-skills
Journey fit
Primary fit
Animation work happens during product UI implementation, so the canonical shelf is Build where motion components ship in the React surface. Framer Motion is a React UI concern—rules target motion components, layout transitions, and gesture handlers in the frontend layer.
Common Questions / FAQ
Is Framer Motion safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.
SKILL.md
READMESKILL.md - Framer Motion
# 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