review-animations

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

3|Updated Apr 20, 2026
One-click install
npx skills add https://github.com/langgenius/due-date-hq-jwl --skill review-animations-langgenius
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: review-animations
Source: https://github.com/langgenius/due-date-hq-jwl/tree/main/.claude/skills/review-animations
Command: npx skills add https://github.com/langgenius/due-date-hq-jwl --skill review-animations-langgenius

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, standards-backed review so motion 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, correct transform origins, interruptibility, GPU-only properties, accessibility, asymmetric timing, and cohesion. - Hard escalation triggers: Flags transition: all, scale(0) entrances, ease-in on UI, layout-property animation, Framer Motion x/y/scale shorthands, and ungated hover motion on sight. - 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 height with ease-in over 400ms. The review flags the non-GPU property, the sluggish easing, and the excessive duration, then prescribes transform/opacity with a strong ease-out curve under 250ms. ## Quick Start Review the animation and motion code in this pull request and give me 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?

Check each animation against ten standards: justified purpose, frequency-appropriate motion, ease-out easing, sub-300ms UI durations, correct transform-origin, interruptibility, GPU-only transform/opacity properties, reduced-motion support, asymmetric timing, and cohesion. Violations become findings with a block or approve verdict.

What animation mistakes should be flagged in code review?

Flag transition: all, scale(0) entrances, ease-in on UI, durations over 300ms, animating width/height/margin/top/left, keyframes on rapidly-triggered elements, missing prefers-reduced-motion handling, and ungated hover motion. These are hard escalation triggers.

Does Framer Motion x/y/scale hurt animation performance?

Yes. Framer Motion x, y, and scale shorthands run on the main thread via requestAnimationFrame and drop frames under load. Use the full transform string like transform: translateX(100px) instead, which is hardware accelerated.

When should animations be removed instead of fixed?

Remove animation on keyboard-initiated actions and anything seen 100+ times per day, such as command palette toggles. The remedial hierarchy prefers deletion first, then reduction, before fixing easing, origin, or performance.

Can this review general code or only animation code?

Only animation and motion code. The skill explicitly declines general code review and points to a general review skill instead, keeping its scope limited to transitions, keyframes, springs, and gesture-driven motion.