animate

Micro-interactions and UI animations improve user experience by providing visual feedback and delight. This Skill helps you identify animation opportunities, plan a motion strategy, and implement entrance animations, state transitions, and feedback moments systematically.

An animation strategy defines a plan for hero moments, feedback, transitions, and delight within a user interface. You can assess areas where motion improves usability, then apply design principles to coordinate timing, easing, and micro-interactions across the interface.

Implementing CSS and JavaScript animations without hurting performance requires coordinating timing and easing with technical constraints. This Skill provides guidance on performance optimization, accessibility considerations, and reduced motion testing to ensure smooth, natural interactions.

Motion design and UI enhancement must support accessibility requirements by respecting reduced motion preferences. This Skill verifies animations for appropriate timing, reduced motion compatibility, and interactivity to ensure the user experience remains accessible and valuable.

You should avoid adding micro-interactions when they fail to provide value, feel unnatural, or hurt performance. This Skill includes a verification process to test animations for smoothness, appropriate timing, and overall value addition before finalizing the user experience.

Technical considerations for UI animation and state transitions include timing, easing functions, CSS and JavaScript implementation, performance constraints, and accessibility. This Skill systematically addresses these factors to ensure micro-interactions enhance rather than disrupt the user experience.