improve-animations

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

Updated Sep 15, 2026
One-click install
npx skills add https://github.com/Nadav011/nadavai-claude --skill improve-animations-nadav011
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: improve-animations
Source: https://github.com/Nadav011/nadavai-claude/tree/main/plugins/nadavai/skills/improve-animations
Command: npx skills add https://github.com/Nadav011/nadavai-claude --skill improve-animations-nadav011

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 grounded in Emil Kowalski's animation philosophy, and turns each finding into a plan precise enough for any agent or cheaper model to execute. ## 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). - Self-contained implementation plans: Each finding becomes a plan with verbatim current code, exact target values, repo conventions, ordered steps, boundaries, and feel-check verification, written to plans/. - Read-only advisor posture: Never modifies source code; supports quick/deep effort levels, category-focused audits, single-plan mode, plan execution via an isolated worktree, and reconcile to refresh stale plans. - Use Case: Ask it to audit a React app using Framer Motion; it flags transition: all, scale(0) entrances, and missing prefers-reduced-motion handling, then writes plans a junior agent can implement verbatim. ## Quick Start Ask the assistant to audit the animations in this repository and produce a prioritized list of motion fixes 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 skill's full workflow: it maps your motion stack (Framer Motion, CSS, springs), audits eight categories from easing to accessibility, then presents a severity-ranked findings table. You select which findings become implementation 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 interruptible UI, missing prefers-reduced-motion handling, and Framer Motion x/y shorthand props that skip hardware acceleration.

Does the animation audit modify my source code?

No. The skill is strictly read-only on source code and only creates files under plans/. To apply a fix, use the execute variant, which dispatches an executor subagent in an isolated worktree and reviews the resulting diff.

Can I audit only animation performance or accessibility?

Yes. Invoke the skill with a category focus such as performance or accessibility to run recon plus a single-category audit. You can also adjust depth with quick or deep effort levels.

Why use plans instead of fixing animations directly?

Plans separate judgment from execution: the capable model decides what is worth fixing and specifies exact values, while any agent or cheaper model executes. Each plan includes verbatim code, exact curves, boundaries, and feel-check verification steps.