ui-animation

Overview

UI Animation is a Claude Code skill that provides guidelines and examples for implementing consistent, performant UI motion and animation. It covers core animation principles including timing, easing, accessibility with prefers-reduced-motion, and performance optimization to ensure animations clarify cause/effect relationships and add intentional delight without degrading user experience.

Key Features

• Performance-First Rules - Animate only transform and opacity properties, never layout properties, and avoid transition: all to maintain smooth 60fps animations
• Easing Defaults - Predefined cubic-bezier curves for enter/hover, move, and simple hover interactions that provide consistent, polished motion across the application
• Accessibility Compliance - Built-in guidance for honoring prefers-reduced-motion by disabling transform-based animations and reducing or eliminating motion for users who prefer it
• Spatial and Sequencing - Rules for transform-origin placement at trigger points, dialog/menu scale starting points (0.85-0.9), and stagger reveal timing of 50ms or less
• CSS-First Approach - Prefer CSS animations over JavaScript, using WAAPI or JS only when CSS cannot achieve the desired effect

Who is this for?

This skill is designed for frontend developers and UI designers who need consistent animation guidelines for web applications. It is particularly valuable for teams building design systems or component libraries that require standardized motion patterns with proper accessibility and performance considerations.