review-animations

Reviews animation and motion code against ten craft standards with tiered findings.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Animation and motion code often ships with subtle craft defects — sluggish easing, wrong transform origins, non-GPU properties, missing reduced-motion handling — that general code reviews miss. This Skill applies a rigorous, opinionated review bar to catch feel-breaking motion regressions before they ship. ## Core Features & Use Cases - Standards-Based Review: Evaluates every animation in a diff against ten non-negotiable standards covering easing, duration, origin, interruptibility, GPU-only properties, accessibility, and cohesion. - Structured Findings Output: Produces a Before/After/Why findings table plus a verdict grouped by impact tier, ending in an explicit Block or Approve decision with file:line citations. - Precise Value Citations: Pulls exact easing curves, duration budgets, and spring configs from STANDARDS.md instead of approximating. - Use Case: A developer opens a pull request adding a dropdown menu animation. Run this Skill to flag the ease-in curve, the transform-origin: center on a trigger-anchored popover, and the missing prefers-reduced-motion handling, with concrete replacement values. ## Quick Start Review the animation and motion code in my current diff and give me the findings table and 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?

Review animation code by checking easing curves, durations under 300ms, transform origins, GPU-only properties, and reduced-motion handling. This Skill automates that review against ten standards and outputs a findings table with an explicit Block or Approve verdict.

What easing should UI animations use?

UI animations entering or exiting should use ease-out or a strong custom cubic-bezier like 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.

Does this review cover Framer Motion animations?

Yes, it flags Framer Motion x, y, and scale shorthand props because they run on the main thread and drop frames under load. It recommends the full transform string for hardware acceleration and springs for interruptible gesture-driven motion.

Why is animating width or height a performance problem?

Animating width, height, margin, padding, top, or left triggers layout and paint on every frame instead of running on the GPU. Only transform and opacity skip layout and paint, so the review flags layout-property animation as a performance finding.

When should an animation be removed instead of fixed?

Remove animations on keyboard-initiated or 100-plus-times-per-day actions, and on motion with no valid purpose like spatial consistency or feedback. The remedial hierarchy prefers deletion first, then reduction, before fixing easing or origin.

What are the limitations of this animation review?

It only reviews animation and motion code; it declines general code review, feature writing, and unrelated bug fixes. When motion feel is uncertain, it recommends slow-motion and frame-by-frame debugging rather than guessing.