review-animations

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

Updated Jul 16, 2026
One-click install
npx skills add https://github.com/optimaxin/Tredev_Gems --skill review-animations-optimaxin
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: review-animations
Source: https://github.com/optimaxin/Tredev_Gems/tree/main/agent/skills/review-animations
Command: npx skills add https://github.com/optimaxin/Tredev_Gems --skill review-animations-optimaxin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? UI animation code often ships with subtle craft defects — sluggish easing, wrong transform origins, non-GPU properties, missing reduced-motion handling — that make interfaces feel slow or jarring even when they technically work. This Skill provides a rigorous, opinionated review of animation and motion code so these issues are caught before merge. ## Core Features & Use Cases - Standards-based review: Evaluates every animation against ten non-negotiable rules covering justified motion, frequency-appropriateness, easing, sub-300ms durations, origin correctness, interruptibility, GPU-only properties, accessibility, asymmetric timing, and cohesion. - Precise citations: Pulls exact easing curves, duration tables, spring configs, and gesture thresholds from a bundled standards reference (STANDARDS.md) instead of approximating values. - Structured verdicts: Produces a Before/After/Why findings table plus a tiered verdict ending in an explicit Block or Approve decision. - Use Case: A developer opens a pull request adding 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/opacity-only properties, a strong ease-out cubic-bezier, and scaling from the trigger element. ## Quick Start Review the animation and motion code in this pull request and give me 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 core rules: ease-out for entering elements, durations under 300ms for UI, transform and opacity only, correct transform-origin, and prefers-reduced-motion handling. This Skill automates that review and outputs a findings table with a block or approve verdict.

What animation duration should UI elements use?

UI animations should stay under 300ms. Button press feedback runs 100-160ms, tooltips and small popovers 125-200ms, dropdowns 150-250ms, and modals or drawers 200-500ms. Anything slower on a UI element needs explicit justification.

Why is ease-in bad for UI animations?

ease-in starts slow, delaying the exact moment the user is watching, which makes interfaces feel sluggish. Entering and exiting elements should use ease-out or a strong custom cubic-bezier like cubic-bezier(0.23, 1, 0.32, 1), which feels faster at the same duration.

Does Framer Motion hardware-accelerate x and y props?

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

When should animations be removed instead of fixed?

Remove animation on keyboard-initiated actions and anything triggered 100+ times per day, since repeated motion makes frequent actions feel slow. The remedial hierarchy prefers deleting or reducing motion over tuning easing or duration when the animation lacks a valid purpose.

How do I handle prefers-reduced-motion in CSS animations?

Wrap movement in a @media (prefers-reduced-motion: reduce) block that keeps opacity and color transitions but drops transform-based motion. Reduced motion means gentler animation, not zero animation, and hover motion should also be gated behind @media (hover: hover) and (pointer: fine).