improve-animations

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

Updated Aug 10, 2026
One-click install
npx skills add https://github.com/KryptaMedina7/quero-s-home --skill improve-animations-kryptamedina7
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: improve-animations
Source: https://github.com/KryptaMedina7/quero-s-home/tree/main/.agents/skills/improve-animations
Command: npx skills add https://github.com/KryptaMedina7/quero-s-home --skill improve-animations-kryptamedina7

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, and writes implementation plans precise enough for any agent or junior developer 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 against exact target values. - Self-contained implementation plans: Generates one plan per finding with verbatim current code, exact cubic-bezier curves, durations, spring configs, repo conventions, and feel-check verification steps. - Read-only advisory workflow: Never modifies source code; supports quick, standard, and deep audit depths plus focused category audits and plan execution or reconciliation modes. - Use Case: A team feels their React app's dropdowns and toasts feel sluggish. Run the audit to get a severity-ranked findings table, select the top fixes, and receive plans another agent can implement verbatim. ## Quick Start Ask the assistant to audit the animations in this repository and write improvement plans for the highest-severity 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 a structured motion audit that greps for transitions, keyframes, animate props, and easing usage, then evaluates findings against eight categories including easing, interruptibility, and performance. Each confirmed finding becomes a plan with exact target values and verification steps.

What easing should UI animations use?

Entering or exiting elements should use ease-out, on-screen movement uses ease-in-out, and hover or color changes use ease. UI animations should stay under 300ms, and ease-in on UI is always a finding 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. It only creates plan files under a plans directory, and a separate execute mode dispatches an executor agent to implement a chosen plan in an isolated worktree.

Can it audit Framer Motion performance problems?

Yes, it flags Framer Motion x, y, and scale shorthand props because they run on the main thread instead of being hardware-accelerated. Plans target full transform strings like translateX(100px) and restrict animation to transform and opacity.

When should I not use an animation audit?

Skip it when you only need a review of a single diff, which is a separate review workflow, or when you want fixes applied immediately rather than planned. It also respects documented deliberate motion tradeoffs instead of re-litigating them.