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

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 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. 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.
• 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.
• 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:

npx skills@latest add emilkowalski/skills

Execute the reviewer against specific files or entire directories:

# 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:

| 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:

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 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, 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. 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}