review-animations

Reviews animation and motion code against ten craft standards with tiered findings.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Animation code often passes review because it technically works while feeling sluggish, firing too often, or dropping frames. This Skill applies a strict, opinionated review bar to motion code so feel-breaking regressions get flagged instead of merged. ## Core Features & Use Cases - Ten non-negotiable standards: Checks justified motion, frequency-appropriateness, easing, sub-300ms durations, transform origins, interruptibility, GPU-only properties, accessibility, asymmetric timing, and cohesion. - Escalation triggers and 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 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 the easing, duration, and origin, and prescribes a 150–250ms ease-out transition scaling from the trigger. ## Quick Start Review the animation and transition code in this pull request 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 animation code in a pull request?

Check each animation against frequency of use, easing curve, duration under 300ms, transform origin, and GPU-only properties. Flag patterns like transition: all, scale(0), and ease-in on UI, then close with an explicit 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, never ease-in. UI animations stay under 300ms: button feedback at 100–160ms, tooltips at 125–200ms, dropdowns at 150–250ms.

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, and avoid Framer Motion x/y/scale shorthands under load because they are not hardware-accelerated.

Why does my animation drop frames or feel sluggish?

Animating layout properties like width, height, margin, or top triggers layout and paint on every frame. Animate only transform and opacity, set transforms directly on the element rather than via parent CSS variables, and prefer CSS over rAF-driven JS under load.

When should an animation be removed instead of fixed?

Remove animation from keyboard-initiated or 100+ times-per-day actions entirely, and drastically reduce motion seen tens of times daily. Motion without a valid purpose such as spatial consistency, feedback, or state indication is a deletion candidate.

How do I handle prefers-reduced-motion in animations?

Wrap movement in a prefers-reduced-motion media query that keeps opacity and color transitions but drops transform-based motion. Also gate hover animations behind hover: hover and pointer: fine so touch devices do not fire false hovers.