improve-animations

Audits codebase animation and motion code, then writes prioritized self-contained implementation plans.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Animation quality issues like wrong easing, sluggish durations, and non-interruptible transitions are hard to spot and even harder to delegate. This Skill surveys a codebase's motion code as a senior advisor and produces prioritized findings plus self-contained plans that any agent or cheaper model can execute without further context. ## Core Features & Use Cases - Motion Recon and Audit: Maps the animation stack (Framer Motion, GSAP, CSS, WAAPI), token conventions, and interaction frequency, then audits against eight categories including easing, physicality, performance, and accessibility. - Vetted, Prioritized Findings: Re-reads every cited file:line to reject false positives, then presents a severity-ranked table ordered by leverage, plus missed animation opportunities. - Self-Contained Execution Plans: Writes one plan per selected finding into plans/ with exact cubic-bezier values, durations, file paths, code excerpts, and feel-check verification steps. - Use Case: A user says "make this app feel better" — the Skill audits all interactive UI, finds that dropdowns use ease-in and toasts jump due to bad keyframes, and produces three ready-to-execute fix plans. ## Quick Start Ask the assistant to audit the animations in this repository and produce a prioritized improvement plan.

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 a motion audit that maps your animation stack (Framer Motion, CSS transitions, GSAP), checks easing and duration conventions, and ranks findings by severity and leverage. This Skill performs that audit read-only and outputs a prioritized findings table plus executable fix plans.

How to improve animation easing and duration in a web app?▼

Identify high-frequency interactions first, then replace ease-in curves and overly long durations with values matched to UI motion conventions. The Skill's rule catalog in AUDIT.md supplies exact cubic-bezier and duration values, which are inlined into each plan.

Does this work with Framer Motion, GSAP, and plain CSS?▼

Yes. The recon phase detects Framer Motion, Motion, React Spring, GSAP, plain CSS keyframes and transitions, and WAAPI, plus component libraries like Radix and shadcn/ui. Plans extend the repo's existing easing tokens and conventions rather than inventing new ones.

Can the audit modify my source code directly?▼

No. The Skill is strictly read-only on source code and never installs, builds, commits, or formats anything. It only creates plan files under plans/, which you execute separately via the execute variant or any coding agent.

What are the limitations of a code-only animation audit?▼

Some qualities like a spring's bounce or a crossfade's feel cannot be judged from code alone. The Skill flags these cases honestly and includes feel-check steps in plans, such as slow-motion review, frame-by-frame inspection, and testing gestures on a real device.