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

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 and 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 – 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 – 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 (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 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.
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 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 lines 76-106.

Code Examples

Example 1: Flagging Unbounded Transitions

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

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

/* 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

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) from canonical values (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. 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 (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.

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