review-animations

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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 bar derived from Emil Kowalski's design engineering philosophy, flagging regressions instead of rubber-stamping them. ## Core Features & Use Cases - Ten non-negotiable standards: Checks justified motion, frequency-appropriateness, responsive easing, sub-300ms durations, origin correctness, interruptibility, GPU-only properties, accessibility, asymmetric timing, and cohesion. - Hard escalation triggers: Instantly flags transition: all, scale(0) entrances, ease-in on UI, keyframes on toasts, layout-property animation, and ungated hover motion. - Structured output: Produces a Before/After/Why findings table plus a tiered verdict ending in an explicit Block or Approve decision, citing exact values from STANDARDS.md. - Use Case: A developer opens a pull request adding a dropdown that animates with ease-in over 400ms from transform-origin: center. The review flags the easing, duration, and origin, and prescribes ease-out with a custom cubic-bezier at 150–250ms scaling from the trigger. ## Quick Start Ask the AI to review the animation and motion code in your current diff or pull request against the animation craft 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 this review on the diff to check every animation against ten standards covering easing, duration, origin, interruptibility, GPU-only properties, and accessibility. It returns a findings table with Before/After fixes and a Block or Approve verdict.

What animation issues get flagged in CSS code review?▼

Hard triggers include transition: all, scale(0) entrances, ease-in on UI, durations over 300ms, transform-origin: center on popovers, keyframes on toasts, animating layout properties like width or height, and missing prefers-reduced-motion handling.

Does Framer Motion x/y/scale cause performance problems?▼

Yes. Framer Motion x, y, and scale shorthands run on the main thread via requestAnimationFrame and drop frames under load. The review flags them and recommends the full transform string, which is hardware accelerated.

When should animations be removed instead of fixed?▼

Remove animation on keyboard-initiated actions and anything triggered 100+ times per day, such as command palette toggles. The remedial hierarchy prefers deleting or reducing motion over fixing easing or origin when the animation lacks a valid purpose.

Can this review general code or non-motion changes?▼

No. It only reviews animation and motion code and declines general code review requests, pointing to a general review skill instead. It does not write features or fix unrelated bugs.