ui-motion

Files (1)

• SKILL.md

SKILL.md (first lines)

# UI Motion Engineering

Own detailed motion behavior, not overall art direction.

## Decide before animating
Motion should earn its cost by improving feedback, state change, causality, spatial continuity, orientation, or hierarchy. Reject motion that is decorative noise, delays high-frequency actions, or competes with dense operational UI.

## Choose the cheapest correct mechanism
1. CSS transition for simple property changes.
2. CSS keyframes for simple self-contained sequences.
3. Motion when layout continuity, gestures, springs, presence, orchestration, or interruption behavior justify it.

Reuse existing project durations/easings/springs before inventing new ones.

## Interaction principles
- Frequent actions should feel immediate.
- Enter/exit motion should reflect spatial origin when that relationship helps orientation.
- Prefer transform/opacity over layout-thrashing properties when visually equivalent.
- Avoid stacking multiple independent effects on the same interaction.
- Ensure interrupted/reversed transitions do not jump.
- Preserve input responsiveness during animation.

## Accessibility
Respect `prefers-reduced-motion`. Remove or reduce decorative/spatially intense movement while keeping essential state feedback. Never make information available only through motion.

## Review
When reviewing motion, report: purpose, trigger, duration/easing/spring, interruption behavior, reduced-motion behavior, performance risk, and whether the motion should exist at all.

From hersti/ui-engineering, MIT.

More from hersti/ui-engineering