Design UI animations with timing, easing, and reduced-motion guardrails.
npx skills add https://github.com/lachieh/babytalk --skill animate-lachieh
Please help me install this Agent Skill. Skill: animate Source: https://github.com/lachieh/babytalk/tree/main/.claude/skills/animate Command: npx skills add https://github.com/lachieh/babytalk --skill animate-lachieh
Helps teams improve usability and delight by introducing purposeful UI motion that clarifies interactions and provides feedback, while respecting accessibility constraints.
Describe the target feature and desired user interaction, then ask for a tailored animation plan that respects reduced motion and performance budgets.
High-intent search queries and answers about installing and using this skill.
To design purposeful UI animations, you should define a motion strategy that identifies specific opportunities to clarify interactions, establish a performance budget, and apply appropriate timing and easing to entrance and transition effects.
The best way to add micro-interactions is to specify a single signature animation for the target feature, supported by subtle hover effects and feedback cues that guide user understanding without exceeding your defined motion budget.
Accessible UI motion design respects prefers-reduced-motion by applying guardrails that automatically disable or modify non-essential animations, ensuring feedback cues remain functional for users with motion sensitivities.
Yes, you can use this motion design approach during prototyping to plan page transitions and entrance animations, providing implementation patterns that deliver user delight while maintaining strict accessibility constraints.
You need to specify a motion budget when adding front-end interactions to ensure performance remains in check, balancing the visual feedback of animations and transitions against the application's overall responsiveness.
Adelie-SquadDesign user flows and wireframes from feature specifications and user context.
shige1014-devImplement Disney's 12 animation principles in React with Framer Motion.
ajianazAnalyze and implement Svelte transitions and actions for UI animations.
msichtermanApply React Native and Expo performance best practices to components, lists, animations, and images.
