review-animations

Reviews animation and motion code against Emil Kowalski's craft standards with tiered findings.

Updated Sep 15, 2026
One-click install
npx skills add https://github.com/Nadav011/nadavai-claude --skill review-animations-nadav011
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: review-animations
Source: https://github.com/Nadav011/nadavai-claude/tree/main/plugins/nadavai/skills/review-animations
Command: npx skills add https://github.com/Nadav011/nadavai-claude --skill review-animations-nadav011

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 instead of shipped. ## 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. - Hard escalation triggers: Instantly flags transition: all, scale(0) entrances, ease-in on UI, keyframes on toasts, layout-property animation, and missing prefers-reduced-motion handling. - Structured verdict output: Produces a Before/After/Why findings table plus a tiered verdict ending in an explicit Block or Approve decision. - Use Case: Before merging a PR that adds a dropdown, toast system, or drag gesture, run this review to catch non-GPU animations, wrong transform origins, and symmetric press timing, with exact fixes cited from STANDARDS.md. ## Quick Start Review the animation code in this pull request against the motion craft standards 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 quality in a pull request?

Run this review on the diff to check every animation against ten standards covering easing, duration, origin, interruptibility, and accessibility. It returns a Before/After/Why findings table and a tiered verdict ending in Block or Approve.

What animation mistakes should block a UI code review?

Hard blocks include transition: all, scale(0) entrances, ease-in on UI, durations over 300ms without justification, animating layout properties like width or margin, and missing prefers-reduced-motion handling. Any feel-breaking regression triggers a Block verdict.

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

Use CSS transitions for rapidly-triggered elements like toasts and toggles because they can be interrupted and retargeted mid-animation. Keyframes restart from zero when retriggered, which causes visible jumps in dynamic UI.

Why do Framer Motion x and y props drop frames under load?

Framer Motion shorthand props like x, y, and scale run on the main thread via requestAnimationFrame and are not hardware-accelerated. Use the full transform string such as translateX(100px) to get GPU-accelerated motion that stays smooth under load.

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 motion behind @media (hover: hover) and (pointer: fine).

When should an animation be removed instead of fixed?

Delete animations on keyboard-initiated or 100+ times-per-day actions, and on any motion without a valid purpose like spatial consistency or feedback. The remedial hierarchy prefers deletion first, then reduction, before easing or origin fixes.