improve-animations

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

Updated Sep 21, 2026
One-click install
npx skills add https://github.com/maxentr/la-cuisine-de-mm --skill improve-animations-maxentr
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: improve-animations
Source: https://github.com/maxentr/la-cuisine-de-mm/tree/main/.agents/skills/improve-animations
Command: npx skills add https://github.com/maxentr/la-cuisine-de-mm --skill improve-animations-maxentr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Animation issues like wrong easings, non-interruptible keyframes, and missing reduced-motion support are hard to spot and even harder to delegate. This Skill surveys a codebase's motion code, produces a prioritized audit of findings, and turns each selected finding into a precise implementation plan that any agent or developer can execute without additional context. ## 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 concrete target values. - Prioritized findings table: Vets every finding at its file and line, ranks by severity and leverage, and separates additive missed opportunities from corrective fixes. - Self-contained execution plans: Writes one plan per finding with exact cubic-bezier curves, durations, spring configs, code excerpts, scope boundaries, and feel-check verification steps. - Use Case: Ask it to audit a React app's animations; it maps Framer Motion and CSS transitions, flags an ease-in dropdown and scale(0) popover, then writes plans another agent can implement verbatim. ## 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 skill's standard workflow: it maps motion libraries like Framer Motion and CSS transitions, audits eight categories from easing to accessibility, and returns a vetted findings table ordered by leverage. Selected findings become executable plans.

What animation issues does a motion audit look for?

It flags ease-in on UI elements, durations over 300ms, scale(0) entrances, transition: all, keyframes on rapidly triggered UI, missing prefers-reduced-motion handling, and Framer Motion x/y shorthand props that are not hardware-accelerated.

Does this skill modify my source code?

No. It is strictly read-only on source code and only creates or edits files under the plans directory. Implementation happens separately through the execute variant or by handing plans to another agent.

Can I audit only animation performance or accessibility?

Yes. Passing a category focus such as performance or accessibility runs recon plus an audit of that category only. You can also choose quick or deep effort levels to control coverage and subagent count.

When should I not use an animation audit skill?

It is not suited for reviewing a single diff, which belongs to a review-focused skill, and it does not implement fixes itself. If you only need one known improvement, use the plan variant to write a single targeted plan instead.