From dylantarre-animation-principles
Use when users don't notice feedback, miss state changes, or can't tell if their action worked
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
Make feedback animations unmissable using Disney's principles.
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.
Make feedback animations unmissable using Disney's principles.
Issue: No buildup before action completes Fix: Show loading/processing state immediately. User should know their input was received.
Issue: Feedback appears and vanishes too quickly Fix: Let feedback linger. Success messages need 2-3 seconds minimum. Add settle animation.
Issue: Feedback appears outside user's focus Fix: Show feedback near the trigger. If button was clicked, feedback should appear on/near button.
Issue: Feedback is too subtle Fix: Increase contrast, size change, or motion. Feedback must compete with user's task focus.
Issue: Only one feedback channel Fix: Combine channels: visual + motion + color. Error = red + shake. Success = green + checkmark + pulse.
/* Button feedback */
.button:active {
transform: scale(0.95);
}
.button.loading {
pointer-events: none;
}
.button.success {
animation: successPulse 300ms ease-out;
}
@keyframes successPulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); background: var(--success); }
100% { transform: scale(1); }
}
/* Error shake */
@keyframes errorShake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-4px); }
75% { transform: translateX(4px); }
}