animation-motion-design
Installation
SKILL.md
Animation & Motion Design
Patterns for building performant, accessible animations using Motion (formerly Framer Motion, 18M+ weekly npm downloads) and the View Transitions API (cross-browser support in 2026). Covers layout animations, gesture interactions, exit transitions, micro-interactions, and motion accessibility.
Quick Reference
| Rule | File | Impact | When to Use |
|---|---|---|---|
| Layout Animations | rules/motion-layout.md |
HIGH | Shared layout transitions, FLIP animations, layoutId |
| Gesture Interactions | rules/motion-gestures.md |
HIGH | Drag, hover, tap with spring physics |
| Exit Animations | rules/motion-exit.md |
HIGH | AnimatePresence, unmount transitions |
| View Transitions API | rules/view-transitions-api.md |
HIGH | Page navigation, cross-document transitions |
| Motion Accessibility | rules/motion-accessibility.md |
CRITICAL | prefers-reduced-motion, cognitive load |
| Motion Performance | rules/motion-performance.md |
HIGH | 60fps, GPU compositing, layout thrash |
Total: 6 rules across 3 categories