What is the framer-motion skill?
The framer-motion skill is an experimental folder in pproenca/dot-skills that gives an AI agent performance guidelines for React animation. Rules span nine prioritized categories, from bundle size and re-render prevention to layout, scroll, gesture, spring, SVG and exit animations, each backed by its own reference file.
Bundle size gets the top priority here. The first rule category is rated CRITICAL and begins with using LazyMotion and the m component in place of the full motion component, ahead of any advice about easing or timing.
The folder sits under the experimental section of pproenca/dot-skills, a collection the README describes as skills in the Agent Skills open format. Its SKILL.md is titled Community Framer Motion Best Practices.
Nine categories, ranked by impact
- Bundle optimization, rated critical, with LazyMotion, dynamic feature imports and strict mode.
- Re-render prevention, also critical, built around useMotionValue and useTransform.
- Animation properties, rated high: transforms, opacity, filter and independent transforms.
- Layout animations, rated high, including layoutId and layoutDependency.
- Scroll animations, gesture optimization and spring physics in the middle tiers.
- SVG path animation and exit animation at the bottom of the list.
How the rules are organized
Each rule has an ID with a category prefix, such as bundle-lazy-motion or rerender-motion-value, and a matching file in the references folder. The SKILL.md is only the index, so the agent reads detailed examples on demand.
The trigger description covers motion components, gestures, layout transitions, scroll-linked effects and SVG animation, whether the agent is writing new code, reviewing existing animation or refactoring it.
Who the framer-motion skill suits
Best for
- React apps that animate heavily and need to watch bundle weight.
- Reviewing animation code for avoidable re-renders caused by state driven motion values.
- Agents that default to animating many properties at once or mounting too many motion components.
Not for
- Choosing visual style or timing feel. The rules concern performance, so pair them with a pattern skill such as motion-framer-motion.
- Projects without React.
- Timeline-style GSAP work, covered by gsap-framer-scroll-animation.
Use it with UiChemy
These rules apply to React code, not to a WordPress theme. Use the skill on a React prototype or app, then bring the finished build into WordPress with UiChemy AI to WordPress. Click Get Started on uichemy.com.
For motion that stays inside WordPress, UiChemy Composer works from plain-language prompts instead. To check performance afterwards, read fixing-motion-performance and review-animations.
How to install Framer Motion Skill: Performance Rules for React Animation
git clone https://github.com/pproenca/dot-skills.gitClone the collection
Run
git clone https://github.com/pproenca/dot-skills.git. The default branch is master.Copy the skill folder
Copy skills/.experimental/framer-motion, including its references and assets folders, into your agent's skills directory so the rule files stay beside SKILL.md.
Install the library
The skill assumes Framer Motion is already in your React project. Add it with your package manager if it is missing.
Ask for a review
Point the agent at a component that uses motion elements and ask it to review the animation for performance. The skill triggers on motion components, gestures, layout transitions and scroll effects.
Check that it loaded
Ask the agent to review an animated component. It should check bundle imports first, then re-renders, and cite rule IDs such as bundle-lazy-motion or rerender-motion-value in its findings.
Key features
- Impact-ranked categoriesNine categories carry labels from CRITICAL to LOW, so an agent fixes bundle and re-render problems before polishing exits.
- Bundle optimizationLazyMotion with the m component, dynamically imported features, domAnimation for basic cases, mini useAnimate and strict mode to catch stray imports.
- Re-render preventionuseMotionValue instead of useState, values derived with useTransform, stable callbacks, variants defined outside the component and stable animate props.
- Animation property rulesAnimate transform properties, prefer opacity and filter, use hardware acceleration, apply willChange judiciously and use keyframe arrays.
- Layout animation ruleslayoutDependency limits measurements, layout position or size is chosen deliberately, layout groups, layoutId and layoutScroll are covered.
- Scroll animation rulesuseScroll for scroll-linked effects, useSpring smoothing, element tracking, offset configuration and container refs.
- Gesture rulesPrefer whileHover and whileTap to handlers, let gesture variants flow to children, set drag constraints and elasticity, and use onTapCancel.
- Spring and physics rulesPhysics-based springs for interruptibility, damping ratio, mass for weight and the useSpring hook for reactive values.
- SVG and path rulespathLength for line drawing, motion.path and motion.circle, viewBox animation for zoom effects and matching point counts for morphing.
- Exit animation rulesAnimatePresence wraps conditional renders, children get unique keys and mode wait sequences transitions.
Frequently asked questions
What is the framer-motion skill?
It is an experimental skill folder in pproenca/dot-skills. The SKILL.md is a performance index for Framer Motion in React, with prioritized rule categories and a reference file for each rule, meant for writing, reviewing or refactoring animations.
How do I install it?
Clone pproenca/dot-skills and copy skills/.experimental/framer-motion into the place your agent loads skills from. Keep the references and assets subfolders with SKILL.md, because the index links to them for the detailed explanations.
Which AI coding agents can use it?
The repository README says its skills follow the Agent Skills open format. Any agent that loads SKILL.md folders may use this one, but the README does not list supported tools, so check the repository for the install route that suits your agent.
Why is bundle optimization ranked first?
The SKILL.md rates bundle optimization and re-render prevention as the two critical categories. Library weight affects every page load, and its first rule says to use LazyMotion and the m component instead of the full motion component.
What does the skill say about re-renders?
It tells agents to use useMotionValue rather than useState for values that change during animation, derive values with useTransform, keep callbacks stable, define variants outside the component and pass stable animate values.
Does it help with scroll and gesture animation?
Yes. Scroll rules cover useScroll, useSpring smoothing, element tracking, offsets and container refs. Gesture rules favor whileHover and whileTap over handlers, plus drag constraints, elastic dragging and onTapCancel for interrupted gestures.
Is it about style or performance?
Performance. The description calls it optimization guidelines to ensure optimal patterns. It does not set a visual style or a timing system, so use another skill for spring presets and design choices, then apply these rules to check the result.
What license does the framer-motion skill use?
GitHub lists the dot-skills repository under the MIT license. Check the repository again before you redistribute the folder inside a product, because files and licenses can change after this page was written.