review-animations

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

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

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 applies a strict, opinionated review bar to motion code so those issues are caught before merge. ## Core Features & Use Cases - Ten non-negotiable standards: Checks every animation for justified motion, frequency-appropriateness, responsive easing, sub-300ms UI durations, physical correctness, interruptibility, GPU-only properties, accessibility, asymmetric timing, and cohesion. - Escalation triggers and remedial hierarchy: Flags known anti-patterns on sight (transition: all, scale(0), ease-in on UI, keyframes on toasts) and proposes fixes in a preferred order from deletion to polish. - Structured output: Produces a findings table plus a tiered verdict ending in an explicit Block or Approve decision, citing exact values from the bundled STANDARDS.md reference. - Use Case: A developer opens a pull request adding a dropdown menu animation. The review flags transform-origin: center, a 400ms duration, and missing prefers-reduced-motion handling, then supplies the corrected cubic-bezier curve and origin-aware CSS. ## Quick Start Ask the assistant to review the animation and transition code in your current diff or pull request against motion 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 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, Framer Motion x/y/scale shorthands, and CSS-variable-driven child transforms that cause style recalculation storms.

What easing and duration should UI animations use?▼

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

Does the review cover Framer Motion animations?▼

Yes. It flags Framer Motion x, y, and scale shorthand props because they run on the main thread via requestAnimationFrame and drop frames under load, recommending the full transform string instead. It also covers spring configurations for gesture-driven motion.

Why should popovers not scale from the center?▼

Trigger-anchored elements like popovers, dropdowns, and tooltips should scale from their trigger using transform-origin, not center, so motion appears physically grounded. Modals are the exception and keep transform-origin: center since they appear centered in the viewport.

When should an animation be removed instead of fixed?▼

Animations on keyboard-initiated or 100+-times-per-day actions should be deleted outright, and motion without a valid purpose like spatial consistency or feedback should be removed or drastically reduced. Deletion is the first option in the remedial hierarchy.

What are the limitations of this animation review?▼

It reviews only animation and motion code and declines general code review requests. It is a static review against documented standards, so subjective feel judgments may still require slow-motion or frame-by-frame debugging on real devices.