Motion System

This gives you the structure to define animation as a proper design system layer instead of scattering arbitrary durations across your components. You'll build duration scales (instant to deliberate), easing tokens mapped to entry/exit contexts, and choreography rules for staggered sequences. The prefers-reduced-motion handling is global, not per-component, which is the right call. It treats motion decisions like color or spacing choices: deliberate, named, documented. If your product has more than a few engineers touching UI, this prevents the usual mess where every dropdown has a different transition speed and nobody knows why.

Install to Claude Code

npx -y skills add owl-listener/designer-skills --skill motion-system --agent claude-code