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/j172/bid --skill improve-animations-j172
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: improve-animations
Source: https://github.com/j172/bid/tree/main/agent/skills/improve-animations
Command: npx skills add https://github.com/j172/bid --skill improve-animations-j172

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Animation issues like wrong easings, non-interruptible keyframes, and missing reduced-motion handling are scattered across a codebase and hard to fix systematically. This Skill surveys all motion code, produces a prioritized audit against a precise rule catalog, and writes implementation plans detailed enough for any agent or cheaper model to execute without design judgment. ## 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, with exact target values (cubic-beziers, durations, spring configs) cited from a rule catalog. - Read-only planning workflow: Never modifies source code; outputs vetted findings as a severity-ranked table and writes self-contained plans into a plans/ directory with exact file:line references, current code excerpts, and verification steps including feel checks. - Flexible invocation modes: Supports quick/standard/deep audit depths, single-category focus, direct plan writing, plan execution via an executor subagent, and reconciliation of existing plans against current code. - Use Case: A team feels their dashboard's dropdowns and toasts feel sluggish. Run the audit to find ease-in on entrances, transition: all, and keyframe-based toasts, then hand the generated plans to a cheaper model to implement each fix exactly. ## Quick Start Ask the agent to audit the animations in this repository and produce a prioritized improvement plan.

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

Run a structured motion audit covering eight categories: purpose, easing, physicality, interruptibility, performance, accessibility, cohesion, and missed opportunities. The skill greps for transition, keyframes, animate props, and spring usage, then returns severity-ranked findings with file:line evidence.

What easing and duration values should UI animations use?

UI animations should stay under 300ms and default to ease-out for entrances, ease-in-out for on-screen movement, and ease for hovers. Strong custom curves like cubic-bezier(0.23, 1, 0.32, 1) outperform built-in CSS easings, and ease-in on UI is always a finding.

Does this skill modify my source code?

No. It is strictly read-only on source code and only creates or edits files under a plans/ directory. Fixes are applied separately by running a generated plan with an executor agent or via the execute invocation.

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)" }}.

When should an element not animate at all?

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