improve-animations

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

1|Updated Jul 4, 2026
One-click install
npx skills add https://github.com/trungenglish/SHOPWISE --skill improve-animations-trungenglish
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: improve-animations
Source: https://github.com/trungenglish/SHOPWISE/tree/main/.agents/skills/improve-animations
Command: npx skills add https://github.com/trungenglish/SHOPWISE --skill improve-animations-trungenglish

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Animation issues like wrong easings, non-interruptible keyframes, and missing reduced-motion support are scattered across a codebase and hard to fix systematically. This Skill surveys all motion code, produces a prioritized audit, and writes implementation plans precise enough for any agent to 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 against exact target values. - Self-contained implementation plans: Generates one plan per finding with exact cubic-bezier curves, durations, file:line citations, repo conventions, and feel-check verification steps. - Read-only advisory workflow: Never modifies source code; supports quick, standard, and deep audit depths plus focused categories like performance or accessibility. - Use Case: Ask it to audit a React app's animations, and it returns a severity-ranked findings table (e.g., transition: all on dropdowns, scale(0) entrances) followed by ready-to-execute plans in a plans/ directory. ## Quick Start Ask the agent to audit the animations in this repository and write improvement plans for the top findings.

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 (CSS, Framer Motion, springs), audits eight categories including easing, interruptibility, and accessibility, then presents a severity-ranked findings table. You select which findings become implementation plans.

What animation issues does a motion audit check for?▼

It checks for ease-in on UI elements, durations over 300ms, scale(0) entrances, transition: all, keyframes on rapidly-triggered UI, missing prefers-reduced-motion handling, wrong transform-origin on popovers, and Framer Motion shorthand props that skip hardware acceleration.

Does this skill modify my source code?▼

No, it is strictly read-only on source code. It only creates plan files under a plans/ directory. Execution of plans is a separate step handled by an executor agent or the execute invocation variant.

Can I audit only animation performance or accessibility?▼

Yes, you can invoke it with a category focus such as performance or accessibility to audit only that category. You can also adjust depth with quick or deep modes depending on coverage needs.

When should I not use an animation audit skill?▼

It is not suited for reviewing a single diff, which is the job of a review-focused skill, and it does not implement fixes itself. It also respects documented deliberate motion tradeoffs rather than re-litigating settled design decisions.