Agentic PlaybookAgentic product lifecycle
mxa-motion
A small named set of UI motion presets, every number from the token scale, applied through the primitive layer's own animation seam, each with a reduced-motion form, and a check that nothing else moves.
- Twelve presets, rise to flip-icon, and the two decisions left to judgement: which one, and whether to animate at all
- Every duration, easing and spring is a token; the springs are generated from Material's numbers as CSS linear() easings
- CSS first on the primitives' own hooks, Motion only for size, indicators, scroll reveal and reorder, and never a copy-in animation library
- A reduced form for every preset: opacity survives, travel does not
- A check that refuses transition: all, animated width or shadow, literal numbers and a missing reduced-motion block, and self-tests against a failing fixture
Works with
The outside tools and connectors this skill drives.
- CSS transitions on Base UI's data attributes· our default
- motion (layout, layoutId, useInView, Reorder)
- scripts/check.mjs and scripts/spring.mjs, built-ins only
The first is what we reach for on our own projects. A project that already uses one of the others keeps it, and the skill works with that instead.