Plan and implement UI animations for web frontend components.
npx skills add https://github.com/YuDefine/nuxt-supabase-starter --skill animate-yudefine
Please help me install this Agent Skill. Skill: animate Source: https://github.com/YuDefine/nuxt-supabase-starter/tree/main/.claude/skills/animate Command: npx skills add https://github.com/YuDefine/nuxt-supabase-starter --skill animate-yudefine
This feature-animator skill helps designers and developers plan and implement purposeful UI animations that improve usability, provide feedback, and create delightful experiences.
Tell me which feature to animate and any constraints, and I will propose a tailored animation plan.
High-intent search queries and answers about installing and using this skill.
To add purposeful UI animations, you identify entrance opportunities, plan micro-interactions, and implement state transitions to guide user attention while providing clear status feedback.
The best way to plan micro-interactions is to define configurable timing and easing guidelines for components like buttons, forms, modals, and navigation to convey status and guide user attention.
To respect prefers-reduced-motion accessibility requirements, you apply accessibility-conscious guidelines that deliver meaningful motion feedback while automatically disabling or adjusting animations for sensitive users.
To implement state transitions within performance budgets, you use GPU-accelerated transforms for your frontend motion design to ensure smooth entrance animations without degrading web application usability.
You need configurable timing and easing guidelines when implementing UI animations across frontend features to ensure the motion design consistently enhances usability and creates delightful experiences.
letxbrace-droidGenerate React or Next.js frontend UI with Tailwind styling and interaction rules.
CatsofsufferingPlan and implement UI animations with timing, easing, and reduced-motion fallbacks.
JupiterTheWarlockPlan and implement UI animations within accessibility and performance constraints.
FlintmereSpecify accessible motion specs for Flintmere surfaces with reduced-motion variants.
