Animation Principles - Quick Start — Claude Code skill
A five-minute reference guide covering the 12 classic Disney animation principles. Useful when an agent needs a rapid refresher on motion and timing.
npx skills add dylantarre/animation-principles --skill animation-principles---quick-start -a claude-code
npx skills add dylantarre/animation-principles --skill quick-start -a claude-codeWhat Animation Principles - Quick Start does
This skill injects a concise summary of the twelve animation rules codified by Disney animators in the 1930s. Each concept receives roughly thirty seconds of explanation, covering fundamentals like squash and stretch, staging, and exaggeration.
The guide organizes concepts into four practical buckets: moving right, feeling alive, reading clearly, and staying compelling. This layout helps the assistant immediately map a motion problem to the right mechanic, such as secondary action or overlapping motion.
Only one exercise is included for hands-on practice: a bouncing ball. It tests four core elements at once, covering timing, arcs, squash and stretch, along with slow in and slow out.
What it helps with
- Review all twelve traditional animation principles in under five minutes
- Categorize motion principles into four distinct visual goals
- Diagnose mechanical movement using arcs and slow in and out
- Study core dynamics through the bouncing ball exercise
Example prompts for the agent
- "List all 12 animation principles and explain their four reference groups."
- "Which principles help make an action read clearly to the viewer?"
- "Explain how a bouncing ball demonstrates timing and squash and stretch."
How to install Animation Principles - Quick Start
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill animation-principles---quick-start -a claude-codenpx skills add dylantarre/animation-principles --skill quick-start -a claude-code2Manually: put the files in place
~/.claude/skills/quick-start/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/quick-start/
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill quick-start -a codex2Manually: put the files in place
.agents/skills/quick-start/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill quick-start -a cursor2Manually: put the files in place
.cursor/skills/quick-start/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install dylantarre/animation-principles quick-start2Manually: put the files in place
.github/skills/quick-start/SKILL.md1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill quick-start -a gemini-cli2Platform CLI
gemini skills install https://github.com/dylantarre/animation-principles --path skills/04-by-skill-level/quick-startManually: put the files in place
.devin/skills/quick-start/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill quick-start -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about Animation Principles - Quick Start
How do I install Animation Principles - Quick Start in Claude Code?
Run npx skills add dylantarre/animation-principles --skill quick-start -a claude-code. Alternatively, place the file directly at ~/.claude/skills/quick-start/SKILL.md.
What does Animation Principles - Quick Start cover?
It provides a 5-minute reference sheet detailing the 12 Disney animation principles. Each rule features a short explanation and maps into a functional reference category.
What starter exercise does this guide recommend?
The skill recommends animating a bouncing ball. That single exercise trains timing, arcs, slow in and out, and squash and stretch simultaneously.
Source text
SKILL.md · MIT
--- name: Animation Principles - Quick Start description: Use when someone needs a rapid overview of all 12 animation principles in under 5 minutes --- # 12 Animation Principles in 5 Minutes The Disney animators codified these principles in the 1930s. They still define quality animation today. ## The Principles (30 seconds each) **1. Squash and Stretch** Objects compress on impact, elongate in motion. A bouncing ball flattens when it hits ground. Gives life and flexibility. **2. Anticipation** Wind-up before action. Crouch before jump. Arm back before throw. Prepares the viewer for what's coming. **3. Staging** Present ideas clearly. One idea per shot. The viewer should never wonder where to look. **4. Straight Ahead / Pose to Pose** Two animation methods. Straight ahead: draw frame by frame for fluid, spontaneous motion. Pose to pose: draw key frames first for controlled, planned action. **5. Follow Through / Overlapping Action** Things don't stop all at once. Hair keeps moving after head stops. Different parts move at different rates. **6. Slow In and Slow Out** Movement accelerates and decelerates. More drawings at start and end, fewer in middle. Creates natural weight. **7. Arc** Natural motion follows curved paths. Arms swing in arcs. Heads turn in arcs. Straight lines feel robotic. **8. Secondary Action** Supporting movements that add richness. Walking while whistling. Talking while gesturing. Enhances without distracting. **9. Timing** Number of frames = speed and weight. Fewer frames = faster/lighter. More frames = slower/heavier. **10. Exaggeration** Push reality further for impact. Bigger expressions, more dynamic poses. Animation isn't reality - it's reality enhanced. **11. Solid Drawing** Three-dimensional thinking. Weight, balance, anatomy. Even 2D characters should feel like they have volume. **12. Appeal** Charisma in design. Characters should be interesting to watch. Clear shapes, good proportions, distinctive features. ## Quick Reference Groups **Make it move right:** Timing, Arcs, Slow In/Out, Squash/Stretch **Make it feel alive:** Follow Through, Overlapping, Secondary Action **Make it read clearly:** Staging, Anticipation **Make it compelling:** Appeal, Exaggeration, Solid Drawing ## The Only Exercise You Need to Start Animate a bouncing ball. It teaches Timing, Squash/Stretch, Arcs, and Slow In/Out simultaneously.
© dylantarre · MIT · dylantarre/animation-principles