What problem does it solve? Adding animations from memory or generic presets produces inconsistent, slow, or inaccessible interfaces. This Skill enforces a disciplined Inspect → Extract → Translate → Implement → Verify workflow so every animation has a defined purpose, respects performance budgets, and honors reduced-motion preferences. ## Core Features & Use Cases - Motion Gate & Taxonomy: Classify each animation by purpose (feedback, continuity, orientation, attention, progress, expression) and by type (state transition, shared element, gesture, scroll-linked) before writing code. - Reference-Driven Extraction: Inspect real production interfaces in a browser to extract motion relationships—triggers, temporal structure, spatial continuity, interruption behavior—rather than copying arbitrary durations. - Performance & Accessibility Gates: Prioritize transform/opacity animations, define reduced-motion substitutions, and verify rendered output across viewports and input types. - Use Case: When building a card-to-detail transition in a React app, use this Skill to inspect two production references, derive semantic motion tokens like --motion-duration-short, implement the shared-element transition, and verify reduced-motion and touch behavior. ## Quick Start Use the motion-system skill to design and implement the page transition and hover feedback animations for my dashboard, verifying performance and reduced-motion behavior.
