From dylantarre-animation-principles
Use when animation excludes users with vestibular disorders, cognitive disabilities, or assistive technology needs
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
Make animations inclusive using Disney's principles thoughtfully.
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 animations inclusive using Disney's principles thoughtfully.
Issue: Excessive distortion causes disorientation
Fix: Reduce or eliminate squash/stretch for users with prefers-reduced-motion. Use opacity changes instead.
Issue: Too many moving elements Fix: Limit to one animated element at a time. Secondary actions should be subtle or removed.
Issue: Dramatic motion triggers vestibular responses Fix: Reduce scale, rotation, and position changes. Keep movements small and predictable.
Issue: Animations too fast or too slow Fix: Provide consistent, predictable timing. Avoid sudden speed changes.
Issue: Curved motion paths cause tracking difficulty Fix: Use linear motion for essential UI. Save arcs for optional decorative elements.
prefers-reduced-motion - Always check and honorprefers-reduced-motion?@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
// Check preference in JS
const prefersReducedMotion = window.matchMedia(
'(prefers-reduced-motion: reduce)'
).matches;