The Animation Audit Skill That Changes How You Ship UI

There is a new skill circulating in AI coding circles that is worth paying attention to if you work with UI at all. Emil Kowalski from Linear published /improve-animations, a skill built on a counterintuitive idea: use your most expensive, most capable model to make judgments, and hand the actual work off to any agent, including cheap ones.

That sounds simple. The execution is anything but. The skill comes with a full four-phase workflow, eight audit categories, a plan template, and some of the most specific animation parameters I have seen written down in one place.

The Core Insight

Judgment compounds. Understanding an animation library, deciding what is worth fixing, writing a spec that a zero-context executor can follow precisely: those are judgment-heavy tasks. They get more valuable the more capable the model making them.

Execution does not require a frontier model. Writing a CSS transition, applying a cubic-bezier value, adjusting a duration: those are mechanical. A cheaper model does them fine.

The split is not about saving money. It is about applying capability where it actually matters.

The Four-Phase Workflow

Phase 1: Reconnaissance

Before touching anything, map the territory. Identify the tech stack, where animations live across the codebase, existing conventions, product personality, and a frequency map: which elements trigger hundreds of times a day versus once a month. Frequency determines severity.

Phase 2: Parallel Audit

Audit across eight categories (more on those below). On large repos, spin up read-only sub-agents per category running in parallel. Each sub-agent returns file:line plus evidence, nothing more. No fix suggestions. Three depth levels: quick, standard, deep.

Phase 3: Review and Prioritize

The main agent re-reads every finding against the actual code. False positives get discarded. The output is a findings table sorted by leverage: impact divided by cost. Then it stops and waits for you to pick which findings graduate to plans.

Phase 4: Write Plans

Each selected finding generates a numbered plan file (NNN-slug.md), stamped with the current commit, maintaining a plans/README.md that tracks execution order, dependencies, and status.

The Eight Audit Categories

1. Purpose and Frequency

Every animation must answer: why does this move? Frequency determines whether it lives or dies:

• 100+ times a day (shortcuts, command palette): never animate these. Raycast toggles have no animation for this reason.
• Dozens a day (hover, list navigation): delete or drastically reduce.
• Occasionally (modal, drawer, toast): standard animation.
• Rarely (onboarding, celebration moments): worth the delight.

The strongest fix is often removing an animation entirely.

2. Easing and Duration

ease-in on UI elements is almost always wrong. It starts slow, which delays the moment the user is looking at. Decision hierarchy: ease-out for entries and exits, ease-in-out for on-screen movement, ease for hover, linear for continuous motion. CSS default easings are too weak: introduce strong curves like --ease-out: cubic-bezier(0.23, 1, 0.32, 1).

UI animations should never exceed 300ms:

• Button feedback: 100-160ms
• Tooltip: 125-200ms
• Dropdown: 150-250ms
• Modal/drawer: 200-500ms

3. Physics and Origin

Never use scale(0). Nothing in the real world appears from nothing. Use scale(0.9-0.97) plus opacity instead. Popovers and dropdowns should scale from the trigger direction, not the center. Use :active with scale(0.97) for press feedback.

4. Interruptibility

CSS transitions redirect smoothly from the current state; keyframes replay from zero. Elements that trigger rapidly and repeatedly must use transitions or springs. Gesture-driven animations need spring physics to preserve velocity on interrupt. Apple-style spring config: { type: "spring", duration: 0.5, bounce: 0.2 }.

Also: asymmetric timing. A user deliberate action can be slow; the system response must be fast.

5. Performance

Only animate transform and opacity. transition: all is always a problem. A lesser-known issue: Framer Motion x/y/scale shorthand does not use hardware acceleration and runs on the main thread. Write the full transform string instead. Blur during transitions should stay below 20px.

6. Accessibility

prefers-reduced-motion means “less and gentler,” not “off completely.” Preserve opacity feedback, remove displacement. Hover animations should be gated with @media (hover: hover) and (pointer: fine) to avoid triggering on touch.

7. Consistency and Tokens

Animation personality must match product personality. Five slightly different handwritten cubic-bezier curves is a signal to merge. Stagger between 30-80ms for group entries. Decorative stagger must never block interaction. Crossfades can use blur(2px) to mask ghosting.

8. Missed Opportunities

The only addition category. State switches that teleport, panels that appear without a spatial origin, high-emotion moments that go uncelebrated. Report only confirmed UX gaps, not wish lists.

The Plan Template

Every plan is written for the weakest possible executor: zero context, zero taste. Plans must be self-contained and precise:

• Problem: file:line plus the current code as-is
• Target: exact end-state code with specific numbers, not “use a better easing”
• Repo conventions: show the executor a correct example from the existing codebase to copy
• Boundaries: what not to touch, and a rule that if the code has drifted from the plan post-commit, the agent stops and reports rather than improvising
• Verification: mechanical checks (typecheck, build) plus feel checks: slow playback to 10 percent speed, hammer toggle switches, switch to reduced-motion

My Take

I have been running AI coding agents for a while and the judgment versus execution split is something I have felt intuitively but never seen written down this precisely. The plan template is particularly useful: it solves the problem where cheap model executors follow vague instructions and produce sloppy work.

The eight audit categories are worth bookmarking on their own. They are a framework for thinking about UI animation that transfers across tools and models. Whether you use this specific skill or not, the thinking behind it is worth carrying into how you spec animation work for any AI agent.

If you are running Fable, the skill page mentions it is available through July 12, so the clock is ticking if you want to use the original through Anthropic directly. But the skill itself and the workflow it encodes do not expire.

For a broader look at AI agent skills and how they fit into larger workflows, this guide on sharing Skills across multiple AI agents covers the organizational patterns that make skills reusable at scale.