skills.rest
fayazara
fayazaraCOMMUNITY
Explore all skills by this author →
𝕏@fayazaraGitHub

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
One-click install
npx skills add https://github.com/fayazara/pdfstudio-demo --skill review-animations-fayazara
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
Aayush31-AiAayush31-Ai

framer-motion

Create animations and transitions in React applications using Framer Motion.

Community
Intermediate
mmartinsolivmmartinsoliv

animation

Design UI animations with transform and opacity effects and reduced-motion fallbacks.

Community
Intermediate
mvillmowmvillmow
18

quality-run-linters

Run configured linters including mojo-format, markdownlint, and pre-commit checks in check or fix mode.

Community
Intermediate
k97k97
4

review-animations

Evaluate UI animation code for performance, accessibility, and physical correctness.

Community
Advanced