review-animations

Reviews animation and motion code against ten craft standards covering easing, duration, origin, and performance.

1|Updated Jul 4, 2026
One-click install
npx skills add https://github.com/trungenglish/SHOPWISE --skill review-animations-trungenglish
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: review-animations
Source: https://github.com/trungenglish/SHOPWISE/tree/main/.agents/skills/review-animations
Command: npx skills add https://github.com/trungenglish/SHOPWISE --skill review-animations-trungenglish

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Animation code often passes review because it technically works while feeling sluggish, firing too often, or dropping frames in production. This Skill applies a strict, opinionated review bar to motion code so feel-breaking regressions 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, transform origin, interruptibility, GPU-only properties, accessibility, asymmetric timing, and cohesion. - Precise value citations: Pulls exact easing curves, duration tables, spring configs, and gesture thresholds from a bundled standards reference instead of approximating. - Structured verdict output: Produces a findings table with before/after fixes plus a tiered verdict ending in an explicit Block or Approve decision. - 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) anchored to the trigger. ## Quick Start Ask the assistant to review the animation and motion code in the current diff using the review-animations standards.

Frequently Asked Questions about review-animations

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

FAQPage Schema
How do I review animation code in a pull request?▼

Run the review on the diff and it measures every animation against ten standards covering easing, duration, origin, interruptibility, and performance. Findings are returned as a before/after table with fixes, followed by a tiered verdict and an explicit Block or Approve decision.

What animation issues does this review flag automatically?▼

It hard-flags transition: all, scale(0) entrances, ease-in on UI, durations over 300ms, animation on keyboard or high-frequency actions, layout property animation, missing prefers-reduced-motion handling, ungated hover motion, and symmetric timing on press interactions.

Does the review support Framer Motion and spring animations?▼

Yes. It flags Framer Motion x/y/scale shorthand props that run on the main thread under load and recommends full transform strings. It also evaluates spring configs, recommending subtle bounce values and springs for interruptible gesture-driven motion.

When should UI animations be removed instead of fixed?▼

The remedial hierarchy prefers deletion first for high-frequency actions, keyboard-triggered actions, or motion with no valid purpose. Reduction, easing fixes, and origin corrections come only after deletion and reduction are ruled out.

What are the limits of this animation review?▼

It only reviews motion code and declines general code review requests. It cannot execute or visually render animations, so for uncertain feel it recommends slow-motion inspection, frame-by-frame DevTools analysis, and testing gestures on real devices.