improve-animations

Audits codebase animation code and generates prioritized, self-contained implementation plans.

Updated Jul 14, 2026
One-click install
npx skills add https://github.com/quanthubbr/tron-claude-config --skill improve-animations-quanthubbr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: improve-animations
Source: https://github.com/quanthubbr/tron-claude-config/tree/main/managed/skills/emilkowalski/improve-animations
Command: npx skills add https://github.com/quanthubbr/tron-claude-config --skill improve-animations-quanthubbr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Animation issues like wrong easings, non-interruptible keyframes, and layout-thrashing transitions are hard to spot and even harder to delegate. This Skill surveys a codebase's motion code as a senior motion advisor, produces a vetted findings table, and writes plans precise enough for any agent or cheaper model to execute without taste or context. ## Core Features & Use Cases - Eight-category motion audit: Covers purpose/frequency, easing/duration, physicality, interruptibility, performance, accessibility, cohesion, and missed opportunities, with exact target values from Emil Kowalski's animation philosophy. - Read-only planning workflow: Never modifies source code; outputs only findings tables and self-contained plan files under plans/ with exact cubic-beziers, durations, file:line citations, and feel-check verification steps. - Adjustable effort and invocation variants: Supports quick/deep audits, category-focused scans, single-plan generation, plan execution via executor subagents, and reconcile to sync plans with current code. - Use Case: Ask it to audit a React app's animations; it maps the motion surface (Framer Motion, CSS tokens, gesture handlers), flags findings like transition: all or scale(0) entrances, and writes ordered plans another agent can implement. ## Quick Start Ask the assistant to audit the animations in this repository and produce a prioritized plan of motion fixes.

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 codebase?▼

Run the skill's standard workflow: it maps your motion stack (Framer Motion, CSS tokens, gesture handlers), audits eight categories in parallel, and returns a vetted findings table ordered by leverage. You then select which findings become implementation 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, missing prefers-reduced-motion handling, and Framer Motion x/y shorthand props that skip hardware acceleration.

Does this skill modify my source code?▼

No. It is strictly read-only on source code and only creates or edits files under plans/. If asked to fix code directly, it declines and points to the execute variant, which dispatches a separate executor subagent.

Can I audit only animation performance or accessibility?▼

Yes. Invoke it with a category focus such as performance, accessibility, or easing to run recon plus an audit of that single category instead of the full eight-category sweep.

What is the difference between quick, standard, and deep audits?▼

Quick covers high-traffic components with about five HIGH-severity findings, standard covers all interactive UI with up to four subagents, and deep scans the whole repo including marketing pages with up to eight subagents and LOW polish items.