skills.rest
w0lzard
w0lzardCOMMUNITY
Explore all skills by this author →
GitHub

review-animations

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

Updated Jul 1, 2026
Search Tags:#code review#accessibility#motion design#easing#framer motion#animation review#css transitions
One-click install
npx skills add https://github.com/w0lzard/Wolzard-s-Marketplace --skill review-animations-w0lzard
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: review-animations
Source: https://github.com/w0lzard/Wolzard-s-Marketplace/tree/main/plugins/personal-skills/skills/review-animations
Command: npx skills add https://github.com/w0lzard/Wolzard-s-Marketplace --skill review-animations-w0lzard

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 bar so those issues are caught before merge. ## Core Features & Use Cases - Standards-based review: Evaluates every animation against ten non-negotiable rules covering justified motion, frequency-appropriateness, easing, sub-300ms durations, origin correctness, interruptibility, GPU-only properties, accessibility, asymmetric timing, and cohesion. - Precise value citations: Pulls exact easing curves, duration tables, spring configs, and gesture thresholds from a bundled STANDARDS.md reference instead of approximating. - Structured verdict output: Produces a Before/After/Why findings table plus a tiered verdict ending in an explicit Block or Approve decision with file:line citations. - Use Case: Before merging a PR that adds a dropdown, toast, or drag gesture, run this review to catch transition: all, scale(0) entrances, ease-in on UI, or Framer Motion shorthand props that drop frames under load. ## Quick Start Review the animation and motion 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 CSS animation code for quality issues?▼

Review each animation against concrete standards: ease-out for entering elements, durations under 300ms for UI, transform and opacity only for GPU acceleration, and correct transform-origin on popovers. This Skill automates that check and outputs a Before/After/Why findings table with a block or approve verdict.

What are the most common CSS animation mistakes in UI code?▼

The most common mistakes are transition: all, ease-in on UI elements, scale(0) entrances, animating layout properties like width or height, and missing prefers-reduced-motion handling. Each of these is flagged on sight during review as a hard escalation trigger.

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

Use CSS transitions for rapidly-triggered elements like toasts and toggles because they are interruptible and retarget from current state. Keyframes restart from zero when re-triggered, which causes visible jumps in dynamic UI.

Does Framer Motion hardware-accelerate x, y, and scale props?▼

No. Framer Motion's 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.

When should an animation be removed instead of fixed?▼

Remove animations on keyboard-initiated actions and elements seen 100+ times per day, since motion there makes the interface feel slow. The remedial hierarchy prefers deletion first, then reduction, before attempting easing or origin fixes.

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

Honor prefers-reduced-motion by keeping opacity and color transitions while dropping transform-based movement, rather than removing all animation. Also gate hover animations behind @media (hover: hover) and (pointer: fine) to avoid false triggers on touch devices.

Related Skills

Explore More Design & Creative Skills→
beelabstudiobeelabstudio

review-animations

Reviews animation and motion code against ten non-negotiable craft standards.

Official
Intermediate
taxmaxitaxmaxi
1

animation-performance

Diagnose and fix dropped frames in web animations using compositor-friendly properties.

Official
Intermediate
langgeniuslanggenius

rams

Reviews code files for WCAG accessibility violations and visual design issues.

Official
Intermediate
Postpartum-genushyacinthus29Postpartum-genushyacinthus29
8

dotnet-csharpier

Format C# and XML files using CSharpier.

Community
Intermediate