Plan and implement CSS and JavaScript animations for UI features.
npx skills add https://github.com/thnakon/babybib-v2 --skill animate-thnakon
Please help me install this Agent Skill. Skill: animate Source: https://github.com/thnakon/babybib-v2/tree/main/.agents/.claude/skills/animate Command: npx skills add https://github.com/thnakon/babybib-v2 --skill animate-thnakon
This Skill helps improve usability and delight by adding purposeful animations, micro-interactions, and motion effects to features.
Invoke the animate skill with the target feature you want to enhance.
High-intent search queries and answers about installing and using this skill.
To plan UI animations and micro-interactions, you first assess opportunities where motion improves usability, then create a strategy covering hero moments, feedback layers, transition layers, and delight layers.
The best way to implement state transitions and micro-interactions is systematically across entrance animations, navigation flow, and feedback guidance using appropriate CSS or JavaScript techniques for timing and easing.
Verify motion design quality by testing animations for smoothness, natural feel, appropriate timing, and interaction value, while ensuring compliance with reduced motion accessibility requirements.
Add micro-interactions to improve usability and user experience when you need to provide feedback, guide user interactions, or create deliberate delight moments that enhance feature functionality without causing distraction.
Adding animation to features requires knowledge of motion design principles, anti-patterns, and the Context Gathering Protocol to ensure animations are purposeful, performant, and technically appropriate for the UI/UX workflow.
Common animation anti-patterns to avoid when enhancing user experience include inappropriate timing, unnatural easing curves, non-performant technical implementation, and ignoring reduced motion accessibility constraints during quality verification.
ydnikolaevExtract project information through structured stakeholder interviews into a discovery brief.
deomiarnAutomate Framer Motion micro-animations for section reveals, staggered lists, and hover interactions.
DanielV-94Sequence GSAP tweens with timelines, position parameters, and labels.
modu-aiAnalyze user experience issues via heuristic evaluation, accessibility review, and user flow analysis.
