Description
motion-patterns is an agent skill from the ECC collection by affaan-m, listed on skills.sh. It is a set of copy-paste animation patterns for the most common UI motion needs in React and Next.js: buttons, cards, modals and toasts, staggered list entrances, page transitions in the Next.js App Router, entrance and exit animations for conditional content, scroll reveals, scroll-linked progress and sticky story sections, and expanding cards, accordions and shared-element transitions. Every pattern is built on the tokens and springs defined in motion-foundations, and the skill says not to define new duration or easing values inside it, but to import them instead. It applies when an agent is adding an animation to a component or setting up transitions in an app, and it is the everyday counterpart to motion-advanced, which covers the more complex cases. A skill is a SKILL.md file of instructions that an AI agent loads when a task calls for it. It is free and open source, and the skills.sh listing shows all three security audits passing.…
Highlights
- Copy-paste patterns for common components
- Stagger, modal and toast animations
- Next.js App Router page transitions
- Scroll reveals and shared-element transitions
Ratings & Reviews
No ratings yet
Be the first to rate motion-patterns.
People also visit
motion-foundations
Motion tokens, spring presets, performance rules, device adaptation
motion-patterns FAQ
What does the motion-patterns skill do?
It supplies ready-made animation patterns for common UI needs in React and Next.js, such as modals, toasts, list stagger and page transitions.
Where do its timing values come from?
From motion-foundations. The skill says not to define new duration or easing values here.
How is it different from motion-advanced?
motion-patterns covers everyday patterns, while motion-advanced covers drag, text, SVG and imperative sequences.
How do I install it?
Run: npx skills add https://github.com/affaan-m/ecc --skill motion-patterns
Is it free?
Yes. It is free and open source.
Are there security findings?
The skills.sh listing shows Gen Agent Trust Hub, Socket and Snyk all passing.
What are the best motion-patterns alternatives?
Popular alternatives to motion-patterns include motion-advanced, motion-ui and frontend-a11y. See all motion-patterns alternatives