Motion Design

Add purposeful animation and micro-interactions that enhance UX without compromising performance.

Prerequisites

• Read .agents/design-context.md (see design-context): the style archetype sets motion character (Minimal/Corporate = short, no overshoot; Playful = springs allowed; Luxurious = slower, smooth ease-out).
• If a design system exists, use its transition tokens. The token names below (--duration-*, --ease-*) are the same ones the design-system skill defines.
• Always respect prefers-reduced-motion.

Step 1: Animation Principles for UI

The Three Rules

1. Every animation must have a purpose: Guide attention, provide feedback, show relationships, or convey state change.
2. Faster is almost always better: UI animations should be 100-500ms.
3. Animate what changes: Only animate properties that are actually changing.