Agent skill · design visual · raphaelsalaja
12-principles-of-animation
Audit animation code against Disney's 12 principles adapted for web. Use when reviewing motion, implementing animations, or checking animation quality. Outputs file:line findings.
Why this skill is useful
Adds specific rules and checks for animation quality that the AI wouldn't reliably generate on its own.
What it needs
About 3k tokens when loaded. Last updated 2026-03-17. 32 stars on the source repository.
What this skill does
12 Principles of Animation Review animation code for compliance with Disney's 12 principles adapted for web interfaces. How It Works 1. Read the specified files (or prompt user for files/pattern) 2. Check against all rules below 3. Output findings in file:line format Rule Categories Priority Category Prefix ---------- ---------- -------- 1 Timing timing- 2 Easing easing- 3 Physics physics- 4 Staging staging- Rules Timing Rules timing-under-300ms User-initiated animations must complete within 300ms. Fail: Pass: timing-consistent Similar elements must use identical timing values. Fail: Pass: timing-no-entrance-context-menu Context menus should not animate on entrance (exit only). Fail: Pass: Easing Rules easing-entrance-ease-out Entrances must use ease-out (arrive fast, settle gently). Fail: Pass: easing-exit-ease-in Exits must use ease-in (build momentum before departure). Fail: Pass: easing-no-linear-motion Linear easing should only be used for progress indicators, not motion. Fail: Pass: easing-natural-decay Use exponential ramps, not linear, for natural decay. Fail: Pass: Physics Rules physics-active-state Interactive elements must have active/pressed state with scale transform. Fail: Pass: physics-subtle-deformation Squash/stretch deformation must be subtle (0.95-1.05 range). Fail: Pass: physics-spring-for-overshoot Use springs (not easing) when overshoot-and-settle is needed. Fail: Pass: physics-no-excessive-stagger Stagger delays must not exceed 50ms per item. Fail: Pass: Staging Rules staging-one-focal-point Only one element should animate prominently at a time. Fail: staging-dim-background Modal/dialog backgrounds should dim to direct focus. Fail: Pass: staging-z-index-hierarchy Animated elements must respect z-index layering. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills raphaelsalaja/12-principles-of-animation