improve-animations

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

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

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 against eight categories, 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: Covers purpose and frequency, easing and duration, physicality and origin, interruptibility, performance, accessibility, cohesion, and missed opportunities, with exact target values (cubic-bezier curves, duration budgets, spring configs). - Read-only advisory workflow: Never modifies source code; findings are vetted at file:line level and presented as a severity-ranked table before any plan is written. - Self-contained execution plans: Each plan includes current code excerpts, exact target values, repo conventions, ordered steps, boundaries, and feel-check verification steps. - 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 writes numbered plans in plans/ ready for another agent to execute. ## Quick Start Ask the assistant to audit the animations in this repository and write improvement plans for the highest-impact findings.

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 or Framer Motion codebase?▼

Run the skill's standard workflow: it maps your motion stack and conventions, audits eight categories including easing, interruptibility, and performance, then presents a severity-ranked findings table. You select which findings become detailed implementation plans.

What animation issues does a motion audit typically find?▼

Common findings include ease-in on UI entrances, transition: all, scale(0) entrances, keyframes on rapidly-triggered elements like toasts, missing prefers-reduced-motion handling, and Framer Motion x/y shorthand props that are not hardware-accelerated.

Does this skill modify my source code directly?▼

No. It is strictly read-only on source code and only creates files under a plans directory. Each plan is self-contained so a separate agent or model can execute it, and an execute variant can dispatch an executor subagent in an isolated worktree.

Can I audit only one category like 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 use quick or deep variants to adjust coverage from high-traffic components to the whole repo.

Why do Framer Motion x and y props cause animation performance problems?▼

The x, y, and scale shorthand props are not hardware-accelerated and run on the main thread, dropping frames under load. The recommended fix is animating the full transform string, such as animate={{ transform: "translateX(100px)" }}.