Motion design principles, when to animate, transitions, and accessibility. Use when adding animations, micro-interactions, or ensuring accessibility for motion.
This skill covers motion design for user interfaces — when and why to animate, transitions, micro-interactions, and respecting user preferences for reduced motion.
This skill activates when:
// 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" />
// 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>