# How to Evaluate the Quality of UI Animations Generated by AI Agents with the Skills Library

> Learn to evaluate AI-generated UI animations using the review-animations skill. This framework ensures ten essential quality standards for responsive and accessible animations. Discover the emilkowalski/skills library.

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

---

**The `review-animations` skill in emilkowalski/skills provides a deterministic, rule-based framework to evaluate AI-generated UI animations against ten non-negotiable standards including GPU-only properties, responsive easing, and accessibility requirements.**

The emilkowalski/skills repository delivers a command-line toolkit designed to evaluate the quality of UI animations generated by AI agents through rigorous static analysis. Unlike heuristic AI evaluators, this library applies deterministic rules defined in [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md) to audit motion design patterns in CSS, SCSS, and TypeScript files. By integrating the `review-animations` skill into your development workflow, you can programmatically enforce animation quality gates that prevent performance regressions and accessibility violations.

## Understanding the review-animations Evaluation Criteria

The `review-animations` skill operates through a **Parser**, **Rule Engine**, and **Formatter** architecture defined in [`skills/review-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/SKILL.md). Because the skill runs with `disable-model-invocation: true`, the evaluation produces consistent, reproducible results without LLM variance.

### The Ten Non-Negotiable Standards

The Rule Engine validates every animation declaration against these criteria:

- **Justified motion**: Every animation must serve a clear purpose such as state change or feedback, not merely aesthetic decoration. The parser flags any motion that appears to exist "just because it looks cool."
- **Frequency-appropriate**: High-frequency actions (keyboard shortcuts used >100 times daily) must not trigger animations. The engine cross-references frequency tables in [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md).
- **Responsive easing**: Enter and exit animations must use `ease-out` or strong custom curves. The skill strictly prohibits `ease-in` usage in UI transitions.
- **Sub-300ms UI**: Animation durations must remain under 300ms unless explicitly justified by per-element budgets defined in [`STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/STANDARDS.md).
- **Origin and physical correctness**: Popovers must scale from their trigger element with proper `transform-origin` values, never from `scale(0)`.
- **Interruptibility**: Rapid-triggered motions like toasts and toggles must use CSS transitions or springs rather than keyframe-based animations to allow interruption.
- **GPU-only properties**: Only `transform` and `opacity` may animate. The validator flags any animation affecting layout properties like `width`, `height`, or `margin`.
- **Accessibility**: All animations must respect `prefers-reduced-motion` and implement hover gating through proper media queries.
- **Asymmetric enter/exit**: Deliberate user actions should animate slower than system responses. The engine detects inappropriate symmetric timing.
- **Cohesion**: Motion curves must maintain visual language consistency across components to prevent style fragmentation.

## Running the Animation Review

Install the Skills library once per project to enable the CLI tools:

```bash
npx skills@latest add emilkowalski/skills

```

Execute the reviewer against specific files or entire directories:

```bash

# Review a single component

npx skills review-animations ./src/components/Button.tsx

# Recursive directory review

npx skills review-animations ./src/ui

```

The Parser walks supplied source files (CSS, SCSS, JS/TS, JSX) and extracts animation declarations for rule evaluation.

## Interpreting the Output Format

The Formatter generates two required sections: a Findings table and a Verdict.

### Findings Table

The markdown table lists each violation with Before, After, and Why columns:

```markdown
| Before | After | Why |
|---|---|---|
| `transition: all 300ms` | `transition: transform 200ms ease-out` | Specify exact properties; `all` animates unintended properties off‑GPU |
| `transform: scale(0)` | `transform: scale(0.95); opacity: 0` | Animating from nothing looks unnatural |
| `ease-in` on dropdown | `ease-out` + custom curve | `ease‑in` delays the moment the user watches most |

```

### Verdict Classification

The summary ends with an explicit decision:

- **Block**: Feel-breaking regressions including `ease-in` on UI, `scale(0)` origins, or non-GPU property animations.
- **Approve**: All remaining animations respect duration, easing, interruptibility, and accessibility standards.

## CI/CD Integration

Automate quality gates in your pipeline to evaluate AI-generated code before merge. Example GitHub Actions workflow:

```yaml
name: Animation Review
on: [pull_request]
jobs:
  review:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Install Skills
        run: npx skills@latest add emilkowalski/skills
      - name: Run Review
        run: npx skills review-animations ./src/ui > review.md
      - name: Upload Findings
        uses: actions/upload-artifact@v3
        with:
          name: animation-review
          path: review.md

```

## Summary

- The `review-animations` skill provides deterministic evaluation of AI-generated UI animations through static analysis.
- Ten non-negotiable standards enforce GPU-only properties, proper easing curves, and accessibility requirements.
- The skill references concrete values from [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md) for durations, frequencies, and spring configurations.
- Output includes actionable Findings tables and explicit Block/Approve verdicts suitable for automated CI pipelines.
- Model-invocation-disabled operation ensures consistent, reproducible results across runs.

## Frequently Asked Questions

### What file types does the review-animations skill analyze?

The Parser component processes CSS, SCSS, JavaScript, TypeScript, and JSX/TSX files to extract animation declarations including CSS transitions, keyframes, and JavaScript-based motion configurations.

### How does the skill handle reduced motion preferences?

According to [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md), the accessibility standard requires all animations to respect `prefers-reduced-motion` media queries and implement hover gating. The validator checks for these fallbacks and reports violations where motion persists regardless of user system preferences.

### Can I customize the duration thresholds or easing requirements?

While the ten evaluation standards are non-negotiable, concrete values for duration budgets, frequency tables, and spring configurations are maintained in [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md). You can modify these reference tables to adjust per-element timing budgets while maintaining the architectural constraints of the rule engine.

### Is the evaluation suitable for large codebases?

Yes. Because the skill runs locally with `disable-model-invocation: true` and uses deterministic static analysis rather than LLM inference, it scales efficiently to large repositories. The recursive directory scanning capability processes entire UI folders in a single command execution.