Motion & Animation

This skill covers motion design for user interfaces — when and why to animate, transitions, micro-interactions, and respecting user preferences for reduced motion.

Use-When

This skill activates when:

• Agent adds animations or transitions to components
• Agent designs micro-interactions (button hover, loading states)
• Agent builds interactive elements with state changes
• Agent needs to respect prefers-reduced-motion
• Agent creates page transitions

Core Rules

• ALWAYS use motion to communicate state changes, not for decoration
• ALWAYS respect prefers-reduced-motion for accessibility
• ALWAYS keep animations short (150-300ms for UI, 300-500ms for page)
• NEVER animate properties that cause layout shifts (width, height)
• PREFER CSS transitions over JavaScript animations when possible

Common Agent Mistakes

• Animating everything (causes distraction and performance issues)
• Not respecting prefers-reduced-motion
• Animating layout-triggering properties (width, height, top, left)
• Using JavaScript animations where CSS would suffice
• Animations that are too slow or too fast

Examples

✅ Correct

// Short, purposeful transitions
<button className="transition-colors duration-200 hover:bg-primary/90">
  Submit
</button>

// Respect reduced motion
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

// Smooth opacity/transform animations
<div className="transition-opacity duration-300 opacity-0 data-[show]:opacity-100" />

❌ Wrong

// Animating layout properties
<div className="transition-all" style={{ width: expanded ? '100%' : '50%' }} />

// No reduced motion support
<button className="animate-pulse">Loading</button>

// Too slow
<button className="transition-all duration-1000">Submit</button>

References

• MDN - CSS Transitions
• prefers-reduced-motion
• Material Design Motion