ui-transition-motion

name	ui-transition-motion
description	Use when user asks to design, choose, explain, or implement UI transitions, motion patterns, easing/timing choices, state-change animations, shared-element effects, drill-down navigation, tab/filter/list/detail switching, or vague requests like "make this feel smoother", "more iOS", "more natural", or "animate this UI" that need concrete motion taxonomy and implementation guidance.

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

1. Identify what is changing.
2. Classify transition family.
3. Explain why that family fits.
4. Describe motion behavior in product language.
5. If user wants implementation, map it to concrete APIs for that stack.
6. If motion feels off, diagnose timing, easing, animated properties, and hierarchy before changing style.

Fast Classification