review-animations

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

Updated Aug 10, 2026
One-click install
npx skills add https://github.com/KryptaMedina7/quero-s-home --skill review-animations-kryptamedina7
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: review-animations
Source: https://github.com/KryptaMedina7/quero-s-home/tree/main/.agents/skills/review-animations
Command: npx skills add https://github.com/KryptaMedina7/quero-s-home --skill review-animations-kryptamedina7

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Animation code often ships with subtle craft problems—sluggish easing, wrong transform origins, non-GPU property animation, missing reduced-motion handling—that make interfaces feel slow or broken even when they technically work. This Skill reviews motion code against a strict, opinionated standards catalog so these issues are caught before merge. ## Core Features & Use Cases - Standards-based review: Evaluates every animation against ten non-negotiable rules covering easing curves, sub-300ms durations, transform origins, interruptibility, GPU-only properties, and accessibility. - Structured findings output: Produces a Before/After/Why findings table plus a tiered verdict (feel-breaking regressions, performance, accessibility, and more) ending in an explicit Block or Approve decision. - Precise value citations: Pulls exact cubic-bezier curves, duration budgets, and spring configurations from STANDARDS.md instead of approximating. - 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 proposes transform 200ms with a strong ease-out from scale(0.95). ## Quick Start Ask the assistant to review the animation and transition code in your current diff or pull request for motion quality issues.

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 performance issues?

Check that only transform and opacity are animated, since properties like width, height, margin, and top trigger layout and paint. The review flags non-GPU properties, CSS-variable-driven child transforms, and Framer Motion x/y/scale shorthands that drop frames under load.

What easing and duration should UI animations use?

UI animations should use ease-out or a strong custom cubic-bezier and stay under 300ms. Entering and exiting elements use ease-out, on-screen movement uses ease-in-out, and ease-in on UI is flagged because it delays the moment the user watches most.

Does the review cover Framer Motion and spring animations?

Yes. It flags Framer Motion x, y, and scale shorthands that run on the main thread, recommends full transform strings for hardware acceleration, and checks spring configs such as duration 0.5 with bounce 0.2 for gesture-driven motion.

How should animations handle prefers-reduced-motion?

Reduced motion means gentler animation, not zero: keep opacity and color transitions but drop transform-based movement. The review flags any movement animation missing a prefers-reduced-motion media query and hover motion not gated behind hover and pointer media queries.

When should an animation be removed instead of fixed?

Remove animation on keyboard-initiated or 100-plus-times-per-day actions, and drastically reduce motion seen tens of times daily. The remedial hierarchy prefers deletion first, then reduction, before easing, origin, or interruptibility fixes.