Universal Elements

When you need to animate something that doesn't have its own dedicated skill, this gives you Disney's 12 animation principles adapted for UI work. It's basically a reference card for making any element move well, with specific timing ranges (50-100ms for icons, 300-400ms for modals), easing functions as CSS custom properties, and rules like "never use linear" and "stagger related elements 20-50ms apart." The timing table alone is worth having on hand. Think of it as the fallback when you're animating a custom component or applying motion principles across different element types where the other skills don't quite fit.

Install to Claude Code

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