ui-animation - Design purposeful UI animations
Guides the design and implementation of performant UI animations, including micro-interactions, transitions, loading states, and motion patterns.
Tags
Updated: 2026-10-02Capabilities
Typical Inputs
Typical Outputs
What this skill does
- Design motion principles
- Define animation timing
- Select easing functions
- Create micro-interactions
- Animate loading states
- Build page transitions
- Animate list changes
- Optimize animation performance
- Apply FLIP technique
- Implement CSS animations
- Use animation libraries
Inputs
- UI requirements
- Interaction states
- Target platform
- Animation constraints
- Design specifications
Outputs
- Animation specifications
- CSS animation code
- JavaScript animation code
- Motion timing definitions
- Easing configurations
- Performance recommendations