animatelisted

Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. ## MANDATORY PREPARATION ### Context Gathering (Do This First) You cannot do a great job without having necessary context, such as target audience (critical), desired use-cases (critical), brand personality/tone (playful vs serious, energetic vs calm), and performance constraints. Attempt to gather these from the current thread or codebase. 1. If you don't find *exact* information and have to infer from existing design and functionality, you MUST STOP and {{ask_instruction}} whether you got it right. 2. Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST {{ask_instruction}} clarifying questions first to complete your context. Do NOT proceed until you have answers. Guessing leads to inappropriate or excessive animation. ### Use frontend-design skill Use the frontend-design skill for design principles and anti-patterns. Do NOT proceed until it has executed and you know all DO's and DON'Ts. --- ## 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