review-animations

Reviews animation and motion code against easing, duration, performance, and accessibility standards.

Updated May 9, 2026
One-click install
npx skills add https://github.com/Aeonxuu/southtownslandservice_v2 --skill review-animations-aeonxuu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: review-animations
Source: https://github.com/Aeonxuu/southtownslandservice_v2/tree/main/.agents/skills/review-animations
Command: npx skills add https://github.com/Aeonxuu/southtownslandservice_v2 --skill review-animations-aeonxuu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Animation code often passes review because it technically works while feeling sluggish, firing on high-frequency actions, animating layout properties, or ignoring reduced-motion preferences. This Skill applies a strict, opinionated craft bar to motion code so feel-breaking regressions are caught before merge. ## Core Features & Use Cases - Standards-based review: Measures every animation in a diff against ten non-negotiable rules covering easing curves, sub-300ms durations, transform-origin correctness, GPU-only properties, and interruptibility. - Structured findings output: Produces a Before/After/Why findings table plus a tiered verdict (feel-breaking regressions, performance, accessibility) ending in an explicit Block or Approve decision. - Precise value citations: Pulls exact cubic-bezier curves, duration tables, and spring configs from STANDARDS.md instead of approximating. - Use Case: A pull request adds a dropdown that animates with transition: all 400ms ease-in from scale(0). The review flags the unbounded transition, the ease-in curve, the over-budget duration, and the wrong origin, then prescribes transform 200ms with a strong ease-out from scale(0.95) + opacity anchored to the trigger. ## Quick Start Ask the AI to review the animation and motion code in your current diff against the animation standards and return a findings table with a block-or-approve verdict.

Frequently Asked Questions about review-animations

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

FAQPage Schema
How do I review CSS animation code for quality issues?▼

Check each animation against ten standards: justified purpose, frequency-appropriate motion, ease-out easing, sub-300ms UI duration, correct transform-origin, interruptibility, GPU-only transform/opacity properties, reduced-motion support, asymmetric timing, and cohesion. Violations become findings with a block-or-approve verdict.

What easing and duration should UI animations use?▼

Entering and exiting elements use ease-out or a strong custom cubic-bezier like cubic-bezier(0.23, 1, 0.32, 1); never ease-in on UI. UI animations stay under 300ms: button feedback 100-160ms, tooltips 125-200ms, dropdowns 150-250ms, modals 200-500ms.

Does Framer Motion hardware-accelerate x, y, and scale props?▼

No. Framer Motion x/y/scale shorthands run on the main thread via requestAnimationFrame and drop frames under load. Use the full transform string, such as animate={{ transform: "translateX(100px)" }}, to get hardware acceleration.

Why should popovers not animate from scale(0) or center origin?▼

Nothing in the real world appears from nothing, so entrances start from scale(0.9-0.97) plus opacity. Trigger-anchored popovers, dropdowns, and tooltips scale from their trigger via transform-origin, not center; modals are the exemption and stay centered.

When should animations be removed instead of fixed?▼

Delete animation on keyboard-initiated or 100+ times-per-day actions like command palette toggles, and on motion with no valid purpose. The remedial hierarchy prefers deletion first, then reduction, easing fixes, origin fixes, interruptibility, and GPU migration.

How should animations handle prefers-reduced-motion?▼

Reduced motion means gentler, not zero: keep opacity and color transitions but drop transform-based movement. Gate hover animations behind @media (hover: hover) and (pointer: fine) so touch devices do not fire false hovers on tap.