# How to Review Animation Quality Against Non-Negotiable Standards: A Complete Guide

> Master animation quality review with emilkowalski/skills. Audit code against ten strict standards using a deterministic framework for accurate findings and verdicts.

- Repository: [Emil Kowalski/skills](https://github.com/emilkowalski/skills)
- Tags: how-to-guide
- Published: 2026-07-28

---

**The `review-animations` skill in emilkowalski/skills provides a deterministic, model-free framework that audits code changes against ten strict animation standards defined in [`SKILL.md`](https://github.com/emilkowalski/skills/blob/main/SKILL.md) and [`STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/STANDARDS.md), outputting a findings table with a tiered verdict.**

Reviewing animation quality requires more than subjective preference—it demands a disciplined, repeatable standard. The **emilkowalski/skills** repository solves this with a self-contained **review-animations** skill that transforms raw code diffs into actionable audit reports. This markdown-based system operates without model invocation, ensuring every animation decision is traceable to documented non-negotiables.

## The Two-File Architecture

The skill relies on two immutable artifacts stored in `skills/review-animations/`:

- **[`SKILL.md`](https://github.com/emilkowalski/skills/blob/main/SKILL.md)** – Defines the **operating posture**, the **Ten Non-Negotiable Standards**, escalation triggers, remedial hierarchy, and the required output schema. According to the source code, this file includes a metadata block that sets `disable-model-invocation: true`, ensuring deterministic, reproducible reviews.

- **[`STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/STANDARDS.md)** – Centralizes concrete values such as **cubic-bezier curves**, **duration tables** (sub-300ms for UI), and **physics rules** (e.g., scale ranges 0.9–0.97). By externalizing thresholds from logic, updates propagate automatically to all future reviews.

## The Ten Non-Negotiable Standards

Each animation must satisfy ten hard rules documented in [`skills/review-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/SKILL.md) (lines 19-42). These cover:

1. **Justification** – Motion must serve user understanding, not decoration.
2. **Frequency** – Animation intensity must match interaction frequency.
3. **Easing** – Physical correctness requires specific curves; `ease-in` is banned for UI entrances.
4. **Duration** – Micro-interactions must complete under **300ms**; exits may extend to 200ms.
5. **Origin** – Scaling elements must originate from their logical trigger point, not viewport center.
6. **Interruptibility** – All motion must be cancellable mid-flight without jank.
7. **GPU-Only Properties** – Animate only `transform` and `opacity`; `transition: all` is prohibited.
8. **Accessibility** – Respect `prefers-reduced-motion` without exception.
9. **Asymmetric Timing** – Enter and exit animations must follow different duration/easing profiles.
10. **Cohesion** – Motion language must remain consistent across the feature set.

## Escalation Triggers and the Remedial Hierarchy

**Aggressive Escalation Triggers** ([`SKILL.md`](https://github.com/emilkowalski/skills/blob/main/SKILL.md) lines 43-61) enforce immediate **Block** verdicts when code matches specific anti-patterns:

- **`transition: all`** – Violates the GPU-only property rule.
- **`ease-in` on UI elements** – Creates perceived latency.
- **Animation on keyboard shortcuts** – Accessibility failure.
- **Missing reduced-motion guards** – Legal/compliance risk.

If no trigger fires, the **Remedial Preference Hierarchy** (lines 62-74) dictates the fix order:

1. **Delete** – Remove unnecessary motion.
2. **Reduce** – Shorten duration or simplify the effect.
3. **Fix easing** – Replace with standards-compliant curves from [`STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/STANDARDS.md).
4. **Adjust origin** – Correct `transform-origin` to match trigger geometry.
5. **Polish** – Refine timing functions only after structural correctness.

## Running a Review Workflow

The workflow executes deterministically since the skill is **model-free**:

1. **Load the diff** – The Instagit runner supplies changed files.
2. **Identify animation statements** – Parse CSS, Tailwind, Framer Motion props, or WAAPI calls.
3. **Validate against standards** – Check each statement against the ten rules, referencing [`STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/STANDARDS.md) for exact cubic-bezier values (e.g., `[0.25, 0.46, 0.45, 0.94]` for ease-out).
4. **Apply escalation triggers** – Immediate **Block** if any trigger pattern matches.
5. **Determine remediation** – Walk the hierarchy to select the minimal-impact fix.
6. **Render output** – Generate the findings table and tiered verdict exactly as specified in [`SKILL.md`](https://github.com/emilkowalski/skills/blob/main/SKILL.md) lines 76-106.

## Code Examples

### Example 1: Flagging Unbounded Transitions

A diff introducing generic transitions triggers the GPU-only property rule:

```json
{
  "skill": "review-animations",
  "diff": [
    "components/Toast.css: .toast { transition: all 300ms; }",
    "components/Popover.css: .popover { transform-origin: center; }"
  ]
}

```

**Generated Output:**

| Before | After | Why |
|---|---|---|
| `transition: all 300ms` | `transition: transform 200ms var(--ease-out)` | Unbounded property animation blocks GPU-only rule |
| `transform-origin: center` | `transform-origin: var(--transform-origin)` | Popovers must scale from their trigger per physicality standards |

**Verdict:**

```

Block
- `transition: all` animates unintended properties (GPU-only rule violation).
- `transform-origin: center` breaks physical-correctness for popovers.

```

### Example 2: Correcting Easing Curves

Applying the remedial hierarchy to fix incorrect easing:

```css
/* Before */
.button { transition: ease-in 250ms; }

```

**Review Finding:**

| Before | After | Why |
|---|---|---|
| `transition: ease-in 250ms` | `transition: var(--ease-out) 250ms` | `ease-in` delays user feedback; `ease-out` is required for UI interactions per [`STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/STANDARDS.md) |

**Verdict:**

```

Approve
- Easing corrected; duration < 300ms; no other violations.

```

## Summary

- **review-animations** is a **model-free** skill (`disable-model-invocation: true`) in `emilkowalski/skills` ensuring deterministic audits.
- **Two-file architecture** separates policy ([`SKILL.md`](https://github.com/emilkowalski/skills/blob/main/SKILL.md)) from canonical values ([`STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/STANDARDS.md)), making standards updates traceable.
- **Ten Non-Negotiable Standards** govern justification, easing, duration, origin, interruptibility, GPU properties, accessibility, and cohesion.
- **Escalation triggers** cause immediate **Block** verdicts for anti-patterns like `transition: all` or `ease-in` on UI.
- **Remedial hierarchy** prioritizes deletion over polishing, enforcing "justified motion" principles.
- **Strict output format** requires a findings table and tiered verdict (`Block`, `Approve`, etc.) for machine-readable CI integration.

## Frequently Asked Questions

### What makes the review-animations skill "model-free"?

The skill declares `disable-model-invocation: true` in its metadata block within [`skills/review-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/SKILL.md). This means the entire logic resides in declarative markdown files rather than external code or AI models, guaranteeing 100% reproducibility and auditability across every review run.

### How does the skill handle accessibility requirements?

The **Ten Non-Negotiable Standards** explicitly include `prefers-reduced-motion` compliance as a hard rule. Any animation that fails to respect this media query triggers an immediate **Block** verdict under the escalation triggers, preventing motion-sensitive users from receiving a degraded experience.

### Where are the specific easing curves and duration values defined?

All numeric thresholds, cubic-bezier curves (e.g., `[0.33, 1, 0.68, 1]` for ease-out), and duration tables (sub-300ms for UI) are centralized in **[`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md)** (lines 18-49). The skill references these exact values when constructing findings, ensuring reviewers never approximate standards.

### Can this skill integrate with CI/CD pipelines?

Yes. Because the output format requires a structured findings table followed by a machine-readable tiered verdict (`Block`, `Approve`, etc.), CI systems can parse the markdown directly. The deterministic, model-free architecture ensures consistent results across local development and automated cloud runners.