review-animations

Evaluate CSS and Framer Motion animations for easing, duration, and GPU-accelerated properties.

9|1|Updated Jul 11, 2026

Search Tags:#ui #code review #performance #accessibility #animation #motion

Ready to run

npx skills add https://github.com/fayazara/pdfstudio-demo --skill review-animations-fayazara

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: review-animations
Source: https://github.com/fayazara/pdfstudio-demo/tree/main/.agents/skills/review-animations
Command: npx skills add https://github.com/fayazara/pdfstudio-demo --skill review-animations-fayazara

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill addresses the common issue of inconsistent, performant-heavy, or poorly executed UI animations that degrade user experience and break the feeling of a polished product.

Core Features & Use Cases

Craft-Focused Review: Evaluates animation code against strict standards for easing, duration, and physical correctness.
Performance Optimization: Identifies non-GPU property usage and layout-thrashing animations.
Use Case: Use this skill when reviewing pull requests containing Framer Motion or CSS transition code to ensure all motion is justified, interruptible, and accessible.

Quick Start

Use the review-animations skill to analyze the motion code in the current diff against the established design engineering standards.

Frequently Asked Questions about review-animations

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

FAQPage Schema

How do I review UI animation code for performance and accessibility issues?▼

To review UI animation code, evaluate the motion against strict standards for easing curves, duration budgets, and GPU-accelerated property usage to ensure physical correctness and prevent layout thrashing.

What are the best standards for enforcing high-craft motion design in pull requests?▼

Enforcing high-craft motion design requires checking that all UI transitions are justified, interruptible, and accessible, while adhering to industry-leading motion philosophy regarding physical correctness and duration budgets.

How do I optimize CSS transitions to prevent layout thrashing and non-GPU usage?▼

Optimize CSS transitions by identifying non-GPU property usage and enforcing GPU-accelerated properties, which eliminates layout thrashing and ensures animations perform smoothly without degrading user experience.

Does this animation review approach work with Framer Motion and CSS transition code?▼

Yes, this animation review approach works with Framer Motion and CSS transition code, analyzing gesture-driven interactions and UI transitions to verify they meet established design engineering and accessibility standards.

Why do my UI animations look inconsistent and degrade product polish?▼

UI animations look inconsistent and degrade product polish when they execute poorly without adhering to specific easing curves, duration budgets, and physical correctness, breaking the feeling of a polished product.