review-animations

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? 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 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 in a diff 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, timing, accessibility) ending in an explicit Block or Approve decision. - Precise citations: Pulls exact cubic-bezier curves, duration tables, and spring configs from STANDARDS.md instead of approximating values. - 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 from-nothing scale, then prescribes transform 200ms with a strong ease-out from scale(0.95) plus opacity. ## Quick Start Review the animation and motion code in this pull request diff 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 performance issues?

Check that only transform and opacity are animated, since properties like width, height, margin, and top trigger layout and paint. Also flag transition: all, keyframes on rapidly-triggered elements, and Framer Motion x/y/scale shorthands that run on the main thread.

What easing and duration should UI animations use?

UI animations should stay under 300ms and use ease-out or a strong custom cubic-bezier such as cubic-bezier(0.23, 1, 0.32, 1). Never use ease-in on UI, since it delays the exact moment the user is watching and feels sluggish.

Should I use CSS transitions or Framer Motion for animations?

Use CSS transitions, @starting-style, or WAAPI for predetermined motion since they run off the main thread and are interruptible. Use springs or JS-driven motion for dynamic, gesture-driven interactions that must retarget mid-animation.

Does this review cover accessibility for animations?

Yes, it checks that prefers-reduced-motion is honored by keeping opacity and color transitions while dropping movement, and that hover animations are gated behind @media (hover: hover) and (pointer: fine) to avoid false triggers on touch.

When should an animation be removed instead of fixed?

Remove animation on keyboard-initiated or 100+ times-per-day actions, and on any motion without a valid purpose like spatial consistency or feedback. Deletion is the first move in the remedial hierarchy, ahead of reducing duration or fixing easing.