julianromli/ai-skills

Overview

This skill analyzes and implements purposeful, performant UI animations for Next.js + Tailwind + React projects. It focuses on high-impact moments—hero intros, hover feedback, content reveals, and page transitions—while preserving accessibility and performance. Use it to add, audit, or standardize motion across a codebase.

How this skill works

The skill scans project structure (app/ and components/) and inspects Tailwind configuration and installed animation libraries. It produces an animation audit, maps animation patterns to components with trigger types, and implements changes by extending Tailwind, adding reduced-motion support, and creating small reusable hooks when needed. Final verification includes visual QA, reduced-motion testing, and performance checks to prevent layout shifts.

When to use it

• When you want to add animations to pages or components
• To improve micro-interactions like hover and click feedback
• When introducing scroll reveal or staggered content animations
• To create smooth page transitions and navigation continuity
• When auditing existing motion for accessibility and performance

Best practices

• Prioritize key moments: hero, hover, content reveal, background, navigation
• Animate only transform and opacity; avoid animating layout properties
• Respect prefers-reduced-motion and add a global reduced-motion rule
• Start with CSS/Tailwind for low-cost effects; use Framer Motion/GSAP only for complex needs
• Implement IntersectionObserver-based scroll reveals and stagger children for rhythm

Example use cases

• Add a hero intro animation with staggered children on page load using Tailwind keyframes
• Implement hover micro-interactions for buttons and cards with transform+opacity
• Create a useScrollReveal hook to animate list items as they enter the viewport
• Add page transitions with Framer Motion for spatial continuity between routes
• Extend tailwind.config to include custom keyframes and animation utilities with reduced-motion fallback