skills.rest
eyenalxai
eyenalxaiCOMMUNITY
Explore all skills by this author →
GitHub

review-animations

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

Updated Sep 5, 2023
Search Tags:#code review#accessibility#frontend#css#animation#easing#framer motion
One-click install
npx skills add https://github.com/eyenalxai/dotfiles --skill review-animations-eyenalxai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: review-animations
Source: https://github.com/eyenalxai/dotfiles/tree/main/.agents/skills/review-animations
Command: npx skills add https://github.com/eyenalxai/dotfiles --skill review-animations-eyenalxai

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 support — that make interfaces feel slow or broken even when they technically work. This Skill reviews motion code in a diff against a strict, opinionated standards catalog and produces actionable findings. ## Core Features & Use Cases - Standards-based review: Measures 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, accessibility, and more) ending in an explicit Block or Approve decision. - Precise citations: Pulls exact cubic-bezier curves, duration tables, and spring configs from STANDARDS.md rather than approximating values. - Use Case: Paste a pull request diff that adds a dropdown menu animation, and receive a table flagging transition: all, scale(0) entrances, and missing prefers-reduced-motion handling with concrete replacement code. ## Quick Start Review the animation code in this pull request diff 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, and correct transform-origin on popovers. This Skill automates that review and outputs a findings table with fixes.

What animation duration should UI elements use?▼

UI animations should stay under 300ms. Button press feedback runs 100-160ms, tooltips 125-200ms, dropdowns 150-250ms, and modals or drawers 200-500ms. Anything slower on a UI element needs explicit justification.

Why is ease-in bad for UI animations?▼

ease-in starts slow, delaying the exact moment the user is watching, which makes interfaces feel sluggish. Entering and exiting elements should use ease-out or a strong custom cubic-bezier like cubic-bezier(0.23, 1, 0.32, 1).

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 animations be removed instead of fixed?▼

Remove animation on keyboard-initiated actions and anything triggered 100+ times per day, since repetition makes motion feel slow. The remedial hierarchy prefers deleting or reducing animation before fixing easing, origins, or performance.

How should animations handle prefers-reduced-motion?▼

Reduced motion means gentler animation, not zero. Keep opacity and color transitions that aid comprehension, but drop transform-based movement. Hover motion should also be gated behind @media (hover: hover) and (pointer: fine).

Related Skills

Explore More Design & Creative Skills→
falentiofalentio

review-animations

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

Community
Intermediate
taxmaxitaxmaxi
1

review-animations

Reviews animation and motion code against the animations.dev craft standards.

Official
Intermediate
ahsanghalibahsanghalib

frontend-motion-review

Build, review, and audit frontend animation and motion code with evidence-backed findings.

Community
Advanced
maxxthedevelopermaxxthedeveloper
3

ui-skills

Enforce UI quality constraints for React/HTML code with Tailwind CSS.

Community
Advanced