review-animations

Reviews animation and motion code against ten craft standards with tiered findings.

Updated Jun 28, 2026
One-click install
npx skills add https://github.com/AO-HyS/aohys.com --skill review-animations-ao-hys
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: review-animations
Source: https://github.com/AO-HyS/aohys.com/tree/main/.agents/skills/review-animations
Command: npx skills add https://github.com/AO-HyS/aohys.com --skill review-animations-ao-hys

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 are caught before merge. ## Core Features & Use Cases - Ten non-negotiable standards: Checks justified motion, frequency-appropriateness, responsive easing, sub-300ms UI durations, transform-origin correctness, interruptibility, GPU-only properties, accessibility, asymmetric timing, and cohesion. - Escalation triggers and remedial hierarchy: Flags transition: all, scale(0), ease-in on UI, keyframes on toasts, and layout-property animation on sight, then proposes fixes ordered from deletion down to polish. - Structured output: Produces a Before/After findings table plus a tiered verdict ending in an explicit Block or Approve decision, citing exact values from STANDARDS.md. - Use Case: A pull request adds a dropdown that fades in over 400ms with ease-in and transform-origin: center. The review flags the easing, duration, and origin, and supplies the corrected cubic-bezier curve and Radix transform-origin variable. ## Quick Start Ask the reviewer to review the animation and motion code in this diff against the animation standards and return findings 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 animation code in a pull request?▼

Run the review on the diff and it measures every animation against ten standards covering easing, duration, origin, interruptibility, and accessibility. Findings come back as a Before/After table with a Block or Approve verdict citing file and line.

What animation issues get flagged automatically?▼

Hard triggers include transition: all, scale(0) entrances, ease-in on UI, animation on keyboard or high-frequency actions, durations over 300ms, keyframes on toasts, animating layout properties, and missing prefers-reduced-motion handling.

Does the review cover Framer Motion performance problems?▼

Yes. It flags Framer Motion x, y, and scale shorthand props because they run on the main thread and drop frames under load, recommending the full transform string for hardware acceleration instead.

When should I use CSS transitions versus springs for UI animation?▼

Use CSS transitions or @starting-style for predetermined motion and springs for dynamic, interruptible, gesture-driven motion like drags. Springs maintain velocity when interrupted while keyframes restart from zero.

What are the limits of this animation review?▼

It only reviews motion code and declines general code review or feature work. It cannot judge rendered feel directly, so uncertain cases are referred to slow-motion, frame-by-frame, and real-device debugging.