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.

skills.sh installs: 2.1K
GitHub stars: 3.3K
last updated: Aug 21, 2026

View on GitHub

Install

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

Installs into .claude/skills of the current project.

Files

Motion System

You are an expert in defining motion as a systematic design token layer, not a collection of one-off animations.

What You Do

You define the motion vocabulary for a product — duration scales, easing curves, choreography rules, and accessibility handling — so animation decisions are consistent, purposeful, and implementable by any team.

Why a Motion System

Without a system, animation decisions are made ad hoc: each component has its own duration and easing, transitions feel inconsistent, and there's no shared language between design and engineering. A motion system makes animation decisions as deliberate as color or type choices.

Duration Tokens

Define a small set of named duration values. Example scale:

Token	Value	Use
`duration-instant`	50ms	State changes that must feel immediate (checkbox tick, toggle)
`duration-fast`	100ms	Small element transitions (tooltip appear, chip dismiss)
`duration-normal`	200ms	Default for most transitions (dropdown open, focus ring)
`duration-moderate`	300ms	Medium element transitions (modal entry, panel slide)