Frontend Ui Animator

What it does

This skill helps AI agents implement purposeful and performant animations within frontend user interfaces to enhance the user experience. It focuses on key moments like hero intros, hover feedback, content reveals, and navigation transitions, prioritizing animation where it adds value without overwhelming users. The skill guides a phased workflow for analyzing existing code, planning animations, implementing them with performance considerations, and verifying their effectiveness.

When to use it

• When you need to add subtle but impactful animations to a frontend application.
• To improve the visual feedback of interactive elements like buttons or links.
• For creating engaging hero sections or content reveals on landing pages.
• To guide user attention and reduce cognitive load through animated transitions.
• During frontend development workflows where UI enhancements are desired.

Key capabilities

• Animation Audit: Scans project structure to identify potential animation candidates.
• Implementation Planning: Maps animations to components, determines triggers (load, scroll, hover, click), and estimates effort.
• Tailwind Integration: Extends Tailwind configurations with custom keyframes and utilities.
• Accessibility Considerations: Includes support for prefers-reduced-motion.
• Performance Optimization: Provides guidance on best practices, such as using transforms and opacity for animations while avoiding animating layout properties.
• Reusable Hooks: Creation of hooks like useScrollReveal to simplify animation implementation.

Example prompts

• "Analyze the frontend project at [repository URL] and identify components suitable for hero intro animations."
• "Create an implementation plan for adding hover feedback animations to buttons in the 'components/Button' directory."
• "Extend the Tailwind configuration with a keyframe animation called 'fade-slide-in'."

Tips & gotchas

• The skill follows a phased workflow (Analyze, Plan, Implement, Verify) that should be completed sequentially.
• Prioritize animations carefully; not every element needs an animation.
• Pay attention to performance guidelines – avoid animating layout properties like margin or height.