animatelisted

Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. ## MANDATORY PREPARATION Invoke /frontend-design — 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 /teach-impeccable first. Additionally gather: performance constraints. --- ## Assess Animation Opportunities Analyze where motion would improve the experience: 1. **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 2. **Understand the context**: - What's the personality? (Playful vs serious, energetic vs calm) - What's the performance budget? (Mobile-first? Complex page?) - Who's the audience? (Motion-sensitive users? Power users who want speed?) - What matters most? (One hero animation vs many micro-interactions?) If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. **CRITICAL**: Respect `prefers-reduced-motion`. Always provide non-animat