motion-patterns
Production-ready animation patterns for React / Next.js — button, modal, toast, stagger, page transitions, exit animations, scroll, and layout — built on motion-foundations tokens and springs.
Security Assessment
About motion-patterns
motion-patterns is a library of production-ready animation patterns for React and Next.js, covering buttons, cards, modals, toasts, staggered list entrances, App Router page transitions, exit animations, scroll-reveal and scroll-linked effects, and layout transitions. Every pattern is built on shared motion-foundations tokens and springs rather than ad-hoc duration or easing values.
The skill is opinionated about correctness and accessibility: it requires conditional renders to be wrapped in AnimatePresence with a key, insists that exit animations be defined alongside enter animations, uses mode="wait" for page transitions, bounds stagger intervals, and mandates that modals include a focus trap, Escape-to-close, scroll lock, and the correct dialog ARIA roles. A decision table maps each UI situation to the right primitive (AnimatePresence, stagger, page-transition wrapper, layout, layoutId, whileInView, useScroll + useTransform).
It is aimed at frontend engineers building polished, SSR-safe motion in React/Next.js apps who want consistent, token-driven copy-paste patterns instead of reinventing animation timing per component.
FAQ
What UI elements does it cover?
Buttons, cards, modals, toasts, staggered lists, Next.js App Router page transitions, exit animations, scroll-reveal / scroll-linked effects, and layout (expand/crossfade) transitions.
What are its main rules?
Wrap conditional renders in AnimatePresence with a key, always define exit alongside initial+animate, use mode='wait' for page transitions, keep stagger between 0.05s and 0.10s, and give modals a focus trap, Escape close, scroll lock, and dialog ARIA roles.
Where do timing values come from?
From motion-foundations tokens and springs — the skill forbids inline duration/easing numbers so animations stay consistent across the app.
Is it framework-specific?
Yes. It targets React and Next.js (App Router) and assumes SSR-safe, accessible implementations.
Install motion-patterns
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
affaan-m/everything-claude-code