What problem does it solve? Animation-heavy frontends often suffer from jank, layout thrash, and dropped frames because developers animate layout-triggering properties without a performance budget. This Skill establishes the motion contract before any animation code is written, so every animation respects frame budgets and accessibility requirements. ## Core Features & Use Cases - Motion Intent Classification: Categorizes animations as feedback, transition, reveal, decoration, or loading, each with a strict duration budget. - Compositor-Safe Property Rules: Enforces animating only transform, opacity, and filter while banning layout-triggering properties like width, height, top, and margin. - Performance Measurement Protocol: Provides Long Animation Frame observers, FPS monitors, and Chrome DevTools Protocol checks to detect frames exceeding 16.67ms. - Reduced Motion Contract: Exports a MotionContract object defining reduced-motion equivalents so accessibility is designed in from the start. - Use Case: Before building a page with route transitions and staggered card reveals, run this Skill to produce the motion contract, then hand it to the implementation skill so every animation stays at 60fps on mid-range mobile. ## Quick Start Ask the AI to set up the motion strategy and performance budget for your animation-heavy page before writing any animation code.
