review-animations

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

Updated Aug 29, 2026
One-click install
npx skills add https://github.com/Seyamalam/pstu_final --skill review-animations-seyamalam
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: review-animations
Source: https://github.com/Seyamalam/pstu_final/tree/main/.agents/skills/review-animations
Command: npx skills add https://github.com/Seyamalam/pstu_final --skill review-animations-seyamalam

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 to polish. - Structured output: Produces a Before/After/Why 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 with ease-in over 400ms from scale(0). The review flags the easing, duration, and origin, and prescribes a 150-250ms ease-out transition from scale(0.95) anchored to the trigger. ## Quick Start Review the animation and transition 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?

Check each animation against ten standards: justified purpose, frequency-appropriate motion, ease-out easing, sub-300ms UI durations, correct transform-origin, interruptibility, GPU-only properties, reduced-motion support, asymmetric timing, and cohesion. Violations become findings with a block or approve verdict.

What easing and duration should UI animations use?

Entering and exiting elements use ease-out with a strong custom cubic-bezier such as cubic-bezier(0.23, 1, 0.32, 1), never ease-in. UI animations stay under 300ms: button feedback 100-160ms, tooltips 125-200ms, dropdowns 150-250ms, modals 200-500ms.

Does this review cover Framer Motion animations?

Yes. It flags Framer Motion x, y, and scale shorthand props because they run on the main thread via rAF and drop frames under load. The recommended fix is the full transform string, which is hardware accelerated.

Why is animating width or height a performance problem?

Animating width, height, margin, padding, top, or left triggers layout, paint, and composite on every frame. Only transform and opacity skip layout and run on the GPU, so layout-property animation is flagged as a performance finding.

When should an animation be deleted instead of fixed?

Delete animations on keyboard-initiated or 100-plus-times-per-day actions, and on any motion without a valid purpose such as spatial consistency, state indication, or feedback. Deletion is the first move in the remedial hierarchy, before reducing or re-easing.

How should animations handle prefers-reduced-motion?

Reduced motion means gentler animation, not zero: keep opacity and color transitions but drop transform-based movement. Hover animations must also be gated behind @media (hover: hover) and (pointer: fine) to avoid false triggers on touch.