mirror of https://github.com/dylantarre/animation-principles.git synced 2026-09-19 03:48:46 +08:00

Files

T

Dylan Tarre 747c656abe feat: Initial release of Animation Principles Skill Marketplace

144 skills across 12 categories teaching Disney's 12 Principles of Animation:

- By Domain (web, mobile, games, 3D, data viz...)
- By Thinking Style (physics, timing, narrative...)
- By Role/Persona (developer, designer, director...)
- By Skill Level (beginner → master)
- By Animation Type (loading, hover, transitions...)
- By Emotional Outcome (joy, trust, urgency...)
- By UI Element (buttons, modals, cards...)
- By Industry (fintech, healthcare, SaaS...)
- By Tool/Framework (CSS, GSAP, Framer Motion...)
- By Time Scale (micro 100ms → dramatic 2s+)
- By Principle Focus (deep dive per principle)
- By Problem Type (debugging, performance, a11y...)

Includes:
- Comprehensive README with installation instructions
- Full documentation in /docs with index
- CONTRIBUTING.md with skill writing guidelines
- CLAUDE.md for Claude Code integration
- GitHub issue and PR templates
- MIT License

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

2025-12-30 00:19:52 -08:00

3.0 KiB

Raw Permalink Blame History

Claude Code Integration

This document helps Claude Code understand and use the Animation Principles Skill Marketplace.

What This Repository Contains

This is a skill marketplace with 144 skills teaching Disney's 12 Principles of Animation across different contexts:

12 categories organized by domain, role, tool, emotion, etc.
12 skills per category including a universal fallback
Comprehensive coverage from beginner to master level

Skill Location

Skills are in two locations:

skills/ - Source SKILL.md files (canonical)
docs/ - Rendered markdown for browsing

How to Use Skills

Finding the Right Skill

By what you're building: Check 01-by-domain/ or 07-by-ui-element/
By your role: Check 03-by-role-persona/
By your tool: Check 09-by-tool-framework/
By desired emotion: Check 06-by-emotional-outcome/
By problem to solve: Check 12-by-problem-type/

Skill Naming Convention

Skills use the format: animation-principles:<skill-name>

Examples:

animation-principles:web-motion-design
animation-principles:joy-delight
animation-principles:framer-motion

Universal Fallbacks

Each category has a universal fallback for general use:

universal-fallback (domain)
universal-mindset (thinking style)
universal-practitioner (role)
universal-reference (skill level)
universal-patterns (animation type)
universal-emotion (emotional outcome)
universal-elements (UI element)
universal-industry (industry)
universal-tool (tool/framework)
universal-timing (time scale)
universal-solutions (problem type)

The 12 Principles Quick Reference

When applying animation principles:

Principle	Key Application
Squash & Stretch	Show impact and flexibility
Anticipation	Prepare before action
Staging	Direct attention clearly
Straight Ahead / Pose to Pose	Choose animation approach
Follow Through / Overlapping	Stagger and continue motion
Slow In / Slow Out	Always use easing, never linear
Arc	Curved paths feel natural
Secondary Action	Add supporting movement
Timing	Duration = weight and emotion
Exaggeration	Push for clarity
Solid Drawing	Maintain volume
Appeal	Create charisma

Common Tasks

Adding Animation to UI

Use web-motion-design or css-native for implementation
Use micro-interactions for small moments
Check 06-by-emotional-outcome/ for the right feel

Debugging Animation

Start with implementation-debugging
Check performance-optimization for jank
Use timing-calibration for feel issues

Learning/Teaching

absolute-beginner for first introduction
teaching-others for instruction
11-by-principle-focus/ for deep dives

Testing Commands

This is a documentation-only repository. No build or test commands required.

File Naming

Skill directories: lowercase with hyphens (joy-delight/)
Skill files: SKILL.md (uppercase)
Doc files: <skill-name>.md (lowercase)

3.0 KiB Raw Permalink Blame History