Motion Patterns
Copy-paste animation patterns for React that actually work in production. Covers the stuff you build every week: button states, modals, toasts, page transitions, stagger lists, scroll reveals, and layout animations. Everything is built on motion-foundations tokens, so you're not guessing at durations or defining magic numbers inline. The patterns enforce the AnimatePresence contract properly (key, exit, the whole thing), include accessibility requirements for modals, and come with decision tables for layout vs layoutId and when to use wait vs sync modes. If you're tired of rewriting the same Framer Motion boilerplate and getting exit animations wrong, this gets you there faster.
- skills.sh installs
- 1.6K
- GitHub stars
- 229.1K
- last updated
- Jul 14, 2026
Install
$ npx -y skills add affaan-m/everything-claude-code --skill motion-patterns --agent claude-codeInstalls into .claude/skills of the current project.
Files
Motion Patterns
Copy-paste patterns for the most common UI animation needs.
Every pattern here is built on motion-foundations tokens and springs.
Do not define new duration or easing values here — import them.
When to Activate
- Animating a button, card, modal, or toast notification
- Building list entrances with stagger
- Setting up page transitions in Next.js App Router
- Adding entrance or exit animations to conditional content
- Implementing scroll-reveal, scroll-linked progress, or sticky story sections
- Building expanding cards, accordions, or shared-element transitions
Outputs
This skill produces:
- Accessible, SSR-safe animation for all standard UI components
AnimatePresence-wrapped conditional renders with correct exit behavior- Page transition wrapper component for Next.js App Router
- Scroll-reveal and scroll-linked patterns using
useScroll+useTransform - Layout animation patterns (
layout,layoutId) for expanding and crossfading elements
Principles
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/affaan-m/everything-claude-code
- Category
- Design & UI/UX
- First seen
- Jun 3, 2026
More from affaan-m/everything-claude-code
All 256- Quarkus Patterns1.6K
- Quarkus Security1.6K
- Quarkus Tdd1.6K
- Quarkus Verification1.6K
- Skill Scout1.6K
- Uspto Database1.6K
- Prisma Patterns1.4K
- Blender Motion State Inspection1.3K
- Recsys Pipeline Architect1.3K
- Uncloud1.2K
- React Testing910
- React Performance903
- React Patterns893
- Frontend A11y870
- Marketing Campaign827
- Benchmark Optimization Loop826
- Latency Critical Systems818
- Parallel Execution Optimizer813
- Social Publisher806
- Data Throughput Accelerator805
- Prediction Market Risk Review801
- Recursive Decision Ledger801
- Prediction Market Oracle Research796
- Ito Basket Compare794
Recommended
More Design & UI/UX
frontend-designam-will/codex-skillsCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applicat1.4Kskills.sh installs
qiaomu-mondo-poster-designjoeseesun/qiaomu-mondo-poster-design一句话生成大师级海报、书籍封面、专辑封面和各类设计作品。无需懂PS、配色或艺术史，AI自动选择最佳风格（基于33+位传奇设计师）。支持多平台多比例：公众号封面(21:9)、小红书配图(3:4)、文章配图(16:9)、书籍封面(9:16)、专辑封面(1:1)、电影海报(9:16)。包含AI提示词优化、风格对比、图生图转换1.4Kskills.sh installs
premium-frontend-designkv0906/cc-skillsCreate award-winning, cinematic frontend interfaces that feel ALIVE. Combines 10+ years of creative frontend experience with technical excellence. Specializes i1.4Kskills.sh installs
playwright-visual-testingmanutej/luxor-claude-marketplaceBrowser automation, visual testing, and screenshot validation using Playwright MCP server for accelerated web development. Master visual regression testing, aut1.4Kskills.sh installs
