UI Transition Motion

Use this skill to turn vague motion requests into a concrete transition choice.

Core idea: most premium UI motion in product work can be framed as one of three transition families:

• Context Transition: content changes inside same surrounding layout.
• Drill Transition: user moves from broad view into deeper detail.
• Continuity Transition: shared element persists and morphs into next state.

Read references/three-transition-reference.md when you need fuller definitions, examples, prompt snippets, or platform mapping.

Read references/web-motion-principles.md when user needs better timing, easing, performance, or the answer to why does this motion feel wrong?.

Read references/web-pattern-catalog.md when user needs concrete UI motion patterns such as modal open/close, panel reveal, text swap, icon swap, badge pop, page transition, number animation, or card resize.

Workflow