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)