Micro Interactions

This applies Disney's 12 animation principles to UI feedback moments like button presses, toggles, checkboxes, and form validation. You get a quick reference table mapping each principle to specific implementations, timing guidelines for different interactions (100ms for hover, 200ms for toggles), and actual CSS examples with cubic-bezier values. The timing reference alone is worth having on hand. It's opinionated about durations and easing functions in a way that saves you from reinventing these decisions on every project. Includes prefers-reduced-motion reminders and practical advice like keeping button squash subtle since this is UI, not cartoons.

Install to Claude Code

npx -y skills add dylantarre/animation-principles --skill micro-interactions --agent claude-code