animation-review

Reviews interface animations against motion design principles including timing, easing, continuity, and reduced motion compliance.

Updated Aug 29, 2026
One-click install
npx skills add https://github.com/1arley/volibear --skill animation-review-1arley
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animation-review
Source: https://github.com/1arley/volibear/tree/main/.opencode/skills/animation-review
Command: npx skills add https://github.com/1arley/volibear --skill animation-review-1arley

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interfaces often ship animations that are decorative, inconsistent, or harmful to users with vestibular sensitivities, and teams lack a structured way to audit them. This Skill provides a systematic review of every animation in an interface against established motion design principles. ## Core Features & Use Cases - Multi-axis animation audit: Evaluates purpose, timing, easing, hierarchy, continuity, interruption handling, accessibility, and reduced motion compliance for each animation. - Attack pattern detection: Identifies common failures such as linear easing, inverted animation hierarchy, teleporting elements, broken interruption, and ignored prefers-reduced-motion settings. - Confidence-scaled findings: Classifies each issue as CONFIRMED, HIGH CONFIDENCE, POSSIBLE, or SPECULATIVE with exact timing values and easing functions as evidence. - Use Case: Before shipping a landing page with parallax scrolling, hover micro-interactions, and page transitions, run this review to catch a 300ms hover feedback that should be under 100ms and a parallax effect that ignores reduced motion preferences. ## Quick Start Review all animations in this interface for purpose, timing, easing, continuity, and reduced motion compliance, then report each violation with its exact values.

Frequently Asked Questions about animation-review

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I review animations in a web interface for UX issues?▼

Inventory every animation including page transitions, hovers, loaders, and scroll effects, then evaluate each against purpose, timing, easing, hierarchy, continuity, and interruption axes. Report violations with exact millisecond durations and easing functions as evidence.

What are the correct animation durations for UI feedback and transitions?▼

Feedback animations should run 50-100ms, page transitions 200-300ms, and only storytelling animations should exceed 500ms. Hover feedback at 300ms is too slow, while a 100ms page transition fails to communicate navigation.

How do I check prefers-reduced-motion compliance in CSS animations?▼

Verify that a @media (prefers-reduced-motion: reduce) query disables sensitive animations like parallax, scroll-triggered effects, and constant floating motion. Partial compliance on major animations may be acceptable, but vestibular-triggering effects must have fallbacks.

When is linear easing acceptable in UI animations?▼

Linear easing is acceptable for progress bars, skeletons, and loaders where constant speed is intentional. For entrances use ease-out, exits use ease-in, and tactile interactions use spring curves; linear easing elsewhere produces robotic motion.

What animation issues cause vestibular discomfort?▼

Pronounced parallax on scroll-triggered backgrounds, constant floating CTAs, and fast-spinning high-contrast loaders cause vestibular discomfort. These must be disabled under reduced motion preferences or removed entirely.