review-animations

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

Updated May 13, 2026
One-click install
npx skills add https://github.com/sapatamuku-creator/mastersapatamuku --skill review-animations-sapatamuku-creator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: review-animations
Source: https://github.com/sapatamuku-creator/mastersapatamuku/tree/main/releases/v2.7/.agents/skills/review-animations
Command: npx skills add https://github.com/sapatamuku-creator/mastersapatamuku --skill review-animations-sapatamuku-creator

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 ten non-negotiable standards derived from Emil Kowalski's design engineering philosophy, flagging violations with concrete fixes. ## Core Features & Use Cases - Standards-Based Review: Measures every animation in a diff against ten rules covering justified motion, frequency-appropriateness, easing, sub-300ms durations, origin correctness, 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 in a preferred order from deletion to polish. - Structured Output: Produces a findings table (Before/After/Why) plus a tiered verdict ending in an explicit Block or Approve decision, citing exact values from STANDARDS.md. - Use Case: A pull request adds a dropdown that fades in over 400ms with ease-in and transform-origin: center. The review flags all three issues, cites the 150–250ms dropdown budget and trigger-anchored origin rule, and blocks approval until fixed. ## Quick Start Ask the AI to review the animation and motion code in your current diff or pull request against the animation craft standards.

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 properties, reduced-motion support, asymmetric timing, and cohesion. Flag violations with a Before/After/Why table and end with a Block or Approve verdict.

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 stay under 300ms: tooltips 125–200ms, dropdowns 150–250ms, modals 200–500ms.

Why is animating width or height a performance problem?▼

Animating layout properties like width, height, margin, or top triggers layout, paint, and composite on every frame. Only transform and opacity run on the GPU, so reviews flag layout-property animation and recommend transform-based equivalents.

Does Framer Motion hardware-accelerate x and y props?▼

No. Framer Motion's 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)" }}, for hardware acceleration.

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. Deletion is the first move in the remedial hierarchy, ahead of reducing duration or fixing easing.

How should animations handle prefers-reduced-motion?▼

Reduced motion means gentler animation, not zero: keep opacity and color transitions but drop transform-based movement. Hover motion should also be gated behind @media (hover: hover) and (pointer: fine) to avoid false triggers on touch devices.