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.