What problem does it solve? UI animation work often ships with sluggish easing, janky layout-property transitions, and motion that feels off without a diagnosable cause. This Skill provides a decision framework, component recipes, and measurement scripts so motion is purposeful, performant, and reproducible. ## Core Features & Use Cases - Motion design and implementation: Decide whether an interaction should animate, pick easing and duration from named curves, and apply recipes for modals, drawers, toasts, popovers, and drag gestures using CSS transitions, WAAPI, or Motion springs. - Animation review and debugging: Audit animation code against ten standards with a Block/Approve verdict, and diagnose symptoms like sluggish, robotic, cheap, or jumpy motion via symptom-indexed tables. - Reverse-engineering from recordings: Extract frames with ffmpeg, track motion with OpenCV, and fit spring or cubic-bezier parameters to reproduce an observed animation as code for CSS, Motion, SwiftUI, React Native, or UIKit. - Use Case: Given a screen recording of an iOS drawer animation, run the extraction and curve-fitting scripts to recover its stiffness, damping, and duration, then emit a matching React Motion implementation plus a handoff spec. ## Quick Start Ask the agent to add a smooth open animation to your dropdown component, or to reverse-engineer the motion from an attached screen recording.
