ui-animation

SKILL.md

Design, implement, and review UI animations with accessibility and performance best practices.

Covers CSS transitions, keyframes, Framer Motion, and spring animations with guidance on easing curves, timing (200–300ms standard), and transform-based motion

Enforces prefers-reduced-motion support, touch-device hover handling, and keyboard interaction rules to ensure accessible motion

Provides anti-patterns to avoid: transition: all, layout property animation, permanent will-change, and unmotivated entrance animations

Includes performance optimization rules: animate only transform and opacity, pause off-screen loops, and toggle will-change conditionally

UI Animation

Reference files

File
Read when

references/decision-framework.md
Default: animation decisions, easing, and duration

references/spring-animations.md
Using spring physics, framer-motion useSpring, configuring spring params

references/component-patterns.md
Building buttons, popovers, tooltips, drawers, modals, toasts with animation

references/clip-path-techniques.md
Using clip-path for reveals, tabs, hold-to-delete, comparison sliders

references/gesture-drag.md
Implementing drag, swipe-to-dismiss, momentum, pointer capture

references/performance-deep-dive.md
Debugging jank, CSS vs JS, WAAPI, CSS variables trap, Framer Motion caveats

references/review-format.md
Reviewing animation code — Before/After/Why table and issue checklist

references/contextual-animations.md
Implementing contextual icon swaps, word-level stagger entrances, or fixed-offset exit animations

Core rules