reviewing-animations

Reviews animation code in diffs and PRs against ten motion craft standards.

Updated Aug 3, 2026
One-click install
npx skills add https://github.com/m-de-graaff/skills --skill reviewing-animations-m-de-graaff
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: reviewing-animations
Source: https://github.com/m-de-graaff/skills/tree/main/skills/reviewing-animations
Command: npx skills add https://github.com/m-de-graaff/skills --skill reviewing-animations-m-de-graaff

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Motion code that technically runs can still feel wrong — wrong easing, wrong origin, dropped frames, or animations that fire too often. This Skill reviews animation changes in a diff or PR against a defined craft bar and produces a structured verdict instead of vague feedback. ## Core Features & Use Cases - Ten-Standard Review: Checks every animation against rules covering justification, frequency, easing, duration, origin, interruptibility, GPU usage, accessibility, asymmetry, and cohesion. - Flag-on-Sight Patterns: Instantly catches known anti-patterns like transition: all, scale(0) entrances, ease-in on UI, and keyframes on toasts or toggles. - Structured Output: Produces a findings table with Before/After/Why columns citing file:line, followed by a tiered verdict ending in an explicit Block or Approve decision. - Use Case: A teammate opens a PR adding a dropdown transition and a modal entrance. Run this Skill to get a findings table flagging the ease-in curve and centered transform origin, plus a Block verdict with the exact fixes to request. ## Quick Start Review the animation changes in this pull request and tell me whether the motion should ship.

Frequently Asked Questions about reviewing-animations

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I review CSS animations in a pull request?▼

Review animation diffs against concrete standards: check easing curves, durations under 300ms, transform-origin on trigger-anchored elements, GPU-only properties, and reduced-motion handling. This Skill automates that check and returns a findings table with a Block or Approve verdict.

What are common CSS animation mistakes in UI code?▼

Frequent issues include `transition: all`, `ease-in` on UI elements, `scale(0)` entrances, durations over 300ms, keyframes on toasts or toggles, and animated layout properties. Each of these is flagged on sight during a review.

Does this review Framer Motion animations?▼

Yes, it covers spring configs and Framer Motion patterns, including flagging `x`/`y`/`scale` animations on busy pages. Spring bounce quality that cannot be judged from code is called out for a manual feel-check instead of being guessed.

When should an animation be deleted instead of fixed?▼

Delete animations that are high-frequency, keyboard-triggered, or serve no clear purpose such as feedback or spatial consistency. Deletion is the first remedy considered, before reducing, re-easing, or polishing the motion.

What is the difference between reviewing and auditing animations?▼

Reviewing examines motion within a specific diff or PR and ends in a Block or Approve decision. Auditing surveys an entire codebase for motion quality, and a separate finding skill proposes animations that do not exist yet.