From dylantarre-animation-principles
Use when animation causes user confusion, delays task completion, or creates frustration
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
Diagnose animations that block, confuse, or frustrate users.
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.
Diagnose animations that block, confuse, or frustrate users.
Issue: Animation too slow for the context Fix: Match duration to user intent. Micro-interactions: 100-200ms. Transitions: 200-400ms. Never block input.
Issue: Action happens without warning Fix: Add subtle anticipation cues before significant changes. A button press should show feedback before the result.
Issue: Animation ends abruptly Fix: Let elements settle naturally. Sudden stops feel broken. Add slight overshoot and settle.
Issue: Important changes happen outside focus Fix: Draw attention to where change occurs. If content moves, guide the eye with motion.
Issue: Animation feels arbitrary Fix: Every animation should have clear purpose. If users question "why does this bounce?", remove it.
// Allow interaction during animation
element.style.pointerEvents = 'auto';
// Make animation skippable
element.addEventListener('click', () => {
element.getAnimations().forEach(a => a.finish());
});