How to Review Animation Code Against Design Standards in the Emilkowalski Skills Repository

You can systematically review animation code against design standards by executing the review-animations skill, which audits your implementation against the canonical rules defined in STANDARDS.md and surfaces violations with specific line references and remediation guidance.

The emilkowalski/skills repository provides a structured framework for ensuring UI animations meet rigorous design system requirements. By leveraging dedicated animation review tools, development teams can automatically validate motion implementation against visual language, performance budgets, and accessibility criteria. This guide walks through the complete workflow from standards discovery to clean audit passes.

Locate the Canonical Standards Document

All animation design standards reside in skills/review-animations/STANDARDS.md. This file codifies the visual language requirements including easing curves, timing constraints, and motion direction patterns. It also defines performance limits such as CPU/GPU budgets and frame-rate targets, alongside accessibility considerations like prefers-reduced-motion support and motion-sickness mitigation strategies.

Before running any audits, verify your local copy of this file matches the current design system version. The standards document uses explicit numerical thresholds—for example, specifying maximum animation durations of 300ms and mandatory cubic-bezier easing functions—to eliminate subjective interpretation during code review.

Execute the Review Skill

The audit logic is defined in skills/review-animations/SKILL.md. This skill file instructs the Instagit workflow engine to parse animation source files, compare them against STANDARDS.md, and generate a detailed violation report.

To initiate a review, invoke the skill with your target animation directory:

from instagit.skills import run_skill

# Path to the directory containing your animation source files

animation_dir = "src/ui/animations"

# Run the skill – it reads STANDARDS.md internally

result = run_skill(
    skill_name="review-animations",
    target_path=animation_dir,
)

# Output the summary

for issue in result["issues"]:
    print(issue)

The skill recursively scans JavaScript, CSS, and framework-specific animation files within the target path. It extracts timing values, easing functions, and media query usage, then compares these against the permissible ranges defined in the standards document.

Interpret the Audit Output

Violation reports follow the format documented in skills/improve-animations/AUDIT.md. Each line item includes a timestamp or line number, the specific rule violated, and the measured deviation from the standard.

Typical output appears as:

✖ 01:08 – Duration exceeds 300 ms (found 540 ms) – shorten the animation
✖ 02:13 – Easing curve differs from recommended cubic-bezier(0.4, 0, 0.2, 1)
✖ 03:05 – Missing prefers-reduced-motion fallback

The line references map directly to your source code, enabling precise navigation to violation sites. Severity indicators distinguish between hard failures (breaking accessibility guidelines) and warnings (suboptimal performance patterns).

Remediate Using the Planning Template

After identifying violations, use skills/improve-animations/PLAN-TEMPLATE.md to structure your fixes. This template provides checkboxes for each category of violation: timing adjustments, easing curve updates, and accessibility fallback implementation.

For a duration violation at line 108, the remediation workflow involves:

1. Opening the offending file (e.g., src/ui/animations/slide-in.js)
2. Locating the animation configuration block
3. Reducing the duration to ≤300ms per STANDARDS.md
4. Adding the prefers-reduced-motion media query if missing
5. Re-running the skill to verify the clean pass

Iterative Validation Workflow

The review process operates as a validation loop. After applying fixes from the planning template, re-execute the skill command until the audit returns zero violations. This iterative approach ensures that refactored animations comply with both the letter and intent of the design standards.

Complex animation sequences may require multiple passes, particularly when adjusting easing curves that affect perceived duration. The skill caches previous results to highlight only new or remaining violations on subsequent runs.

Summary

• skills/review-animations/STANDARDS.md contains the authoritative design system rules for motion, performance, and accessibility.
• skills/review-animations/SKILL.md provides the automated audit engine that validates code against these standards.
• Audit outputs reference specific line numbers and provide actionable remediation guidance.
• skills/improve-animations/PLAN-TEMPLATE.md structures the fix implementation process.
• Iterative execution of the skill guarantees complete compliance before code merge.

Frequently Asked Questions

Where are the animation design standards documented?

The canonical standards reside in skills/review-animations/STANDARDS.md within the emilkowalski/skills repository. This file specifies easing curves, duration limits, performance budgets, and accessibility requirements like prefers-reduced-motion support.

How do I fix a duration violation reported by the skill?

Navigate to the line number indicated in the audit output (e.g., line 108), locate the animation duration property, and reduce it to 300ms or less as mandated by the standards. Re-run the skill to confirm the violation clears.

What is the difference between review-animations and improve-animations?

The review-animations skill (defined in SKILL.md) performs the automated audit and generates violation reports. The improve-animations directory contains supporting resources like AUDIT.md (example outputs) and PLAN-TEMPLATE.md (remediation workflows) to help developers act on those reports.

How does the skill handle accessibility requirements?

The audit explicitly checks for prefers-reduced-motion media queries in animation code. If your animation lacks this fallback, the skill flags it as a violation in the output, referencing the specific file and line where the media query should be implemented according to STANDARDS.md.

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