improve-animations

Audits codebase animation and motion code, then writes self-contained implementation plans for other agents.

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

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 against eight expert categories, and turns each finding into a precise plan that any agent or cheaper model can execute without design judgment. ## Core Features & Use Cases - Eight-category motion audit: Covers purpose and frequency, easing and duration, physicality and origin, interruptibility, performance, accessibility, cohesion and tokens, and missed opportunities, with exact target values (cubic-beziers, durations, spring configs) from a distilled rule catalog. - Read-only advisor workflow: Recon maps the motion stack (Framer Motion, GSAP, CSS, WAAPI), parallel subagents audit, findings are vetted at file:line, and the user selects which become plans. It never modifies source code. - Self-contained execution plans: Each plan includes current code excerpts, exact target values, repo conventions, ordered steps, boundaries, and feel-check verification, written for an executor with zero context. - Use Case: Ask it to audit a React dashboard's animations; it finds transition: all on dropdowns, scale(0) entrances, and keyframed toasts, then writes three plans with exact cubic-bezier tokens and verification steps for a cheaper model 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 my codebase?▼

Run the skill's full workflow: it maps your motion stack and conventions, audits against eight categories (easing, interruptibility, performance, accessibility, and more), vets each finding at its file:line, and presents a prioritized table before writing plans.

What animation issues does a motion audit look for?▼

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

Does it work with Framer Motion and CSS transitions?▼

Yes. The recon phase detects Framer Motion, Motion, React Spring, GSAP, plain CSS, and WAAPI, plus component libraries like Radix, Base UI, and shadcn/ui, and tailors findings to the detected stack and existing token conventions.

Can the skill fix the animation problems it finds?▼

No, it is strictly read-only on source code. It writes self-contained plans under plans/ that any agent can execute; the execute variant dispatches an executor subagent in an isolated worktree and reviews the resulting diff.

What are the limitations of an automated animation audit?▼

Feel cannot always be judged from code alone, such as a crossfade or a spring's bounce. The skill flags these cases honestly and puts a feel-check step (slow motion, frame-by-frame, real device) into the plan instead of guessing.