Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →asymmetric-al/motion
Implement smooth, accessible animations with motion/react (Framer Motion) in React.
Passed 22 of 22 test cases with the skill, and 3 of 22 without it.
and 21 more in the full report
19 fixed3 passed either way0 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 19 test cases the skill fixed. Same model, same prompt, with and without the skill.
Implement a React section wrapper that fades in children on mount. If the user has OS-level reduced motion enabled, it should immediately show the content without spatial motion or vertical translations.
| Checked | Without skill | With skill |
|---|---|---|
| Calls the useReducedMotion hook | Missed | Passed |
| Imports useReducedMotion from motion/react | Missed | Passed |
The instructions your model reads when the skill loads.
Name: motion
Purpose: Implement smooth, accessible animations with motion/react in React.
Use this skill whenever adding animations, gestures, or layout transitions.
Applies when: Using motion/react (motion, AnimatePresence, useScroll, etc.).
Do not use when: No animations are needed or the component is strictly server-rendered.
'use client'; keep client islands small.AnimatePresence for enter/exit, layout for layout, whileHover/whileTap for gestures.useReducedMotion().LazyMotion for larger motion surfaces.'use client' boundary.'use client' only where neededAnimatePresence wraps conditional UIlayouttest cases passed, vs 3 / 22 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.