Universal Tool

This is a reference guide for Disney's 12 animation principles that you can apply regardless of whether you're working in CSS, JavaScript, Swift, or any other framework. It gives you concrete timing values (micro-interactions at 100-200ms, page transitions at 400-600ms), easing recommendations (ease-out for entrances, ease-in for exits), and implementation patterns for each principle like squash and stretch or follow through. The checklist at the end is genuinely useful before you ship. It's framework-agnostic by design, so you're trading specific code examples for universal concepts. Best used as a quick reference when you know something feels off about your animation but can't pinpoint why.

Install to Claude Code

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