skills.rest
alex-jordan547
alex-jordan547COMMUNITY
Explore all skills by this author →
GitHub

review-animations

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

Updated Jul 3, 2026
Search Tags:#code review#accessibility#css#animation#motion design#easing#framer motion
One-click install
npx skills add https://github.com/alex-jordan547/agent-setup --skill review-animations-alex-jordan547
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: review-animations
Source: https://github.com/alex-jordan547/agent-setup/tree/main/archive/review-animations
Command: npx skills add https://github.com/alex-jordan547/agent-setup --skill review-animations-alex-jordan547

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Animation code often passes review because it technically runs, yet feels sluggish, fires too often, or drops frames. This Skill applies a strict motion-craft bar to animation diffs so feel-breaking regressions are caught before merge. ## Core Features & Use Cases - Ten Non-Negotiable Standards: Checks justified motion, frequency-appropriateness, easing, sub-300ms durations, transform origin, interruptibility, GPU-only properties, accessibility, asymmetric timing, and cohesion. - Escalation Triggers & Remedial Hierarchy: Flags transition: all, scale(0), ease-in on UI, and layout-property animation on sight, then proposes fixes ordered from deletion down to polish. - Standards Reference: Pulls exact easing curves, duration tables, spring configs, and gesture rules from STANDARDS.md for cited findings. - Use Case: Paste a pull request diff adding a dropdown or toast animation and receive a findings table plus a Block or Approve verdict grouped by impact tier. ## Quick Start Review the animation code in this pull request diff and give me the findings table and 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 for quality issues?▼

Run the diff through the ten standards: justified motion, frequency-appropriateness, ease-out easing, sub-300ms durations, correct transform-origin, interruptibility, GPU-only properties, reduced-motion support, asymmetric timing, and cohesion. Each violation becomes a finding with a before/after fix.

What CSS properties are safe to animate for performance?▼

Only transform and opacity are safe because they skip layout and paint and run on the GPU. Animating width, height, margin, padding, top, or left triggers all rendering steps and is flagged as a performance finding.

Does Framer Motion hardware-accelerate x and y props?▼

No. Framer Motion x, y, and scale shorthands run on the main thread via requestAnimationFrame and drop frames under load. Use the full transform string such as translateX(100px) to get hardware acceleration.

When should animations be removed instead of fixed?▼

Delete animations on keyboard-initiated or 100+ times per day actions, and on any motion without a valid purpose like spatial consistency or feedback. Deletion is the first move in the remedial hierarchy, before reducing duration or fixing easing.

How should prefers-reduced-motion be handled in animations?▼

Honor prefers-reduced-motion by keeping opacity and color transitions while dropping movement and position changes. Reduced motion means gentler animation, not zero animation, and hover motion should be gated behind hover and pointer media queries.

Related Skills

Explore More Design & Creative Skills→
langgeniuslanggenius

review-animations

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

Official
Intermediate
sapatamuku-creatorsapatamuku-creator

improve-animations

Audits codebase animation code and writes self-contained implementation plans for motion fixes.

Community
Advanced
langgeniuslanggenius

fixing-motion-performance

Audit and fix CSS and JavaScript animation performance issues like layout thrashing and jank.

Official
Intermediate
samymitysamymity
1

browser-qa

Automate end-to-end browser QA for web applications with smoke, interaction, visual regression, and accessibility checks.

Community
Intermediate