| name | animate |
| description | Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive. |
| version | 2.1.1 |
| argument-hint | [target] |
Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight.
MANDATORY PREPARATION
Invoke $impeccable — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow the protocol before proceeding — if no design context exists yet, you MUST run $impeccable teach first. Additionally gather: performance constraints.
Assess Animation Opportunities
Analyze where motion would improve the experience:
-
Identify static areas:
- Missing feedback: Actions without visual acknowledgment (button clicks, form submission, etc.)
- Jarring transitions: Instant state changes that feel abrupt (show/hide, page loads, route changes)
- Unclear relationships: Spatial or hierarchical relationships that aren't obvious
- Lack of delight: Functional but joyless interactions
- Missed guidance: Opportunities to direct attention or explain behavior
