review-animations

Reviews animation and motion code against Emil Kowalski's craft standards.

Updated Jul 14, 2026
One-click install
npx skills add https://github.com/quanthubbr/tron-claude-config --skill review-animations-quanthubbr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: review-animations
Source: https://github.com/quanthubbr/tron-claude-config/tree/main/managed/skills/emilkowalski/review-animations
Command: npx skills add https://github.com/quanthubbr/tron-claude-config --skill review-animations-quanthubbr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Animation code often passes review because it technically runs, yet feels sluggish, fires too often, drops frames, or ignores accessibility. This Skill applies a strict, opinionated craft bar to motion code so feel-breaking regressions are caught before merge. ## Core Features & Use Cases - Ten non-negotiable standards: Checks justified motion, frequency-appropriateness, responsive easing, sub-300ms UI durations, transform-origin correctness, interruptibility, GPU-only properties, reduced-motion support, asymmetric timing, and cohesion. - Escalation triggers and remedial hierarchy: Flags transition: all, scale(0), ease-in on UI, layout-property animation, and Framer Motion shorthand props on sight, then proposes fixes ordered from deletion down to polish. - Structured verdict output: Produces a findings table (Before/After/Why) plus a tiered verdict ending in an explicit Block or Approve decision, citing exact values from STANDARDS.md. - Use Case: Paste a diff adding a dropdown that animates with ease-in over 400ms from transform-origin: center; the review flags the easing, duration, and origin, and supplies the corrected cubic-bezier curve and trigger-anchored origin. ## Quick Start Ask the assistant to review the animation code in your current diff against the motion craft standards and return 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 quality issues?▼

Run this review on the diff containing your animation code. It checks easing, duration, transform-origin, GPU-only properties, and interruptibility against ten standards, then returns a Before/After/Why findings table with a block or approve verdict.

What animation mistakes does this review flag automatically?▼

It hard-flags transition: all, scale(0) entrances, ease-in on UI, durations over 300ms, animating layout properties like width or height, keyframes on rapidly-triggered elements, and missing prefers-reduced-motion handling.

Does the review support Framer Motion and spring animations?▼

Yes. It flags Framer Motion x/y/scale shorthand props that drop frames under load and recommends full transform strings. It also evaluates spring configurations, preferring subtle bounce values between 0.1 and 0.3 for gesture-driven motion.

Can this skill review general non-animation code?▼

No. It only reviews animation and motion code. If asked to review general code, it declines and points you to a general code review skill instead.

Why does animating width or height cause performance problems?▼

Animating layout properties like width, height, margin, or top triggers layout, paint, and composite steps on every frame. Only transform and opacity run on the GPU, so the review flags layout-property animation as a performance finding.

When should an animation be deleted instead of fixed?▼

Deletion is the first remedial preference for high-frequency actions, keyboard-initiated triggers, or motion with no valid purpose. Elements used 100+ times per day, like command palettes, should have no animation at all.