improve-animations

Audits codebase animation code and writes self-contained implementation plans for motion fixes.

Updated Mar 12, 2026
One-click install
npx skills add https://github.com/RavitejaKarra24/dotfiles --skill improve-animations-ravitejakarra24
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: improve-animations
Source: https://github.com/RavitejaKarra24/dotfiles/tree/main/agents/.agents/skills/improve-animations
Command: npx skills add https://github.com/RavitejaKarra24/dotfiles --skill improve-animations-ravitejakarra24

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 precise plans that any agent or developer can 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 using exact target values from a distilled rule catalog. - Self-contained implementation plans: Generates one plan per finding with exact file paths, current code excerpts, target cubic-bezier curves, durations, spring configs, verification steps, and feel-check criteria. - Read-only advisory workflow: Never modifies source code; supports quick, standard, and deep audit depths, category-focused audits, single-plan generation, plan execution dispatch, and plan reconciliation against current code. - Use Case: Ask it to audit a React app using Framer Motion; it finds transition: all on dropdowns, scale(0) entrances, and keyframed toasts, then writes ordered plans in plans/ that a cheaper model executes one by one. ## Quick Start Ask the agent to audit the animations in this repository 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 CSS codebase?

Run the skill's full workflow: it maps your motion stack and conventions, audits eight categories including easing, interruptibility, and performance, then presents a vetted findings table ordered by leverage. You select which findings become implementation plans.

What animation issues does a motion audit look for?

It hunts for ease-in on UI elements, durations over 300ms, scale(0) entrances, transition: all, keyframes on rapidly-triggered UI, Framer Motion x/y shorthand props, missing prefers-reduced-motion handling, and animations on high-frequency keyboard actions.

Does the animation audit modify my source code?

No, the skill is strictly read-only on source code. It only creates or edits files under plans/, containing self-contained implementation plans that a separate agent or developer executes later.

Can I audit only animation performance or accessibility?

Yes, invoking the skill with a category focus like performance or accessibility runs recon plus an audit of that category only. You can also adjust depth with quick, standard, or deep effort levels.

What makes the generated animation plans executable by other agents?

Each plan includes exact file paths with current code excerpts, verbatim target values like cubic-bezier curves and spring configs, repo convention exemplars, ordered steps, scope boundaries, and verification steps including slow-motion feel checks.