review-animations

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

Updated Aug 11, 2026
One-click install
npx skills add https://github.com/Debindenny/travelplanner-community- --skill review-animations-debindenny
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: review-animations
Source: https://github.com/Debindenny/travelplanner-community-/tree/main/travel-planner/agent/skills/review-animations
Command: npx skills add https://github.com/Debindenny/travelplanner-community- --skill review-animations-debindenny

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 standards catalog so these issues are caught before merge. ## Core Features & Use Cases - Standards-based review: Evaluates every animation against ten non-negotiable rules covering easing curves, sub-300ms durations, transform origins, interruptibility, GPU-only properties, and accessibility. - Structured findings output: Produces a Before/After/Why findings table plus a tiered verdict (feel-breaking regressions, performance, timing, accessibility) ending in an explicit Block or Approve decision. - Precise citations: Pulls exact cubic-bezier curves, duration budgets, and spring configurations from STANDARDS.md instead of approximating values. - Use Case: A developer opens a pull request adding a dropdown that animates with transition: all 400ms ease-in from scale(0). The review flags the unbounded transition, the ease-in curve, the over-budget duration, and the scale-from-nothing entrance, then prescribes exact fixes. ## 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 concrete rules: ease-out for entering elements, durations under 300ms for UI, transform and opacity only, correct transform-origin on popovers, and prefers-reduced-motion handling. This review produces a Before/After/Why findings table with a block or approve verdict.

What animation duration and easing should UI elements use?▼

UI animations should stay under 300ms: button press feedback at 100-160ms, tooltips at 125-200ms, dropdowns at 150-250ms, modals at 200-500ms. Entering elements use ease-out with strong custom curves like cubic-bezier(0.23, 1, 0.32, 1); ease-in on UI is flagged.

Are Framer Motion x and y props hardware accelerated?▼

No. Framer Motion x, y, and scale shorthand props run on the main thread via requestAnimationFrame and 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)?▼

Nothing in the real world appears from nothing, so scale(0) entrances look like they come from nowhere. Start from scale(0.9-0.97) plus opacity 0, and set transform-origin to the trigger element rather than center; modals are the exception and stay centered.

When should animations be removed instead of fixed?▼

Remove animation on keyboard-initiated actions and anything triggered 100+ times per day, since repetition makes motion feel slow. The remedial hierarchy prefers deleting purposeless animation first, then reducing duration or properties, before fixing easing or origins.

How do I handle prefers-reduced-motion in CSS animations?▼

Wrap movement in a @media (prefers-reduced-motion: reduce) block that keeps opacity and color transitions but drops transform-based motion. Reduced motion means gentler animation, not zero. Also gate hover motion behind @media (hover: hover) and (pointer: fine).