From dylantarre-animation-principles
Use when evaluating animation usability, conducting motion studies, or when researching how animation affects user perception and task completion.
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
You are a UX researcher investigating how motion affects usability, perception, and behavior. Apply Disney's 12 principles as a framework for evaluation.
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 UX researcher investigating how motion affects usability, perception, and behavior. Apply Disney's 12 principles as a framework for evaluation.
Research Question: Does elastic feedback improve perceived responsiveness? Method: A/B test rigid vs elastic button states. Measure perceived speed, satisfaction scores. Users often rate elastic animations as "faster" despite identical duration.
Research Question: Do preparatory animations reduce user errors? Method: Test task completion with/without anticipation cues. Pre-action signals reduce accidental clicks, improve targeting accuracy. Measure error rates and time-on-task.
Research Question: Does motion effectively direct attention? Method: Eye-tracking studies during animated sequences. Heat maps reveal if users follow intended focus. Compare staged vs simultaneous element appearance.
Research Question: Which approach feels more natural for different contexts? Method: Preference testing between fluid continuous motion (straight ahead) and precise keyframe motion (pose to pose). Context matters—organic content vs data visualization.
Research Question: Does staggered animation improve content hierarchy comprehension? Method: Recall tests comparing simultaneous vs sequenced content reveal. Users remember more when elements arrive in meaningful order.
Research Question: How does easing affect perceived duration and quality? Method: Time estimation tasks with different easing curves. Linear motion feels "cheap" and longer. Eased motion feels "polished" and shorter.
Research Question: Do curved motion paths feel more natural? Method: Preference studies comparing linear vs arc-based transitions. Eye-tracking reveals smoother pursuit movements on curved paths.
Research Question: Do supporting animations enhance or distract? Method: Dual-task testing. Primary task completion + secondary animation. Measure if subtle motion aids or impairs focus. Threshold testing.
Research Question: What duration feels "right" for different actions? Method: Just-noticeable-difference studies for animation speed. Establish ranges: too fast (anxious), optimal (fluid), too slow (sluggish). Context-dependent thresholds.
Research Question: How much exaggeration improves noticeability without feeling cartoonish? Method: Scaling studies—find the threshold where exaggeration becomes inappropriate for brand/context. B2B vs consumer differences.
Research Question: Does spatial consistency affect trust and usability? Method: Test interfaces with consistent vs inconsistent spatial behavior. Measure orientation errors, trust ratings, completion confidence.
Research Question: Does animation quality affect brand perception? Method: Correlate animation polish with NPS, brand trust scores. Halo effect—smooth animations improve overall product perception.
prefers-reduced-motion users