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.