improve-animations

Audits codebase animation code and writes self-contained implementation plans for other agents.

Updated Jul 3, 2026
One-click install
npx skills add https://github.com/alex-jordan547/agent-setup --skill improve-animations-alex-jordan547
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: improve-animations
Source: https://github.com/alex-jordan547/agent-setup/tree/main/archive/2026-09-10/improve-animations
Command: npx skills add https://github.com/alex-jordan547/agent-setup --skill improve-animations-alex-jordan547

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Animation quality 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, produces a prioritized audit, 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 and duration, physicality and origin, interruptibility, performance, accessibility, cohesion, and missed opportunities, with exact target values from AUDIT.md. - Self-contained implementation plans: Each finding becomes a plan with verbatim current code, exact cubic-bezier curves, durations, spring configs, repo conventions, and feel-check verification steps. - Read-only advisory posture: Never modifies source code; supports quick/standard/deep effort levels, category-focused audits, single-plan mode, plan execution dispatch, and plan reconciliation. - Use Case: Ask it to audit a React app's animations; it maps Framer Motion and CSS usage, flags transition: all and scale(0) entrances with file:line evidence, then writes numbered plans in plans/ ready for an executor agent. ## Quick Start Ask the agent to audit the animations in this repository and produce a prioritized findings table with implementation 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 standard workflow: it maps your motion stack (Framer Motion, CSS, springs), audits eight categories from easing to accessibility, then presents a vetted findings table ordered by leverage. You select which findings become executable 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 files under plans/. Each plan contains exact target values and steps so a separate executor agent or human can apply the changes.

Can I audit only animation performance or accessibility?

Yes. Invoke it with a category focus such as performance or accessibility to run recon plus a single-category audit. Effort levels quick, standard, and deep also control coverage and subagent count.

Why use plans instead of fixing animations directly?

Plans let a capable model do the judgment-heavy audit while cheaper models or other agents execute. Each plan is self-contained with exact cubic-beziers, file paths, and feel-check steps, so the executor needs zero prior context.