From dylantarre-animation-principles
Use when animation is limited by browser support, platform capabilities, or technical requirements
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
Work within platform limitations while preserving animation intent.
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.
Work within platform limitations while preserving animation intent.
Issue: Runtime calculations too expensive Fix: Pre-calculate animations. Use CSS keyframes (pose-to-pose) over JS frame-by-frame (straight ahead).
Issue: Complex shapes cause rendering issues Fix: Simplify geometry. Use CSS shapes over SVG paths. Reduce polygon counts in 3D.
Issue: Consistent timing across devices
Fix: Use relative units. Test on slowest target device. Consider requestAnimationFrame for JS.
Issue: Budget only allows essential animation Fix: Prioritize primary actions. Cut secondary animations first when constrained.
Issue: Limited screen real estate Fix: Animate in place. Use transforms that don't affect layout. Consider reduce-motion as default on constrained platforms.
// Feature detection
const supportsAnimation =
'animate' in Element.prototype &&
CSS.supports('transform', 'translateZ(0)');
if (supportsAnimation) {
element.animate(keyframes, options);
} else {
element.classList.add('final-state');
}
// Progressive enhancement
@supports (animation: name) {
.element {
animation: fadeIn 200ms ease-out;
}
}
-webkit- prefixesprefers-reduced-motion as proxy