improve-animations

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

1|Updated Aug 28, 2026
One-click install
npx skills add https://github.com/mooch10/mochiptos --skill improve-animations-mooch10
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: improve-animations
Source: https://github.com/mooch10/mochiptos/tree/main/frontend/.agents/improve-animations
Command: npx skills add https://github.com/mooch10/mochiptos --skill improve-animations-mooch10

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Animation quality issues like wrong easings, non-interruptible keyframes, and layout-thrashing transitions are hard to spot and even harder to delegate. This Skill surveys a codebase's 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. - Read-Only Advisory Workflow: Never modifies source code; outputs vetted findings with file:line evidence and severity rankings ordered by leverage. - Self-Contained Execution Plans: Generates one plan per finding with exact cubic-bezier curves, durations, spring configs, repo conventions, scope boundaries, and feel-check verification steps. - Use Case: A team feels their React dashboard is sluggish. Run the audit to find transition: all on dropdowns, ease-in on modals, and keyframe-based toasts, then hand the generated plans to cheaper models to implement. ## Quick Start Ask the assistant 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 codebase?▼

Run a structured motion audit covering easing, duration, physicality, interruptibility, performance, and accessibility. The skill greps for transition, keyframes, animate props, and spring usage, then reports vetted findings with file:line evidence ordered by leverage.

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. The audit flags ease-in on UI as always wrong and recommends strong custom curves like cubic-bezier(0.23, 1, 0.32, 1).

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 containing exact target values, steps, and verification checks for a separate executor to implement.

Why do Framer Motion x and y props cause frame drops?▼

Framer Motion x, y, and scale shorthand props run on the main thread and are not hardware-accelerated. The fix is animating the full transform string, such as animate={{ transform: "translateX(100px)" }}, which the audit flags as a performance finding.

When should an element not animate at all?▼

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