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 list reveals, run this Skill to produce the motion contract, route-level budgets, and an anti-pattern audit checklist that the implementation skill then follows. ## Quick Start Ask the AI to set up the motion strategy and performance budget for your animation-heavy page before writing any animation code.
