improve-animations

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

Updated Aug 11, 2026
One-click install
npx skills add https://github.com/Debindenny/travelplanner-community- --skill improve-animations-debindenny
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: improve-animations
Source: https://github.com/Debindenny/travelplanner-community-/tree/main/travel-planner/agent/skills/improve-animations
Command: npx skills add https://github.com/Debindenny/travelplanner-community- --skill improve-animations-debindenny

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Animation and motion issues in a codebase — wrong easings, non-interruptible keyframes, missing reduced-motion handling — are hard to spot and even harder to delegate, because fixing them well requires taste and context that junior developers or cheaper models lack. ## Core Features & Use Cases - Eight-category motion audit: Surveys purpose/frequency, easing and duration, physicality, interruptibility, performance, accessibility, cohesion, and missed opportunities against precise target values (cubic-bezier curves, duration budgets, spring configs). - Read-only advisory workflow: Recon the motion stack (Framer Motion, GSAP, CSS, WAAPI), fan out parallel audit subagents, vet every finding at its file:line, and present a severity-ranked findings table. - Self-contained implementation plans: Writes one plan per finding into plans/ with exact current code, exact target values, repo conventions, ordered steps, boundaries, and feel-check verification — executable by any agent with zero prior context. - Use Case: Ask it to "audit the animations" in a React app; it finds that every dropdown uses transition: all 400ms ease-in, then produces a plan specifying the exact cubic-bezier(0.23, 1, 0.32, 1) token, 200ms duration, and trigger-anchored transform-origin to apply. ## Quick Start Ask the agent to audit this repository's animations and produce a prioritized set of 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 React codebase?▼

Run the full workflow: recon the motion stack (Framer Motion, CSS, GSAP), then audit eight categories covering easing, duration, physicality, interruptibility, performance, accessibility, cohesion, and missed opportunities. Findings are vetted at their exact file:line before being presented in a severity-ranked table.

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 this skill modify my source code?▼

No, it is strictly read-only on source code. It only creates or edits plan files under plans/ (or animation-plans/), and never runs installs, builds, formatters, or commits.

Can Framer Motion animations cause performance problems?▼

Yes. The x, y, and scale shorthand props are not hardware-accelerated and run on the main thread, dropping frames under load. The audit flags these and plans specify full transform strings like translateX(100px) instead.

When should I use a single animation review instead of a full audit?▼

Use a single-diff review when evaluating one pull request's motion changes. Use this audit when you want a prioritized roadmap of animation fixes across the whole codebase rather than feedback on one change.