review-animations

Review frontend animation diffs for craft, performance, accessibility, and interaction regressions.

41|5|Updated Sep 30, 2025

Search Tags:#performance #accessibility #frontend #review #animation #motion

Ready to run

npx skills add https://github.com/efekrbas/discord-hypesquad-manager --skill review-animations-efekrbas

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: review-animations
Source: https://github.com/efekrbas/discord-hypesquad-manager/tree/main/.agents/skills/review-animations
Command: npx skills add https://github.com/efekrbas/discord-hypesquad-manager --skill review-animations-efekrbas

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill reviews animation and motion changes against a strict craft, performance, accessibility, and interaction-quality bar so subtle regressions are caught before they ship.

Core Features & Use Cases

Motion Review: Evaluates CSS transitions, keyframes, Framer Motion, WAAPI, hover effects, drawers, popovers, toasts, and loaders.
Quality Checks: Flags weak easing, slow UI timing, wrong transform origins, non-GPU properties, missing reduced-motion support, and poor interruptibility.
Use Case: A frontend engineer can use this Skill to review a UI diff that changes dropdown or modal motion and get a clear verdict with actionable findings.

Quick Start

Ask the review-animations skill to assess the attached motion code and return concrete findings with a clear approve or block 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 frontend animation code for performance and accessibility regressions?▼

Review frontend animation code by evaluating easing, duration, transform origin, reduced-motion support, interruptibility, and GPU-safe properties. This process catches subtle craft, performance, and accessibility regressions in UI motion patterns before they ship.

What's the best way to check if a Framer Motion or WAAPI diff causes interaction quality regressions?▼

Check Framer Motion or WAAPI diffs for interaction quality by verifying interruptibility, easing curves, and transform origins. The review flags weak easing, slow UI timing, and poor interruptibility, returning a clear approve or block verdict with actionable findings.

Does this motion review process evaluate CSS transitions and keyframes for GPU-safe properties?▼

Yes, the motion review process evaluates CSS transitions and keyframes for GPU-safe properties. It flags non-GPU properties and wrong transform origins to ensure frontend diffs maintain strict craft and performance standards across all UI motion patterns.

How do I ensure reduced-motion support is implemented in UI motion patterns like drawers and toasts?▼

Ensure reduced-motion support by reviewing UI motion patterns like drawers, popovers, toasts, and loaders against accessibility standards. The review flags missing reduced-motion support and returns concrete findings to block motion code that ignores user preferences.

Can I get a clear approve or block verdict for hover effects and loaders in my frontend diff?▼

Yes, you can get a clear approve or block verdict for hover effects and loaders in your frontend diff. The review assesses interaction quality, timing, and easing, returning concrete findings that block regressions or approve clean motion code.