dylantarre/animation-principles

Disney's 12 Animation Principles - Claude Code Skill Marketplace

2 stars1 forksUpdated Dec 30, 2025
npx skills add dylantarre/animation-principles

README

Animation Principles Skill Marketplace

Give Claude the superpower of a Disney animator.

A comprehensive collection of 144 Claude Code skills that teach Disney's 12 Principles of Animation and ways to apply them across every context, tool, and scenario imaginable.

Skills Categories License


What is This?

This is a skill marketplace for Claude Code that transforms Claude into a Disney animation expert. Whether you're building UI micro-interactions, game animations, loading states, or complex motion sequences, these skills provide contextual guidance rooted in the timeless principles that made Disney animation legendary.

There are 12 sets of 12 skills each. Use this to give Claude animation powers in any scenario or to learn more yourself.

The 12 Principles

#PrincipleWhat It Does
1Squash & StretchShows weight and flexibility through deformation
2AnticipationPrepares the viewer for what's coming
3StagingDirects attention to what matters
4Straight Ahead / Pose to PoseTwo approaches to creating movement
5Follow Through / OverlappingParts move at different rates
6Slow In / Slow OutNatural acceleration and deceleration
7ArcOrganic curved motion paths
8Secondary ActionSupporting movements that reinforce
9TimingSpeed conveys weight and emotion
10ExaggerationPush beyond reality for clarity
11Solid DrawingMaintain volume and consistency
12AppealCharisma that draws viewers in

Installation

Claude Code Plugin

Add to your Claude Code settings:

{
  "plugins": [
    "animation-principles@github:dylantarre/animation-principles"
  ]
}

Manual Installation

# Clone to your Claude plugins directory
git clone https://github.com/dylantarre/animation-principles.git \
  ~/.claude/plugins/animation-principles

Direct Use

You can also reference skills directly in conversations:

Use the animation-principles:joy-delight skill for this celebration animation

Skill Categories

By Application Domain

SkillBest For
web-motion-designCSS/JS web animations
mobile-touchTouch gestures, mobile patterns
game-developmentGame UI and characters
data-visualizationCharts and data storytelling
micro-interactionsSmall, delightful moments

By Role

SkillBest For
frontend-developerCode-first implementation
motion-designerProfessional motion design
game-designerInteractive game motion
creative-directorHigh-level direction

By Tool/Framework

SkillTechnology
css-nativePure CSS animations
framer-motionFramer Motion (React)
gsap-greensockGSAP/GreenSock
react-springReact Spring
lottie-bodymovinLottie animations

By Emotional Outcome

SkillCreates
joy-delightHappiness and surprise
trust-reliabilityUser confidence
urgency-actionImmediate action
elegance-sophisticationPremium feel

By Skill Level

SkillLevel
absolute-beginnerFirst introduction
intermediateWorking knowledge
expertProfessional mastery
teaching-othersHow to teach

View all 144 skills →


Quick Start

New to Animation?

Use animation-principles:absolute-beginner

Frontend Developer?

Use animation-principles:frontend-developer

Need a Specific Framework?

Use animation-principles:framer-motion

Debugging Animation Issues?

Use animation-principles

...
Read full README

Publisher

dylantarredylantarre

Statistics

Stars2
Forks1
Open Issues0
LicenseMIT License
CreatedDec 30, 2025