CSS Animation & Micro-Interaction Engine

The problem

Static websites feel unfinished and fail to guide user attention. Writing performant, accessible CSS keyframes and stateful transitions from scratch is tedious and often results in inconsistent timing across a project.

What it does

• Generates production-ready CSS for six categories including hover effects, scroll reveals, and loading states.
• Builds stateful UI transition logic for accordions, modals, tabs, and drawers using optimized grid and transform properties.
• Automatically synchronizes motion with your existing design tokens or provides sane fallbacks for colors and timing.
• Includes a lightweight vanilla JS observer for scroll-triggered entrance animations.

Frameworks & tools

Framework-agnostic. Works with React, Vue, Tailwind CSS, or plain HTML. Uses standard CSS custom properties and vanilla JavaScript.

Why this beats prompting it yourself

General LLMs often overlook accessibility and performance. This skill enforces prefers-reduced-motion resets, keyboard-friendly focus states, and hardware-accelerated transforms. It ensures every animation follows consistent easing curves rather than random duration values.

Use cases

• Applying staggered entrance animations to a feature grid or list.
• Adding shimmer skeleton states to content loaders during async data fetching.
• Creating polished hover-lift and glow effects for pricing cards and CTA buttons.
• Implementing accessible, animated navigation drawers and mobile menus.

Known limitations

Requires an IntersectionObserver-compatible browser for scroll-reveal features, though it fails gracefully by showing content statically.