Frontend & Design

12 Principles of Animation

by Julien Thibeaut (ui-skills.com) 3.7k GitHub stars

Audit animation code against Disney's 12 principles adapted for the web, outputting file:line findings.

#animation#review#principles#audit

Claude Code Codex

Overview

This skill reviews motion code against Disney's classic 12 principles of animation, adapted for web interfaces, and returns concrete file:line findings. Use it to check whether animations have proper anticipation, follow-through, easing, and staging.

What it is good for

Auditing animation quality principle-by-principle
Reviewing a motion-heavy PR
Improving easing and follow-through
Learning animation fundamentals in context

Install

Install in Claude Code

# Add the marketplace, then install the skill in Claude Code:
/plugin marketplace add ibelick/ui-skills
/plugin install 12-principles-of-animation

# Or install manually into ~/.claude/skills:
git clone https://github.com/ibelick/ui-skills.git
cp -r ui-skills/12-principles-of-animation ~/.claude/skills/12-principles-of-animation

Install in Codex

# Codex reads SKILL.md skills from ~/.codex/skills (auto-detected):
git clone https://github.com/ibelick/ui-skills.git
cp -r ui-skills/12-principles-of-animation ~/.codex/skills/12-principles-of-animation

# Then reference the skill in Codex — it loads on demand.