Skip to main content
skill CX Codex

Animation Principles - Troubleshooting — Claude Code skill: fix bad

A skill that diagnoses why an animation feels wrong and points to the principle being misapplied. Useful when the motion reads badly but the cause is unclear.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add dylantarre/animation-principles --skill animation-principles---troubleshooting -a claude-code
npx skills add dylantarre/animation-principles --skill troubleshooting -a claude-code
Open on GitHub

What Animation Principles - Troubleshooting does

The skill acts as a symptom-based diagnostic guide. You describe what feels off — floaty, stiff, unreadable — and get a checklist of what to inspect: spacing, timing, squash and stretch, follow through. Each symptom comes with a short fix.

A separate section covers principle conflicts. Big anticipation kills surprise, heavy follow through softens snappy timing, secondary action can distract from the primary one. You have to choose deliberately. There are last-resort steps too: return to blocking, strip out all overlap and secondary motion, and see whether the primary action holds up alone.

When several principles fail at once, the skill says to fix timing and arcs first. Everything else depends on them, so working in another order often goes nowhere.

What it helps with

  • find out why an animation feels floaty
  • remove stiff, robotic motion
  • make an action readable to the viewer
  • bring a lifeless scene back with secondary action
  • locate the broken arc when nothing obvious is wrong

Example prompts for the agent

  • My character animation feels floaty, help me find the cause
  • The motion looks stiff, which principles should I check
  • Something is off with this animation — run it through the symptoms

How to install Animation Principles - Troubleshooting

1Skills CLI (Vercel)

npx skills add dylantarre/animation-principles --skill animation-principles---troubleshooting -a claude-code
npx skills add dylantarre/animation-principles --skill troubleshooting -a claude-code

2Manually: put the files in place

~/.claude/skills/troubleshooting/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/troubleshooting/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about Animation Principles - Troubleshooting

How do I install Animation Principles - Troubleshooting in Claude?

Run npx skills add dylantarre/animation-principles --skill animation-principles---troubleshooting -a claude-code. The skill file then lands at ~/.claude/skills/troubleshooting/SKILL.md.

What does Animation Principles - Troubleshooting do?

It diagnoses animation by symptom: you describe what feels wrong, and the skill lists the principles to check along with a short fix for each.

What if several principles are failing at once?

The skill advises fixing timing and arcs first. Other principles rest on those two, so a different order of fixes often does not help.

Source text

SKILL.md · MIT
---
name: Animation Principles - Troubleshooting
description: Use when animation feels wrong and you need to diagnose which principle is failing or being misapplied
---

# Animation Troubleshooting Guide

Something's off. Use this to find and fix it.

## Symptom-Based Diagnosis

### "It feels floaty/weightless"
**Check:**
- Slow in/out - Is spacing too even? Add bunching at start/end
- Timing - Need more frames for weight? Fewer for snap?
- Squash/stretch - Impact reaction visible?
- Follow through - Settling properly or just stopping?

**Fix:** Add 2-4 frames to settle. Increase spacing variation. Add impact squash.

### "It feels stiff/robotic"
**Check:**
- Arcs - Are paths too straight?
- Overlap - Is everything moving at once?
- Secondary action - Is it present?
- Anticipation - Too uniform?

**Fix:** Offset timing between body parts. Curve your motion paths. Vary anticipation amounts.

### "I can't tell what's happening"
**Check:**
- Staging - Silhouette clear?
- Anticipation - Is viewer prepared for action?
- Timing - Too fast to read?
- Exaggeration - Key poses pushed enough?

**Fix:** Simplify composition. Add anticipation frames. Extend key poses. Push silhouette.

### "It feels dead/lifeless"
**Check:**
- Secondary action - Present and supporting?
- Overlap - Different parts moving differently?
- Timing - Varied or monotonous?
- Appeal - Character design working?

**Fix:** Layer in secondary actions. Offset everything by 1-3 frames. Vary timing between actions.

### "It feels cartoony when it should be subtle" (or vice versa)
**Check:**
- Exaggeration - Calibrated to style?
- Squash/stretch - Amount appropriate?
- Timing - Snappy vs. naturalistic?
- Anticipation - Size matches style?

**Fix:** Dial exaggeration to match reference. Adjust squash/stretch ratios. Match timing to style guide.

### "Something feels wrong but I can't identify it"
**Check:**
- Arcs - Track every moving part. Find the broken curve.
- Volume - Is squash/stretch preserving mass?
- Twins - Are poses too symmetrical?
- Spacing - Graph your drawings. Find the anomaly.

**Fix:** Often it's one broken arc or inconsistent spacing. Track paths obsessively.

## Principle Conflict Symptoms

**Anticipation vs. Surprise:** Big anticipation kills surprise. Choose intentionally.

**Exaggeration vs. Subtlety:** Can't have both. What does the scene need?

**Follow through vs. Snappiness:** Heavy follow through softens snappy timing. Balance.

**Secondary vs. Primary:** If secondary distracts, remove it regardless of quality.

## Last Resort Fixes

1. Return to blocking. Is the idea clear at the key pose level?
2. Remove all overlap/secondary. Does primary action work alone?
3. Reference check. Compare to reality or quality examples.
4. Fresh eyes. Walk away. Return tomorrow.

If multiple principles are failing, fix timing and arcs first. Everything else depends on them.

© dylantarre · MIT · dylantarre/animation-principles

Similar skills

Everything for Design →

From the same set90

power-confidence A skill that spells out how to animate strength and authority: heavy movement, sudden stops, almost no bounce. Useful for hero sections and premium product showcases. CX Codex +1 495installs universal-patterns Sets baseline durations, easing curves and the 12 animation principles for any motion in an interface. Useful when your agent writes CSS transitions and guesses the timing wrong. CX Codex +1 493installs secondary-action-mastery A skill for adding secondary motion that supports the primary action instead of fighting it. Useful for UI animation and game feel. CX Codex +1 494installs feedback-indicators A skill for confirmation animations: success checkmarks, error shakes, form validation and toasts. Useful when the UI has to answer back clearly. CX Codex +1 493installs Animation Principles - Advanced A skill for animators who already know the fundamentals and want the nuances: invisible squash/stretch, missing anticipation, deliberately broken arcs. CX Codex +1 489installs emotional-disconnect Diagnoses why an animation feels wrong and matches motion to the emotion the moment should carry. Useful when users call your UI cold or annoying. CX Codex +1 488installs state-changes A skill for animating elements that transform in place: toggles, accordions, checkboxes, button states. Useful when an interface needs smooth transitions without enter or exit. CX Codex +1 489installs Animation Principles - Deep Dive A reference skill covering Disney's 12 animation principles with technical detail: deformation ratios, frame counts, arcs, follow through. Useful when the agent needs animation context. CX Codex +1 487installs

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor