improve-animations

Audits codebase animation code and writes self-contained motion improvement plans.

Updated Jul 30, 2026
One-click install
npx skills add https://github.com/mrestrepoj10/re-hear --skill improve-animations-mrestrepoj10
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: improve-animations
Source: https://github.com/mrestrepoj10/re-hear/tree/main/.agents/skills/improve-animations
Command: npx skills add https://github.com/mrestrepoj10/re-hear --skill improve-animations-mrestrepoj10

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Animation issues like wrong easings, non-interruptible keyframes, and missing reduced-motion handling are hard to spot and even harder to delegate. This Skill surveys a codebase's motion code as a senior design engineer, produces a prioritized audit, and turns each finding into a plan precise enough for any agent or cheaper model to execute. ## Core Features & Use Cases - Eight-category motion audit: Covers purpose and frequency, easing and duration, physicality and origin, interruptibility, performance, accessibility, cohesion, and missed opportunities, with exact target values from a distilled rule catalog. - Read-only advisory workflow: Never modifies source code; it only creates plan files under plans/, each stamped with the current commit and containing verbatim current code, exact target values, and verification steps. - Flexible invocation modes: Run a full audit, a quick or deep pass, a single-category focus, write one plan directly, execute a plan via an executor subagent, or reconcile existing plans against current code. - Use Case: Ask it to audit a React app's animations and receive a severity-ranked findings table (e.g., ease-in on dropdowns, transition: all, scale(0) entrances) plus ready-to-execute plans with exact cubic-bezier curves and durations. ## 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 codebase?

Run the skill's full workflow: it maps your motion stack and conventions, audits eight categories from easing to accessibility, vets each finding at its file and line, then presents a severity-ranked table before writing 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 interruptible UI, Framer Motion x/y shorthand props, missing prefers-reduced-motion handling, and ungated hover motion.

Does the animation audit modify my source code?

No. The skill is strictly read-only on source code and only creates or edits plan files under the plans directory. Implementation happens separately by executing a plan with any agent.

Can I audit only animation performance or accessibility?

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

What makes the generated animation plans executable by other agents?

Each plan is fully self-contained: exact file paths with verbatim current code, exact target cubic-beziers and durations, repo convention exemplars, ordered steps, scope boundaries, and mechanical plus feel-check verification.