review-animations

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

Updated Sep 16, 2026
One-click install
npx skills add https://github.com/PT-Perkasa-Pilar-Utama/axentra --skill review-animations-pt-perkasa-pilar-utama
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: review-animations
Source: https://github.com/PT-Perkasa-Pilar-Utama/axentra/tree/main/.claude/skills/review-animations
Command: npx skills add https://github.com/PT-Perkasa-Pilar-Utama/axentra --skill review-animations-pt-perkasa-pilar-utama

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Animation code often passes review because it technically works while feeling sluggish, firing too often, animating layout properties, or ignoring reduced-motion preferences. This Skill applies a strict, opinionated craft bar to motion code so feel-breaking regressions are caught before merge. ## Core Features & Use Cases - Standards-Based Review: Measures every animation in a diff against ten non-negotiable rules covering easing, sub-300ms durations, transform-origin correctness, GPU-only properties, and interruptibility. - Structured Findings Output: Produces a required Before/After/Why findings table plus a verdict grouped by impact tier, ending in an explicit Block or Approve decision with file:line citations. - Precise Value Citations: Loads STANDARDS.md for exact cubic-bezier curves, duration tables, spring configs, and gesture thresholds instead of approximating. - Use Case: A pull request adds a dropdown that animates with transition: all 400ms ease-in from scale(0). The review flags the unbounded property animation, the over-budget duration, the sluggish easing, and the comes-from-nowhere origin, then proposes transform 200ms ease-out from scale(0.95) with the correct transform-origin. ## Quick Start Ask the AI to review the animation and motion code in your current diff or pull request using the review-animations skill.

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?▼

Review each animation against concrete rules: UI durations under 300ms, ease-out for entering elements, transform and opacity only, correct transform-origin, and interruptible transitions for rapidly triggered motion. Flag violations with file:line citations and propose specific fixes.

What easing and duration should UI animations use?▼

Entering and exiting elements should use ease-out or a strong custom cubic-bezier like cubic-bezier(0.23, 1, 0.32, 1), never ease-in. UI animations should stay under 300ms: button presses 100-160ms, tooltips 125-200ms, dropdowns 150-250ms.

Are Framer Motion x, y, and scale props hardware accelerated?▼

No. Framer Motion x, y, and scale shorthands run on the main thread via requestAnimationFrame and can drop frames under load. Use the full transform string, such as animate={{ transform: "translateX(100px)" }}, to get hardware acceleration.

Why should popovers not animate from scale(0) or center origin?▼

Nothing in the real world appears from nothing, so entrances should start from scale(0.9-0.97) plus opacity. Trigger-anchored popovers, dropdowns, and tooltips should scale from their trigger via transform-origin, not center; modals are the exception.

When should an animation be removed instead of fixed?▼

Delete animations on keyboard-initiated or 100+ times-per-day actions, and on frequently seen elements whose only purpose is looking cool. The remedial hierarchy prefers deletion first, then reduction, before easing, origin, or performance fixes.

How should animations handle prefers-reduced-motion?▼

Honor prefers-reduced-motion by keeping opacity and color transitions while dropping transform-based movement, not by removing all animation. Also gate hover motion behind @media (hover: hover) and (pointer: fine) so touch taps do not fire false hovers.