frontend-ui-animator

This skill acts as a dedicated frontend animation specialist for modern web projects. It provides a structured workflow to audit, plan, and implement motion design that enhances user experience without sacrificing performance or accessibility. The skill is designed for developers working on Next.js app router projects who need to integrate high-quality, performant animations using Tailwind CSS utilities, Framer Motion, or native CSS keyframes.

• Performs comprehensive animation audits of existing project structures, identifying candidates for hero intros, hover feedback, content reveals, and navigation transitions.

• Provides a phased development approach: analysis and audit, planning and component mapping, technical implementation, and final verification including CLS (Cumulative Layout Shift) and reduced-motion checks.

• Enforces strict performance guidelines, focusing on hardware-accelerated properties like opacity and transform to prevent layout jank or performance degradation.

• Supports accessibility standards by default, ensuring all motion implementations include support for prefers-reduced-motion media queries.

• Offers reusable patterns for staggered children, scroll reveal hooks using IntersectionObserver, and state-driven micro-interactions.

• Integrates seamlessly with project stacks like Framer Motion for complex orchestrations or pure CSS/Tailwind for lightweight, efficient transitions.

• Maintains consistency across the application by documenting animation patterns and utilizing defined Tailwind configuration presets.

• Users should trigger this skill when requesting specific motion designs, such as 'animate page transitions', 'add hover effects', or 'enhance UI with micro-interactions'.

• The expected input is a directive to animate a specific component or section, while the output is a documented audit, an implementation plan, and the corresponding code (CSS, Tailwind, or React hooks).

• Adheres to a core philosophy of restraint, emphasizing that purposeful, meaningful motion is superior to excessive or decorative animation. Developers should ensure the project environment is clean and that existing animation libraries are identified during the initial analysis phase. The skill assumes a base knowledge of React hooks and the Next.js component hierarchy.