Translates Disney's 12 animation principles into product prioritization language with actual business metrics attached. When you're arguing for motion design budget or trying to roadmap which interactions matter, it maps each principle to measurable outcomes like error rates, support tickets, and onboarding completion. The framework breaks principles into must-have, should-have, and nice-to-have buckets, which is genuinely helpful when engineering asks why we're spending time on easing curves. Honestly most useful for PMs at consumer companies who need to justify animation work beyond "it feels nicer." The ROI framing for each principle beats the usual designer-PM translation gap.

skills.sh installs
528
GitHub stars
146
last updated
Aug 21, 2026

Install

$ npx -y skills add dylantarre/animation-principles --skill product-manager --agent claude-code

Installs into .claude/skills of the current project.

Files

Product Manager: Animation ROI & Strategy

You are a product manager evaluating animation investments. Apply Disney's 12 principles to drive measurable business outcomes.

The 12 Principles for Product Strategy

1. Squash and Stretch

Value: Increases perceived quality and responsiveness. Users rate "squishy" interactions as more premium. Priority: High for consumer apps, medium for B2B. Quick win—CSS-only implementation.

2. Anticipation

Value: Reduces user errors, decreases support tickets. Pre-action cues prevent accidental submissions. Priority: High for destructive actions (delete, purchase). Measure: error rate reduction, support volume.

3. Staging

Value: Improves feature discovery and onboarding completion. Guided attention increases activation. Priority: Critical for new user flows. Track: onboarding funnel completion, time-to-value.

4. Straight Ahead vs Pose to Pose

Value: Development efficiency trade-off. Pose to pose = predictable timeline, easier QA. Straight ahead = creative flexibility, harder to estimate. Priority: Process decision—establish which approach for which feature type.

Sponsors

Details

Repository
github.com/dylantarre/animation-principles
Category
Design & UI/UX
First seen
Jun 3, 2026

More from dylantarre/animation-principles

All 144
1plugin87 avatarperformanceplugin87/ux-ui-agent-skillsOptimize UI performance against Core Web Vitals — LCP, INP, CLS — with loading/code-split strategy, layout-shift prevention, and animation performance rules. Us528skills.sh installs
2ihlamury avatarlinear-ui-skillsihlamury/design-skillsLinear's UI design system. Use when building interfaces inspired by Linear's aesthetic - dark mode, Inter font, 4px grid.417skills.sh installs
3ihlamury avatardribbble-ui-skillsihlamury/design-skillsDribbble's UI design system. Use when building interfaces inspired by Dribbble's aesthetic - light mode, Inter font, 4px grid.413skills.sh installs
4ihlamury avatarairbnb-ui-skillsihlamury/design-skillsAirbnb's UI design system. Use when building interfaces inspired by Airbnb's aesthetic - light mode, Inter font, 4px grid.407skills.sh installs
5ihlamury avatarnotion-ui-skillsihlamury/design-skillsNotion's UI design system. Use when building interfaces inspired by Notion's aesthetic - light mode, Inter font, 4px grid.402skills.sh installs
6ihlamury avatarvercel-ui-skillsihlamury/design-skillsVercel's UI design system. Use when building interfaces inspired by Vercel's aesthetic - light mode, Inter font, 4px grid.358skills.sh installs