12 Principles Of Animation

Audits your animation code against Disney's 12 principles adapted for web interfaces. It scans CSS and component files for violations like transitions over 300ms, missing active states on buttons, linear easing on motion, or excessive stagger delays. The output is clean file:line findings you can action immediately, organized into timing, easing, physics, and staging categories. What's useful here is the opinionated ruleset: context menus shouldn't animate in, entrances need ease-out while exits need ease-in, and scale transforms should stay between 0.95 and 1.05. If you're building interfaces where animation quality matters and want programmatic checks instead of just eyeballing it, this gives you specific guard rails.

Install to Claude Code

npx -y skills add raphaelsalaja/skill --skill 12-principles-of-animation --agent claude-code