Development · Tip
Audit-Then-Execute Animation Workflow
Two-stage AI workflow for auditing and fixing UI animations across codebases
A development workflow that uses a frontier model to audit codebase animations and cheaper agent models to implement fixes. The audit outputs severity-ranked findings with file lines, which are converted into self-contained plan specs for executor agents to run independently.
How it works
The /improve-animations skill: 1) run it with the most capable model — it maps the codebase, reads every animation, and produces numbered, severity-ranked findings with exact file:line locations and fix summaries, ordered by leverage; 2) ask which findings to turn into plans and it writes plans/ as self-contained specs (exact values, code excerpts, verification steps) any executor can run; 3) hand the execution to cheaper models. In the demo the recommendation was findings #1, #2 (+#6 folded in), #3, #4, #5 — 'those five fix everything feel-breaking, and #2 gives the repo motion tokens every later fix builds on.'
What it's for
- Audit an entire frontend codebase for broken or inconsistent animations
- Generate structured motion tokens and design system animation specs
- Offload tedious UI polish tasks to cheaper AI coding agents with self-contained plans
Key points
- Run a dedicated skill (like /improve-animations) using a frontier AI model
- Map the repository to locate every animation declaration across files
- Produce numbered, severity-ranked findings with exact file and line references
- Prioritize high-leverage fixes, such as establishing core motion tokens early
- Generate self-contained execution specs in a plans/ directory with exact values and verification steps
- Delegate plan execution to cheaper, faster AI coding models
Pricing
Free
Details
- Type
- Tip
- Category
- Development
- Topic
- AI Workflows
- Platforms
- Command line
- For
- Frontend engineers and designers using AI coding agents
- Tags
- animations, claude code, ai agents, workflow, ui motion, code audit
Why it was saved
- @emilkowalski: A concrete pattern for animating a codebase better: run an animation audit skill with a frontier model, then convert the findings into self-contained plans that cheaper executor models can run.
Related
Workflow for generating and animating Airbnb-style isometric 3D icons using AI
Recipe for scraping news URLs and rewriting them in your voice using Grok
A fast iOS development workflow combining Perplexity, Cursor, and Xcode
Four-step AI agent pipeline to extract audience insights from YouTube comments
Agent skills enabling AI coding agents to create programmatic Remotion videos
Open directory and CLI for discovering and installing AI agent skills
Updated