review-animations

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

Updated Sep 7, 2026
One-click install
npx skills add https://github.com/raphaelmans/spectralpointengineering --skill review-animations-raphaelmans
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: review-animations
Source: https://github.com/raphaelmans/spectralpointengineering/tree/main/.skillshare/skills/review-animations
Command: npx skills add https://github.com/raphaelmans/spectralpointengineering --skill review-animations-raphaelmans

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 get flagged before they ship. ## Core Features & Use Cases - Standards-based review: Evaluates every animation against ten non-negotiable rules covering easing curves, sub-300ms durations, transform-origin correctness, GPU-only properties, interruptibility, 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 value citations: Pulls exact cubic-bezier curves, duration budgets, and spring configurations from a bundled standards reference instead of approximating. - 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 from-nothing scale, then prescribes transform 200ms with a strong ease-out from scale(0.95) plus opacity. ## Quick Start Ask the AI to review the animation and motion code in your current diff or pull request and report any violations with fixes.

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 the review on your diff and it checks each animation against ten standards covering easing, duration, origin, GPU properties, and accessibility. Findings come back as a Before/After/Why table with an explicit Block or Approve verdict.

What animation problems fail a motion code review?

Hard failures include transition: all, ease-in on UI, scale(0) entrances, 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 animations?

Yes, it covers Framer Motion specifically, including flagging x/y/scale shorthand props that run on the main thread and drop frames under load. It recommends full transform strings and spring configurations with duration and bounce parameters.

Why should UI animations avoid the ease-in timing function?

ease-in starts slow, delaying the exact moment the user is watching, which makes interfaces feel sluggish. Entering and exiting elements should use ease-out or a strong custom cubic-bezier like cubic-bezier(0.23, 1, 0.32, 1).

When should an animation be removed instead of fixed?

Delete animations on keyboard-initiated or 100+ times-per-day actions, and on any motion without a valid purpose like spatial consistency or feedback. The remedial hierarchy prefers deletion first, then reduction, before easing or origin fixes.