review-animations

Reviews animation and motion code against ten non-negotiable craft standards.

Updated Mar 14, 2026
One-click install
npx skills add https://github.com/beelabstudio/ai --skill review-animations-beelabstudio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: review-animations
Source: https://github.com/beelabstudio/ai/tree/main/skills/enabling/review-animations
Command: npx skills add https://github.com/beelabstudio/ai --skill review-animations-beelabstudio

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 bar derived from Emil Kowalski's animation philosophy and flags violations with concrete fixes. ## 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. - Escalation Triggers & Remedial Hierarchy: Hard-flags patterns like transition: all, scale(0), ease-in on UI, and layout-property animation, 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 with file:line citations. - Use Case: Before merging a pull request that adds a dropdown menu animation, run this review to catch that it uses ease-in at 400ms with transform-origin: center, and get the exact cubic-bezier curve, duration, and origin fix from the standards reference. ## Quick Start Review the animation code in my pull request against your motion craft standards 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. This Skill automates that review and outputs a findings table with fixes.

What easing and duration should UI animations use?▼

UI animations should use ease-out or a strong custom cubic-bezier like cubic-bezier(0.23, 1, 0.32, 1) and stay under 300ms. Never use ease-in on UI — it delays the exact moment the user is watching and feels sluggish.

Should I use CSS transitions or Framer Motion for animations?▼

Use CSS transitions, @starting-style, or WAAPI for predetermined motion since they run off the main thread and are interruptible. Use springs or JS for dynamic, gesture-driven motion. Avoid Framer Motion x/y/scale shorthands under load — they run on the main thread and drop frames.

Why does animating width or height cause performance problems?▼

Animating width, height, margin, padding, top, or left triggers layout and paint on every frame, blocking the main thread. Only transform and opacity skip those steps and run on the GPU, so layout-property animations are flagged as performance findings.

How do I handle prefers-reduced-motion in 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).

When should an animation be removed instead of fixed?▼

Delete animations on keyboard-initiated or 100+-times-per-day actions, and any motion without a valid purpose like spatial consistency, state indication, or feedback. Deletion is the first option in the remedial hierarchy, ahead of reducing duration or fixing easing.