12-principles-of-animation

Point the Skill at your animation files or provide a file pattern, and it checks the code against 14 rules covering timing, easing, physics, and staging. Findings are reported in file:line format with rule IDs so you can jump directly to each violation.

It checks timing rules like the 300ms limit for user-initiated animations, easing rules like ease-out for entrances, physics rules like subtle scale deformation between 0.95 and 1.05, and staging rules like dimming modal backgrounds.

Yes, the rules include TSX examples using Framer Motion patterns such as motion.div, whileTap, staggerChildren, and spring transitions. It flags issues like excessive stagger delays over 50ms and easing used where springs are needed for overshoot.

Yes, CSS transitions and keyframe animations are covered. It checks transition durations, timing functions like linear versus ease-out, missing :active states on interactive elements, and z-index layering for animated elements.

The audit applies fixed thresholds such as 300ms timing and 50ms stagger limits, so context-specific motion decisions may need human judgment. It detects code-level patterns but cannot evaluate how the animation actually feels when rendered.