What is the motion-design-patterns skill?
The motion-design-patterns skill is a folder in the dylanfeltus/skills library. Its SKILL.md gives an agent four tuned spring presets, eight Motion for React patterns, a table of anti-patterns and a decision guide, so UI animation stays subtle, consistent and limited to transform and opacity.
The SKILL.md opens with When to Use, Core Philosophy and Dependencies, then reaches Spring Configurations: four named presets, snappy at stiffness 500 and damping 30, smooth at 300 and 25, gentle at 200 and 20, and bouncy at 400 and 15.
It lives in the design section of dylanfeltus/skills and targets Framer Motion, now published as the motion package, in React projects. The SKILL.md says one tuned spring beats five competing animations.
The eight patterns inside
- Fade and rise entrance, with a warning that subtle 12 to 24px movement feels premium while large values look janky.
- Staggered lists, with timing from 0.1 seconds for a few items down to 0.03 for more than twelve.
- Layout animations and shared layout through layoutId for tab indicators and expanding cards.
- Exit animations with AnimatePresence, in sync, wait and popLayout modes.
- Hover and tap micro-interactions, scroll-triggered reveals, page transitions and number or text transitions.
Rules that keep animation restrained
The philosophy section is blunt: motion should communicate state, hierarchy or feedback. Animate transform and opacity only, never width, height, top, left or margin, and reuse the same spring configs across the whole project.
An anti-pattern table pairs each mistake with a fix. Bouncing everything is swapped for bounce on celebratory moments, per-scroll-event animation for whileInView with once set to true, and custom easing curves for springs.
Who the motion-design-patterns skill suits
Best for
- React projects where the agent keeps producing inconsistent timing from component to component.
- Adding polish to cards, modals, lists and navigation without inventing new easing values each time.
- Teams that want a short decision table mapping a scenario to a pattern and spring.
Not for
- Projects without React. The patterns are written as motion components, so another framework needs a different tool.
- A GSAP-based timeline workflow. See gsap-react for that route.
- Reviewing existing animation for performance problems. For an audit, try fixing-motion-performance.
Use it with UiChemy
These patterns are React code, and a WordPress site built with UiChemy is not a React app. Use the skill for the React prototype or app, then bring the build in with UiChemy AI to WordPress. Click Get Started on uichemy.com.
For a site you edit inside WordPress, UiChemy Composer takes plain-language prompts, so the skill's timing advice works as a brief. Related: web-motion-design and review-animations.
How to install Motion Design Patterns Skill for React Animation
git clone https://github.com/dylanfeltus/skills.gitClone the library
Run
git clone https://github.com/dylanfeltus/skills.git. The skill is the motion-design-patterns folder at the root of the repository.Copy the skill folder
Copy the motion-design-patterns folder into your agent's skills directory. The README's manual route says to copy the folder and have the agent follow the SKILL.md inside it.
Install the animation package
The skill's dependency section says to run
npm install motionin your React project and import from motion/react.
Check that it loaded
Ask the agent to add a staggered entrance to a card grid. It should use a container and item variants with a spring transition and avoid animating width or height.
Key features
- Four spring presetsSnappy, smooth, gentle and bouncy each have a stiffness and damping pair and a stated use, from buttons and toggles to page transitions and notifications.
- Spring rules of thumbHigher stiffness means faster motion, lower damping means more bounce, and for no bounce the SKILL.md says to set damping at or above twice the square root of stiffness.
- Fade and rise entranceA short example fades an element in while it slides up, with an anti-pattern note against large y values.
- Staggered list timing guideThe skill sets staggerChildren by list length and says not to stagger more than about 15 items individually.
- Layout and shared layoutThe layout prop animates between states, layoutId handles tab indicators, and layout set to position is noted as cheaper when size does not change.
- AnimatePresence modesA table explains sync, wait and popLayout and which UI each suits, such as modals, page transitions and lists where items are removed.
- Hover and tap by element typeA table gives whileHover and whileTap values for buttons, cards, icon buttons, links and avatars, and warns against scaling buttons past 1.05.
- Scroll and page transitionswhileInView with viewport once and a negative margin, useScroll with useTransform for parallax, and fast page transitions of about 8 to 12px movement.
- Anti-patterns and decision guideOne table lists mistakes with fixes, and another maps ten scenarios, such as a card appearing or a modal opening, to a pattern and spring.
Frequently asked questions
What is the motion-design-patterns skill?
It is a skill folder in the dylanfeltus/skills library that teaches an agent Framer Motion patterns for React: springs, staggers, layout animations, micro-interactions, scroll effects and page transitions, with spring presets and anti-patterns to keep the result subtle.
How do I install the motion-design-patterns skill?
Clone dylanfeltus/skills and copy the motion-design-patterns folder into the place your agent loads skills from. Then run npm install motion in your React project. Ask for an entrance, a modal transition or a scroll reveal and the agent follows the SKILL.md.
Does it work with Framer Motion or the motion package?
Both. The SKILL.md notes the package was renamed from framer-motion to motion in late 2024, says both work, and calls motion the current one. Its examples import from motion/react, so install that package in your project.
Which AI coding agents can use this skill?
The library README says its skills work with OpenClaw, Claude Code, Cursor and other LLM-based tools. Any agent that loads a SKILL.md folder should follow it. The skill itself is aimed at React code, whichever agent writes it.
Why does the skill insist on transform and opacity only?
The SKILL.md puts performance first and says never to animate width, height, top, left or margin. Its fix is to use scale or layout animations instead. That keeps motion off the properties that force layout work on every frame.
Which spring should I use for a modal?
The decision guide pairs a modal opening and closing with AnimatePresence, a scale transition and the smooth spring, which is stiffness 300 and damping 25. Buttons and tab switches use snappy, and landing page sections use gentle.
Does the skill recommend component libraries?
Yes, a short section points to Magic UI, Motion Primitives and Aceternity UI for animated components such as text reveals and animated borders. It says to check them first when a user wants a specific effect before building from scratch.
What is the difference between this skill and a motion audit skill?
This skill generates animation code from patterns. An audit skill such as improve-animations looks at existing animation and suggests changes. Build with the patterns here, then audit the result if something feels off.