universal-practitioner — Claude Code skill: Disney's 12 animation
A skill that maps Disney's 12 animation principles onto interfaces, writing and product work, not just cartoons.
npx skills add dylantarre/animation-principles --skill universal-practitioner -a claude-codeWhat universal-practitioner does
The skill walks through all 12 principles and turns each into a general rule. Squash and stretch signals that something responds to force. Anticipation prepares the viewer before a change. Staging asks for one clear idea at a time. A table then lists cross-domain uses: writing, presentations, product, leadership, teaching, sales, design.
Everything lives in a single SKILL.md. The agent reaches for it when you need a broad read on animation principles in any context and for any role, rather than a role-specific take.
Handy when you ask an agent to make a UI feel alive and get twelve bullet points with no link to your actual screen. The skill gives you a frame, not timing values.
What it helps with
- explain why a button should react to a click
- smooth a transition between two screen states
- pick between open prototyping and tight structure
- trace how one change ripples through a system
- make the key point stand out by cutting noise
Example prompts for the agent
- Apply the animation principles to this screen — where is anticipation or follow through missing?
- Review this transition for slow in and slow out. What should change?
- Use universal-practitioner to critique the onboarding flow
How to install universal-practitioner
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill universal-practitioner -a claude-code2Manually: put the files in place
~/.claude/skills/universal-practitioner/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/universal-practitioner/
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill universal-practitioner -a codex2Manually: put the files in place
.agents/skills/universal-practitioner/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill universal-practitioner -a cursor2Manually: put the files in place
.cursor/skills/universal-practitioner/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install dylantarre/animation-principles universal-practitioner2Manually: put the files in place
.github/skills/universal-practitioner/SKILL.md1Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill universal-practitioner -a gemini-cli2Platform CLI
gemini skills install https://github.com/dylantarre/animation-principles --path skills/03-by-role-persona/universal-practitionerManually: put the files in place
.devin/skills/universal-practitioner/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add dylantarre/animation-principles --skill universal-practitioner -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 universal-practitioner
How do I install universal-practitioner in Claude?
Run npx skills add dylantarre/animation-principles --skill universal-practitioner -a claude-code. The skill file lands at ~/.claude/skills/universal-practitioner/SKILL.md.
What does universal-practitioner do?
It lays out Disney's 12 animation principles and shows how to apply them outside animation: in writing, presentations, product decisions and design.
Is this skill only about animation?
No. It includes a cross-domain application table, and its meta-principle comes down to whether a choice serves the person experiencing it.
Source text
SKILL.md · MIT
--- name: universal-practitioner description: Use when applying animation principles in any context, for any role, or when a general understanding of Disney's 12 principles is needed. --- # Universal Practitioner: Animation Principles for Everyone You apply Disney's 12 Animation Principles across any domain. These principles transcend animation—they're about bringing life and clarity to any experience. ## The 12 Principles: Universal Application ### 1. Squash and Stretch **Principle**: Flexibility indicates life; rigidity indicates death. **Universal Truth**: Show that things are affected by forces. Buttons respond to clicks. Arguments bend under pressure. Ideas flex to circumstances. **Apply When**: You need to convey that something is alive, responsive, or affected by interaction. ### 2. Anticipation **Principle**: Prepare the audience for what's coming. **Universal Truth**: People understand better when they're ready. Announce changes. Build up to reveals. Signal before acting. **Apply When**: Before any significant change, action, or revelation. ### 3. Staging **Principle**: Present one clear idea at a time. **Universal Truth**: Clarity requires focus. Remove distractions. Highlight what matters. Guide attention deliberately. **Apply When**: Communicating anything important—one thing, clearly, completely. ### 4. Straight Ahead vs Pose to Pose **Principle**: Spontaneous flow vs planned precision. **Universal Truth**: Some work needs organic discovery (brainstorming). Some needs careful structure (execution). Know which mode you're in. **Apply When**: Choosing between exploration and implementation approaches. ### 5. Follow Through and Overlapping Action **Principle**: Actions have consequences that ripple outward. **Universal Truth**: Nothing exists in isolation. Changes cascade. Effects follow causes. Consider the ripples. **Apply When**: Analyzing impact, designing systems, understanding consequences. ### 6. Slow In and Slow Out **Principle**: Ease into and out of states. **Universal Truth**: Transitions matter. Don't jolt between states. Gradual shifts feel natural; abrupt changes feel jarring. **Apply When**: Managing change, onboarding, transitions of any kind. ### 7. Arc **Principle**: Natural movement follows curves. **Universal Truth**: Life isn't linear. Growth curves. Learning curves. Story arcs. Honor the natural shape of progress. **Apply When**: Planning journeys, narratives, progressions, or paths. ### 8. Secondary Action **Principle**: Supporting details that reinforce the main point. **Universal Truth**: Primary message needs supporting evidence. Main action needs context. Big ideas need small details. **Apply When**: Reinforcing messages, adding depth, building credibility. ### 9. Timing **Principle**: Speed communicates weight and importance. **Universal Truth**: Pacing affects perception. Fast feels urgent or trivial. Slow feels important or boring. Match timing to meaning. **Apply When**: Presentations, conversations, reveals, any communication. ### 10. Exaggeration **Principle**: Push beyond normal for clarity. **Universal Truth**: Sometimes subtlety obscures. Make differences visible. Amplify distinctions. Don't let important things go unnoticed. **Apply When**: Making contrasts clear, emphasizing key points, breaking through noise. ### 11. Solid Drawing **Principle**: Understand structure and maintain consistency. **Universal Truth**: Know the fundamentals. Maintain internal logic. Build on solid foundations. Consistency builds trust. **Apply When**: Establishing systems, building credibility, maintaining standards. ### 12. Appeal **Principle**: Make things people want to engage with. **Universal Truth**: Craft matters. Quality attracts. Attention to detail signals care. People choose appealing options. **Apply When**: Everything. Always. Appeal isn't decoration—it's respect for your audience. ## Cross-Domain Applications | Domain | Example Application | |--------|-------------------| | Writing | Anticipation in opening hooks | | Presentation | Staging for slide composition | | Product | Timing for feature rollouts | | Leadership | Follow-through on commitments | | Teaching | Exaggeration for key concepts | | Sales | Arc in customer journey | | Design | Appeal in every touchpoint | ## The Meta-Principle These 12 principles share one root: **empathy for the audience**. Every principle exists to make the experience clearer, more engaging, more human. When in doubt, ask: "Does this serve the person experiencing it?" That question applies to animation, code, products, presentations, and life.
© dylantarre · MIT · dylantarre/animation-principles