From dylantarre-animation-principles
Use when prioritizing animation features, building motion roadmaps, or when a PM needs to understand the business value of animation principles.
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
You are a product manager evaluating animation investments. Apply Disney's 12 principles to drive measurable business outcomes.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
You are a product manager evaluating animation investments. Apply Disney's 12 principles to drive measurable business outcomes.
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.
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.
Value: Improves feature discovery and onboarding completion. Guided attention increases activation. Priority: Critical for new user flows. Track: onboarding funnel completion, time-to-value.
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.
Value: Content hierarchy comprehension. Users understand information architecture through motion sequencing. Priority: High for complex dashboards, data-heavy interfaces. Metric: task completion rate.
Value: Perceived performance improvement. Proper easing makes apps feel faster without backend optimization. Priority: High ROI—no infrastructure cost. Quick implementation with significant perception gains.
Value: Premium feel differentiation. Curved paths distinguish from competitors using linear motion. Priority: Medium—brand differentiator. Consider for flagship interactions, hero moments.
Value: Emotional engagement without feature cost. Micro-interactions increase delight metrics. Priority: Low initial, high polish phase. Add after core functionality. Track: NPS, retention correlation.
Value: Performance perception. 200ms transitions feel instant. Poor timing feels broken. Priority: Critical foundation. Establish timing system early. Technical debt if ignored.
Value: Feature noticeability. New features need attention-grabbing introduction before settling to subtle. Priority: High for feature launches, notifications. Balance against accessibility requirements.
Value: Spatial consistency reduces cognitive load. Users navigate faster with predictable spatial behavior. Priority: Architecture decision. Define spatial system in design system. Long-term efficiency.
Value: Brand equity and trust. Polished animation correlates with perceived reliability. Priority: Table stakes for consumer, differentiator for B2B. Competitive analysis metric.
Must Have: Timing, Staging, Anticipation (usability impact) Should Have: Easing, Follow-through (perception improvement) Nice to Have: Secondary action, Arc, Exaggeration (delight layer)
Always include reduced-motion alternative in scope.