improve-animations

Audits codebase animation code and writes self-contained implementation plans for motion fixes.

1|Updated Aug 11, 2026
One-click install
npx skills add https://github.com/Chia1104/agent-air --skill improve-animations-chia1104
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: improve-animations
Source: https://github.com/Chia1104/agent-air/tree/main/skills/shared/improve-animations
Command: npx skills add https://github.com/Chia1104/agent-air --skill improve-animations-chia1104

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Animation issues like wrong easings, non-interruptible keyframes, and layout-triggering transitions make interfaces feel sluggish, but finding and fixing them requires rare motion-design expertise. This Skill surveys a codebase's motion code, produces a prioritized audit grounded in Emil Kowalski's animation philosophy, and writes precise plans that any agent or cheaper model can execute. ## Core Features & Use Cases - Eight-category motion audit: Evaluates purpose and frequency, easing and duration, physicality and origin, interruptibility, performance, accessibility, cohesion, and missed opportunities, with exact target values for curves, durations, and spring configs. - Self-contained implementation plans: Writes one plan per finding into plans/ with verbatim current code, exact target values, repo conventions, ordered steps, boundaries, and feel-check verification steps. - Read-only advisory posture: Never modifies source code; supports quick/deep effort levels, category-focused audits, single-plan mode, plan execution via an isolated worktree, and plan reconciliation against current code. - Use Case: Ask it to audit a React app using Framer Motion; it maps the motion surface, fans out read-only subagents per category, vets each finding at its file:line, and delivers a severity-ranked table plus executable fix plans. ## Quick Start Ask the agent to audit the animations in this repository and produce a prioritized set of improvement plans.

Frequently Asked Questions about improve-animations

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit animations in a React or CSS codebase?▼

Run the skill's full workflow: it maps the motion surface (frameworks, tokens, gesture handlers), audits eight categories in parallel, vets each finding at its file:line, and presents a severity-ranked table before writing fix plans.

What animation issues does a motion audit look for?▼

It hunts for ease-in on UI elements, durations over 300ms, scale(0) entrances, transition: all, keyframes on rapidly-triggered UI, Framer Motion x/y shorthand props, missing prefers-reduced-motion handling, and animations on high-frequency keyboard actions.

Does this skill modify my source code directly?▼

No, it is strictly read-only on source code. It only creates files under plans/ containing self-contained implementation plans; a separate execute mode can dispatch an executor subagent in an isolated worktree.

Can I audit only performance or accessibility animation issues?▼

Yes, pass a category focus such as performance, accessibility, or easing to run recon plus an audit of that category only. You can also use quick or deep to adjust audit coverage and subagent count.

What are the limitations of an automated animation audit?▼

Feel cannot always be judged from code alone, such as a crossfade or a spring's bounce. The skill flags this uncertainty honestly and puts concrete feel-check steps, like slow-motion DevTools inspection, into each plan instead of guessing.