review-animations

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Animation code often ships with subtle craft problems — 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 menu with transition: all 300ms ease-in. The review flags the unbounded property animation and ease-in curve, recommends transition: transform 200ms with a strong custom ease-out, and blocks the PR until fixed. ## Quick Start Ask the agent to review the animation and motion code in your current diff or pull request for craft and performance issues.

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 performance issues?

Check that only transform and opacity are animated, since properties like width, height, margin, and top trigger layout and paint on every frame. Also verify durations stay under 300ms for UI elements and that easing uses ease-out rather than ease-in for entering elements.

What easing curve should I use for UI animations?

Use ease-out for entering or exiting elements, ease-in-out for on-screen movement, and never ease-in on UI since it delays the moment the user watches most. Built-in CSS easings are too weak, so prefer strong custom curves like cubic-bezier(0.23, 1, 0.32, 1).

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 can drop frames under load. Use the full transform string, such as animate={{ transform: "translateX(100px)" }}, to get hardware acceleration.

How should animations handle prefers-reduced-motion?

Reduced motion means gentler animation, not zero animation. Keep opacity and color transitions that aid comprehension, but remove transform-based movement. Also gate hover animations behind @media (hover: hover) and (pointer: fine) so touch devices do not fire false hovers.

When should I use springs instead of CSS transitions?

Use springs for gesture-driven, interruptible motion like drag-to-dismiss, since springs maintain velocity when interrupted while keyframes restart from zero. Use CSS transitions or @starting-style for predetermined motion, and keep spring bounce subtle between 0.1 and 0.3.

What are the limitations of this animation review skill?

It only reviews animation and motion code; it does not write features, fix unrelated bugs, or review general code. For non-motion review it declines and points to a general code review skill instead.