Universal Solutions

This is a systematic troubleshooting framework for animation problems, built around Disney's 12 principles. When an animation feels off but you can't pinpoint why, it walks you through each principle with specific problem signs and fixes. The checklist approach is genuinely helpful because animation issues often cluster around timing, easing, and purpose rather than being isolated bugs. The master troubleshooting section at the end is the real gem, covering performance basics like transform-only animations and prefers-reduced-motion. Most useful when you've already built something that doesn't feel right and need structured debugging rather than creative inspiration. The "when to remove animation" section shows appropriate restraint, which is rare in animation guidance.

skills.sh installs: 527
GitHub stars: 146
last updated: Aug 21, 2026

View on GitHub

Install

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

Installs into .claude/skills of the current project.

Files

Universal Animation Solutions

A complete diagnostic framework using all 12 Disney principles.

The 12 Principles Checklist

Run through each principle to diagnose any animation problem:

1. Squash and Stretch

Check: Is there appropriate flexibility? Problem sign: Rigid, lifeless motion Fix: Add subtle scale changes on impact/acceleration

2. Anticipation

Check: Is there buildup before action? Problem sign: Actions feel sudden or surprising Fix: Add small reverse movement or wind-up

3. Staging

Check: Is the important thing clear? Problem sign: Users miss key information Fix: Isolate animated element, reduce competing motion

4. Straight Ahead vs Pose-to-Pose

Check: Is the approach right for the effect? Problem sign: Uncontrolled or too rigid motion Fix: Use keyframes for UI; frame-by-frame for organic