What problem does it solve? Choosing animation durations, easing curves, and enter/exit patterns is inconsistent across projects, and teams often ship janky or inaccessible motion. This Skill codifies motion design fundamentals so every animation follows proven timing, easing, and accessibility rules. ## Core Features & Use Cases - Timing and Easing Rules: Duration tables for micro-interactions, UI transitions, and page transitions, plus easing cheat sheets mapped to CSS, GSAP, Framer Motion, SwiftUI, and Compose. - Accessibility Enforcement: Mandatory prefers-reduced-motion handling with platform-specific APIs for web, SwiftUI, UIKit, and Compose. - Anti-Pattern Guards: Explicit "do not" rules covering layout-property animation, scale-to-zero, ease-in entries, and over-long durations, each with bad/good code pairs. - Use Case: When building a modal in React, load this Skill to get the correct spring config, an AnimatePresence enter/exit recipe, and the reduced-motion fallback in one pass. ## Quick Start Use the motion-principles skill to define the timing, easing, and reduced-motion behavior for the card entrance animation in my React app.
