review-animations

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

Updated Sep 3, 2026
One-click install
npx skills add https://github.com/xzedm/clipplic-landing --skill review-animations-xzedm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: review-animations
Source: https://github.com/xzedm/clipplic-landing/tree/main/.agents/skills/review-animations
Command: npx skills add https://github.com/xzedm/clipplic-landing --skill review-animations-xzedm

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 craft bar to motion code so feel-breaking regressions get flagged instead of merged. ## Core Features & Use Cases - Standards-Based Review: Evaluates every animation in a diff against ten non-negotiable standards covering justified motion, frequency-appropriateness, easing, sub-300ms durations, transform origin, interruptibility, GPU-only properties, accessibility, asymmetric timing, and cohesion. - Escalation Triggers: Hard-flags known anti-patterns on sight, such as transition: all, scale(0) entrances, ease-in on UI, keyframes on toasts, and missing prefers-reduced-motion handling. - Structured Output: Produces a findings table with before/after fixes and a tiered verdict ending in an explicit Block or Approve decision. - Use Case: A pull request adds a dropdown that scales from center with ease-in over 400ms. The review flags the wrong transform origin, the sluggish easing, and the excessive duration, then prescribes scale(0.95) + opacity with a custom ease-out curve under 300ms. ## Quick Start Review the animation and motion code in this pull request against the animation 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 CSS animation code for quality issues?▼

Review animation code by checking easing curves, durations under 300ms, transform-origin correctness, and GPU-only properties like transform and opacity. This Skill automates that review against ten standards and outputs a findings table with an approve or block verdict.

What animation patterns should be flagged in code review?▼

Flag transition: all, scale(0) entrances, ease-in on UI elements, durations over 300ms, keyframes on rapidly-triggered elements like toasts, and animating layout properties like width or margin. Missing prefers-reduced-motion handling is also a hard flag.

Does this review work with Framer Motion code?▼

Yes, the review covers Framer Motion patterns, including flagging x, y, and scale shorthand props on motion that runs while the page is busy. It also evaluates spring configurations and gesture-driven interruptibility.

Why is animating width or height a performance problem?▼

Animating layout properties like width, height, margin, or top triggers layout recalculation and paint on every frame instead of running on the compositor. The fix is to animate transform and opacity only, which stay on the GPU.

When should an animation be deleted instead of fixed?▼

Delete animations on keyboard-initiated or high-frequency actions seen 100+ times per day, and motion with no clear purpose like spatial consistency or feedback. The remedial hierarchy prefers deletion over reduction, easing fixes, or polish.