improve-animations

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

Updated Jul 15, 2026
One-click install
npx skills add https://github.com/Alex918-stack/papertrader --skill improve-animations-alex918-stack
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: improve-animations
Source: https://github.com/Alex918-stack/papertrader/tree/main/agent/skills/improve-animations
Command: npx skills add https://github.com/Alex918-stack/papertrader --skill improve-animations-alex918-stack

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Animation and motion issues in a codebase — wrong easings, non-interruptible keyframes, missing reduced-motion handling — are hard to spot and even harder to delegate, because fixing them well requires taste and context that junior developers or cheaper models lack. ## Core Features & Use Cases - Eight-category motion audit: Systematically surveys purpose/frequency, easing and duration, physicality, interruptibility, performance, accessibility, cohesion, and missed opportunities, with exact target values (cubic-beziers, durations, spring configs) cited from a rule catalog. - Prioritized findings table: Vets every finding at its file:line, rejects by-design or exempt cases, and ranks results by severity and leverage before the user selects what to fix. - Self-contained execution plans: Writes one plan per finding into plans/ with exact current code, target values, repo conventions, ordered steps, boundaries, and feel-check verification — executable by any agent with zero prior context. - Use Case: Ask it to audit a Next.js dashboard's animations; it maps the motion surface (Framer Motion, CSS transitions, tokens), reports that dropdowns use ease-in over 400ms and toasts restart keyframes mid-flight, then produces commit-stamped plans another agent can implement. ## Quick Start Ask the agent to audit this repository's animations 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 Next.js codebase?

Run a structured motion audit that maps the stack (Framer Motion, CSS, springs), then checks eight categories: purpose, easing, physicality, interruptibility, performance, accessibility, cohesion, and missed opportunities. Findings are cited at file:line and ranked by severity before any fixes are planned.

What easing and duration should UI animations use?

Entering or exiting elements should use ease-out, on-screen movement ease-in-out, and UI animations should stay under 300ms — buttons 100–160ms, dropdowns 150–250ms, modals 200–500ms. ease-in on UI is always flagged because it delays the moment the user is watching.

Does this skill modify my source code?

No. It is strictly read-only on source code and only creates files under a plans directory. Each plan is self-contained with exact target values, so a separate executor agent or human applies the changes.

Why do Framer Motion x and y props cause dropped frames?

Framer Motion's x, y, and scale shorthand props are not hardware-accelerated and run on the main thread, dropping frames under load. The fix is animating the full transform string, such as animate={{ transform: "translateX(100px)" }}.

Can the audit handle prefers-reduced-motion accessibility?

Yes. Accessibility is one of the eight audit categories. It flags movement without prefers-reduced-motion handling and ungated hover motion, and recommends keeping opacity feedback while dropping position changes for reduced-motion users.

When should I not add an animation to a UI element?

Elements triggered 100+ times per day, like command palettes or keyboard shortcuts, should never animate. Frequently-hit hover or list interactions should be removed or drastically reduced, since the strongest fix is often deleting the animation.