review-animations

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

4|Updated Jul 13, 2024
One-click install
npx skills add https://github.com/PunGrumpy/og-tester --skill review-animations-pungrumpy
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: review-animations
Source: https://github.com/PunGrumpy/og-tester/tree/main/.agents/skills/review-animations
Command: npx skills add https://github.com/PunGrumpy/og-tester --skill review-animations-pungrumpy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Animation code often passes review because it technically works while feeling sluggish, firing too often, or dropping frames. This Skill applies a strict, opinionated review bar to motion code so feel-breaking regressions get flagged instead of merged. ## Core Features & Use Cases - Ten Non-Negotiable Standards: Checks every animation for justified motion, frequency-appropriateness, responsive easing, sub-300ms UI durations, correct transform origins, interruptibility, GPU-only properties, accessibility, asymmetric timing, and cohesion. - Escalation Triggers & Remedial Hierarchy: Flags hard violations like transition: all, scale(0), ease-in on UI, and layout-property animation on sight, then proposes fixes ordered from deletion down to polish. - Structured Output: Produces a findings table plus a tiered verdict ending in an explicit Block or Approve decision, citing exact values from the bundled STANDARDS.md reference. - Use Case: A pull request adds a dropdown that animates with ease-in over 400ms from transform-origin: center. The review flags the easing, duration, and origin, and prescribes a 150-250ms ease-out custom curve scaling from the trigger. ## 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 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) so touch devices do not fire false hovers.