Universal Patterns

This is the animation foundation you copy into every project. It gives you Disney's 12 principles distilled into a timing scale (100ms for hovers up to 1000ms for celebrations), a set of easing curves that actually work, and base classes for entrances, exits, and state changes. The decision tree at the end is gold: it tells you exactly which easing and duration to pick based on what's happening. Includes proper prefers-reduced-motion handling and the GPU-only rule. Start with their 250ms ease-in-out default when you're unsure, then tune from there. Beats reinventing timing curves every time you animate something.

Install to Claude Code

npx -y skills add dylantarre/animation-principles --skill universal-patterns --agent claude-code