Animation Principles - Absolute Beginner — Claude Code skill: the
Walks through the 12 principles of animation in plain words. Useful when you are touching motion in a UI or a game for the first time.
npx skills add dylantarre/animation-principles --skill animation-principles---absolute-beginner -a claude-code
npx skills add dylantarre/animation-principles --skill absolute-beginner -a claude-codeWhat Animation Principles - Absolute Beginner does
The skill covers the twelve tricks Disney animators came up with: squash and stretch, anticipation, staging, straight ahead versus pose to pose, follow through, slow in and slow out, arcs, secondary action, timing, exaggeration, solid drawing and appeal. Each one gets a sentence or two and a homely example — a dropped ball, a car at a traffic light, hair that keeps moving after you stop.
There is no API reference here and no ready-made code. What you get is shared vocabulary: describe what should happen on screen and the agent reaches for the same terms you do. The whole thing is a single SKILL.md file, no scripts, no dependencies.
The author suggests starting with one or two principles rather than all twelve at once. That holds up in practice — when an animation feels off, the cause is usually timing or a missing anticipation, and picking it apart one rule at a time is easier.
What it helps with
- explain to a beginner why an animation looks jittery
- settle on motion terms with your agent
- pick which principle to learn first
- break a jump or an impact into steps
- put into words what feels wrong with motion in a mockup
Example prompts for the agent
- Explain anticipation using a button that opens a menu
- Why does my jump animation look unnatural? Walk me through the principles
- Where do I start if I have never animated anything?
How to install Animation Principles - Absolute Beginner
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill animation-principles---absolute-beginner -a claude-codenpx skills add dylantarre/animation-principles --skill absolute-beginner -a claude-code2Manually: put the files in place
~/.claude/skills/absolute-beginner/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/absolute-beginner/
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill absolute-beginner -a codex2Manually: put the files in place
.agents/skills/absolute-beginner/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill absolute-beginner -a cursor2Manually: put the files in place
.cursor/skills/absolute-beginner/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install dylantarre/animation-principles absolute-beginner2Manually: put the files in place
.github/skills/absolute-beginner/SKILL.md1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill absolute-beginner -a gemini-cli2Platform CLI
gemini skills install https://github.com/dylantarre/animation-principles --path skills/04-by-skill-level/absolute-beginnerManually: put the files in place
.devin/skills/absolute-beginner/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill absolute-beginner -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 - Absolute Beginner
How do I install Animation Principles - Absolute Beginner in Claude?
Run npx skills add dylantarre/animation-principles --skill animation-principles---absolute-beginner -a claude-code. The skill file then lands at ~/.claude/skills/absolute-beginner/SKILL.md.
What does this skill do?
It explains the 12 principles of animation in simple language with everyday examples. The agent leans on them when you discuss motion in a UI or a game.
Do I need any background first?
No, it is written for a complete newcomer. The author suggests starting with one or two principles instead of all twelve.
Source text
SKILL.md · MIT
--- name: Animation Principles - Absolute Beginner description: Use when someone has never heard of animation principles, needs the simplest explanation possible, or is a complete newcomer to animation --- # Your First Look at Animation Magic Animation makes drawings move in ways that feel real and fun. Disney animators discovered 12 tricks that make animation look great. Here they are in simple words: ## 1. Squash and Stretch Things squish when they hit something and stretch when they move fast. Drop a ball - it flattens on the ground, then bounces back round. ## 2. Anticipation Before a big move, there's a small move the other way. Before jumping up, you crouch down first. ## 3. Staging Put important things where people will see them. Like putting the main actor in a spotlight on stage. ## 4. Straight Ahead and Pose to Pose Two ways to draw: either draw every picture in order, or draw the important pictures first and fill in between. ## 5. Follow Through and Overlapping Action When you stop, your hair keeps moving. Different parts move at different times, not all at once. ## 6. Slow In and Slow Out Things speed up when starting and slow down when stopping. Like a car at a traffic light. ## 7. Arc Most things move in curves, not straight lines. Throw a ball - it makes a rainbow shape in the air. ## 8. Secondary Action Little movements that happen along with the main movement. Walking while whistling and swinging your arms. ## 9. Timing How fast or slow something happens changes how it feels. Fast = exciting. Slow = calm or heavy. ## 10. Exaggeration Make things bigger and more dramatic than real life. Cartoon characters can stretch their eyes wide when surprised. ## 11. Solid Drawing Make flat pictures look like they have weight and depth. Things should feel like you could pick them up. ## 12. Appeal Make characters interesting to watch. They should have something special that makes you want to keep looking. ## Remember You don't need to use all 12 at once. Start with one or two. The more you practice, the more natural they become.
© dylantarre · MIT · dylantarre/animation-principles