review-animations

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

Updated Aug 22, 2026
One-click install
npx skills add https://github.com/falentio/cimi --skill review-animations-falentio
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: review-animations
Source: https://github.com/falentio/cimi/tree/main/.agents/skills/review-animations
Command: npx skills add https://github.com/falentio/cimi --skill review-animations-falentio

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 those 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. - Escalation triggers: Flags known anti-patterns on sight, such as transition: all, scale(0) entrances, ease-in on UI, and keyframes on rapidly-triggered elements. - Structured verdict output: Produces a findings table with before/after fixes plus a tiered verdict ending in an explicit Block or Approve decision. - Use Case: A developer opens a pull request adding a dropdown menu animation. The review catches transform-origin: center on a trigger-anchored popover and a 400ms duration, then prescribes the exact cubic-bezier curve and 150–250ms range from the standards reference. ## Quick Start Review the animation code in this pull request and flag any motion that violates the 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 core rules: ease-out for entering elements, durations under 300ms for UI, transform and opacity only, correct transform-origin, and prefers-reduced-motion handling. This review applies ten such standards and outputs a findings table with fixes.

What are common CSS animation mistakes in UI code?

Frequent issues include transition: all, scale(0) entrances, ease-in on UI interactions, animating layout properties like width or height, and keyframes on rapidly-triggered elements like toasts. Each delays perceived responsiveness or causes dropped frames.

Should I use CSS transitions or keyframes for toast notifications?

Use CSS transitions for toasts and other rapidly-triggered elements because they can be interrupted and retargeted mid-animation. Keyframes restart from zero when retriggered, causing visible jumps in dynamic UI.

Does Framer Motion hardware-accelerate x and y props?

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 transform: translateX(100px), for hardware acceleration.

When should an animation be removed instead of fixed?

Remove animations on keyboard-initiated actions or elements seen 100+ times per day, since repeated motion makes interfaces feel slow. The remedial hierarchy prefers deletion first, then reduction, before tuning easing or origin.