skills.rest
maxentr
maxentrCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

review-animations

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

Updated Sep 21, 2026
Search Tags:#code review#accessibility#motion design#easing#framer motion#animation review#css transitions
One-click install
npx skills add https://github.com/maxentr/la-cuisine-de-mm --skill review-animations-maxentr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: review-animations
Source: https://github.com/maxentr/la-cuisine-de-mm/tree/main/.agents/skills/review-animations
Command: npx skills add https://github.com/maxentr/la-cuisine-de-mm --skill review-animations-maxentr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Animation code often passes review because it technically works while feeling sluggish, firing too often, animating layout properties, or ignoring reduced-motion preferences. This Skill applies a strict, opinionated review bar to motion code so feel-breaking regressions get flagged before they ship. ## Core Features & Use Cases - Ten Non-Negotiable Standards: Checks every animation for justified motion, frequency-appropriateness, responsive easing, sub-300ms UI durations, correct transform origins, interruptibility, GPU-only properties, accessibility, asymmetric timing, and cohesion. - Escalation Triggers & Remedial Hierarchy: Flags hard violations like transition: all, scale(0), ease-in on UI, and keyframes on toasts, then proposes fixes ordered from deletion down to polish. - Precise Standards Reference: Cites exact cubic-bezier curves, duration tables, spring configs, and gesture rules from STANDARDS.md instead of approximating values. - Use Case: A developer opens a pull request adding a dropdown that animates with ease-in over 400ms from scale(0). The review flags the easing, duration, and origin, and returns a findings table with concrete replacement code. ## Quick Start Ask the AI to review the animation and motion code in your current diff against the animation craft standards and produce a findings table with a 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 CSS animation code for quality issues?▼

Check each animation against concrete standards: easing must be ease-out for entering elements, UI durations stay under 300ms, only transform and opacity animate, and popovers scale from their trigger origin. This Skill automates that review and returns a findings table with fixes.

What are common CSS animation performance mistakes?▼

The most common mistakes are animating layout properties like width, height, margin, or top instead of transform and opacity, using transition: all, and driving child transforms via a parent CSS variable. These trigger layout and paint work or style recalculation storms.

Should I use CSS transitions or keyframes for toasts and toggles?▼

Use CSS transitions for rapidly triggered elements like toasts and toggles because transitions can be interrupted and retargeted mid-animation. Keyframes restart from zero when retriggered, which causes 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 can drop frames under load. Use the full transform string, such as 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 drop transform-based movement, and gate hover animations behind @media (hover: hover) and (pointer: fine).

When should an animation be removed instead of fixed?▼

Remove animation on keyboard-initiated actions and anything seen 100+ times per day, such as command palette toggles. Motion without a valid purpose like spatial consistency, feedback, or state indication on frequently-seen elements should be deleted rather than tuned.

Related Skills

Explore More Design & Creative Skills→
langgeniuslanggenius

review-animations

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

Official
Intermediate
taxmaxitaxmaxi
1

review-animations

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

Official
Intermediate
adobeadobe
162

code-review

Review AEM Edge Delivery Services code for quality, performance, and EDS standards.

Official
Advanced
maxxthedevelopermaxxthedeveloper
3

ui-skills

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

Community
Advanced