improve-animations

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

Updated May 13, 2026
One-click install
npx skills add https://github.com/sapatamuku-creator/mastersapatamuku --skill improve-animations-sapatamuku-creator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: improve-animations
Source: https://github.com/sapatamuku-creator/mastersapatamuku/tree/main/releases/v2.7/.agents/skills/improve-animations
Command: npx skills add https://github.com/sapatamuku-creator/mastersapatamuku --skill improve-animations-sapatamuku-creator

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 cheaper model 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 against exact target values. - Self-contained implementation plans: Generates one plan per finding with exact cubic-bezier curves, durations, file paths, current code excerpts, 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. - Use Case: Ask it to audit a React app using Framer Motion and Radix; it finds ease-in dropdowns, scale(0) popovers, and transition: all usages, then writes prioritized plans under plans/ for another agent to implement. ## Quick Start Ask the assistant 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 codebase?▼

Run the audit workflow, which maps your motion stack (Framer Motion, CSS, Radix), then checks eight categories including easing, interruptibility, and performance. It returns a vetted findings table ordered by leverage and writes plans only for findings you select.

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, missing prefers-reduced-motion handling, and animations on high-frequency keyboard actions. Each finding cites exact file and line evidence.

Does this work with Framer Motion and Radix UI?▼

Yes, the recon phase detects Framer Motion, React Spring, GSAP, plain CSS, WAAPI, Radix, Base UI, and shadcn/ui. It flags Framer Motion x/y/scale shorthands as non-hardware-accelerated and checks Radix transform-origin variables on popovers.

Can the skill fix the animation issues it finds?▼

No, it is strictly read-only on source code and only writes plan files under plans/. You can run the execute variant to dispatch an executor subagent that implements a plan in an isolated worktree and reviews the resulting diff.

Why should UI animations avoid ease-in timing?▼

Ease-in starts slow, delaying the exact moment the user is watching, which makes interfaces feel sluggish. Entering and exiting elements should use ease-out, on-screen movement uses ease-in-out, and UI animations should stay under 300ms.