What problem does it solve? Animation-heavy frontends often suffer from jank, layout thrashing, and dropped frames because developers animate layout-triggering properties without a performance strategy. 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 forbidding layout-triggering properties like width, height, top, and margin. - Performance Measurement Protocol: Provides LoAF API observers, FPS monitors, and Chrome DevTools Protocol integration to detect frames exceeding 16.67ms. - Reduced Motion Contract: Exports a typed MotionContract object defining reduced-motion equivalents that implementation skills must follow. - Use Case: Before building a page with staggered card reveals and modal transitions, run this Skill to set the 60fps budget, cap stagger counts, and produce the motion contract that the implementation phase codes against. ## Quick Start Ask the AI to set up the motion strategy and performance budget for your animation-heavy page before writing any animation code.
