improve-animations

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

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

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, and writes implementation plans precise enough for any agent or cheaper model 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 from Emil Kowalski's animation philosophy. - Read-only advisor workflow: Recon of the motion stack (Framer Motion, GSAP, CSS, WAAPI), parallel subagent audits, vetted findings ordered by leverage, then self-contained plans written to plans/ with exact cubic-beziers, durations, file:line citations, and feel-check verification steps. - Invocation variants: Run a full audit, scope to quick or deep effort, focus one category like performance, write a single plan with plan <description>, dispatch execution with execute <plan>, or reconcile stale plans against current code. - Use Case: Ask it to audit a React app's animations; it finds transition: all 400ms ease-in on a dropdown, flags it as HIGH severity, and writes a plan specifying the exact cubic-bezier(0.23, 1, 0.32, 1) token, 200ms duration, and transform-origin fix for an executor to apply. ## Quick Start Ask the assistant to audit this codebase's animations and produce a prioritized list of motion improvements with implementation 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 full workflow: it maps your motion stack (Framer Motion, CSS, GSAP), audits eight categories from easing to accessibility, and returns a vetted findings table ordered by leverage. You then pick which findings become executable 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 this skill modify my source code?▼

No. It is strictly read-only on source code and only creates or edits files under plans/. Implementation happens separately through the execute variant, which dispatches an executor agent and reviews its diff.

Can I audit only animation performance or accessibility?▼

Yes. Pass a category focus such as performance, accessibility, or easing to run recon plus an audit of that single category instead of the full eight-category sweep.

Why use plans instead of fixing animations directly?▼

Plans separate judgment from execution: the capable model decides what is worth fixing and writes exact values, file paths, and verification steps, so a cheaper model or any agent can implement without design taste. This keeps fixes consistent and reviewable.