skills.rest
AlexW00
AlexW00COMMUNITY
Explore all skills by this author →
Website𝕏@AlexWeichartGitHub

review-animations

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

70|4|Updated Jul 22, 2025
Search Tags:#code review#performance#accessibility#css#animation#easing#framer motion
One-click install
npx skills add https://github.com/AlexW00/Zettel --skill review-animations-alexw00
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: review-animations
Source: https://github.com/AlexW00/Zettel/tree/main/.agents/skills/review-animations
Command: npx skills add https://github.com/AlexW00/Zettel --skill review-animations-alexw00

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 accessibility. This Skill applies a strict, opinionated review bar to motion code so feel-breaking regressions get flagged instead of merged. ## Core Features & Use Cases - Standards-based review: Measures every animation in a diff against ten non-negotiable rules covering easing, duration, transform origin, interruptibility, GPU-only properties, and accessibility. - Escalation triggers: Hard-flags known anti-patterns on sight, such as transition: all, scale(0) entrances, ease-in on UI, and animation on keyboard-triggered actions. - Structured output: Produces a Before/After/Why findings table plus a tiered verdict ending in an explicit Block or Approve decision. - Use Case: A pull request adds a dropdown that fades in over 400ms with ease-in and transform-origin: center. The review flags the sluggish easing, the over-300ms duration, and the wrong origin, citing exact fixes from STANDARDS.md. ## Quick Start Review the animation and motion 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 duration, correct transform origin, interruptibility, GPU-only properties, reduced-motion support, asymmetric timing, and cohesion. Violations become findings with a block or approve verdict.

What CSS properties should be animated for good performance?▼

Only animate transform and opacity, which 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 during review.

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

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

Why is ease-in bad for UI animations?▼

ease-in starts slow, delaying the exact moment the user is watching, so a 200ms ease-in feels slower than a 200ms ease-out. Entering and exiting elements should use ease-out or a strong custom cubic-bezier curve instead.

When should animations be removed instead of fixed?▼

Remove animation on actions seen 100+ times per day, such as keyboard shortcuts and command palette toggles, and drastically reduce motion seen tens of times daily. The remedial hierarchy prefers deletion first, then reduction, before easing or origin fixes.

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 should also be gated behind @media (hover: hover) and (pointer: fine) to avoid false triggers on touch.

Related Skills

Explore More Software Engineering Skills→
AgentWorkforceAgentWorkforce
812

review-animations

Reviews animation and motion code against craft standards for easing, duration, performance, and accessibility.

Official
Intermediate
sapatamuku-creatorsapatamuku-creator

improve-animations

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

Community
Advanced
aspelldennyaspelldenny

review

Review code diffs for logic errors, security holes, and performance regressions before merging.

Community
Intermediate
jamesgirouxjamesgiroux
3

mechanical-review

Run deterministic Python scripts to lint typography and detect writing anti-patterns.

Community
Intermediate