improve-animations

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

3|Updated Apr 20, 2026
One-click install
npx skills add https://github.com/langgenius/due-date-hq-jwl --skill improve-animations-langgenius
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: improve-animations
Source: https://github.com/langgenius/due-date-hq-jwl/tree/main/.claude/skills/improve-animations
Command: npx skills add https://github.com/langgenius/due-date-hq-jwl --skill improve-animations-langgenius

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Animation quality 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 junior developer 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 concrete target values. - Parallel subagent auditing: Fans out read-only subagents per category with quick, standard, and deep effort levels to match repository size. - Self-contained execution plans: Writes one plan per finding with exact cubic-bezier curves, durations, file:line citations, repo conventions, boundaries, and feel-check verification steps. - Use Case: A team feels their dashboard is sluggish. Run the audit to find the ease-in on every dropdown, the transition: all on cards, and the keyframed toasts, then hand the generated plans to cheaper models to implement one by one. ## Quick Start Ask the assistant to audit the animations in this repository and produce a prioritized set of motion 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 a web codebase?

Run a structured motion audit covering eight categories: purpose and frequency, easing and duration, physicality, interruptibility, performance, accessibility, cohesion, and missed opportunities. This Skill automates that audit with parallel read-only subagents and returns a prioritized findings table.

What easing should UI animations use?

Entering or exiting elements should use ease-out, on-screen movement uses ease-in-out, and hover or color changes use ease. The audit flags ease-in on UI as always wrong because it delays the exact moment the user is watching, and recommends strong custom curves like cubic-bezier(0.23, 1, 0.32, 1).

Does this work with Framer Motion and CSS transitions?

Yes, the recon phase detects Framer Motion, React Spring, GSAP, plain CSS, and WAAPI. It flags Framer Motion x/y/scale shorthand props as non-hardware-accelerated and recommends full transform strings, while checking CSS for transition: all and layout-property animation.

Can the skill fix the animation issues it finds?

No, it is read-only on source code by design. It writes self-contained plans under plans/ that any agent or developer can execute, and offers an execute variant that dispatches an executor subagent in an isolated worktree and reviews the resulting diff.

Why do my animations feel janky under load?

Jank usually comes from animating layout properties like width or margin, using transition: all, or running Framer Motion shorthand transforms on the main thread. The performance audit category targets exactly these patterns and recommends transform-and-opacity-only animation.