Analyze UI features and plan purposeful animations and micro-interactions.
npx skills add https://github.com/range-et/slate --skill animate-range-et
Please help me install this Agent Skill. Skill: animate Source: https://github.com/range-et/slate/tree/main/.cursor/skills/animate Command: npx skills add https://github.com/range-et/slate --skill animate-range-et
Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight.
Apply frontend-design principles and confirm the DOs and DON'Ts before proceeding.
High-intent search queries and answers about installing and using this skill.
To add micro-interactions to a UI feature, analyze the interface to strategically implement purposeful animations that communicate state changes, provide user feedback, and create visual delight.
Motion design in frontend interfaces is used to communicate state changes and enhance feedback. It applies to interaction reviews to ensure animations provide understanding rather than just decoration.
Plan a consistent animation plan by identifying motion opportunities within a feature, then structuring entrance, feedback, and transition animations that respect performance and accessibility constraints.
Yes, you must consider accessibility when adding animations to product design. The implementation plan requires adhering to reduced motion principles to accommodate users sensitive to movement.
The best way to structure motion design for state changes is applying frontend-design principles to evaluate DOs and DON'Ts, ensuring animations are cohesive and purposefully planned.
cenjiePlan UX and UI through a structured discovery interview and design brief synthesis.
juanelojgaPlan and implement accessible animations and micro-interactions in front-end codebases.
ThejanaJayalathStandardize UI motion patterns and animation logic for React and Next.js applications.
Ender-Wiggin2019Plan and implement CSS and JavaScript animations across UI interaction categories.
