improve-animations

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

Updated Mar 14, 2026
One-click install
npx skills add https://github.com/beelabstudio/ai --skill improve-animations-beelabstudio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: improve-animations
Source: https://github.com/beelabstudio/ai/tree/main/skills/enabling/improve-animations
Command: npx skills add https://github.com/beelabstudio/ai --skill improve-animations-beelabstudio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Animation 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 of findings, and writes precise implementation 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 from Emil Kowalski's animation philosophy. - Self-contained plan generation: Writes one plan per finding into plans/ with exact file paths, current code excerpts, target cubic-bezier curves, durations, spring configs, verification steps, and feel-checks. - Read-only advisory posture: Never modifies source code; it plans improvements and can dispatch an executor subagent via improve-animations execute <plan>. - Use Case: Ask it to audit a React app using Framer Motion; it finds transition: all on dropdowns, scale(0) entrances, and missing prefers-reduced-motion handling, then produces ordered plans another agent implements. ## Quick Start Ask the assistant to audit the animations in this repository and write implementation plans for the highest-leverage motion fixes.

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 full workflow: it maps your motion stack (Framer Motion, CSS, springs), audits eight categories in parallel, vets each finding at its file:line, and presents a severity-ranked table. You then select which findings become implementation plans.

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, Framer Motion x/y shorthand props, missing prefers-reduced-motion handling, and animations on high-frequency keyboard actions.

Does the animation audit modify my source code?▼

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

Can I audit only performance or accessibility animation issues?▼

Yes, pass a category focus such as performance or accessibility to run recon plus a single-category audit. You can also use quick or deep variants to adjust coverage from high-traffic components only to the whole repo.

When should I use an animation audit instead of a code review?▼

Use it when you want a roadmap of motion fixes across the whole codebase rather than feedback on a single diff. Reviewing one diff belongs to a separate review skill; this skill plans improvements it does not apply.