improve-animations

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

Updated Aug 29, 2026
One-click install
npx skills add https://github.com/Seyamalam/pstu_final --skill improve-animations-seyamalam
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: improve-animations
Source: https://github.com/Seyamalam/pstu_final/tree/main/.agents/skills/improve-animations
Command: npx skills add https://github.com/Seyamalam/pstu_final --skill improve-animations-seyamalam

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Animation issues like wrong easings, non-interruptible keyframes, and missing reduced-motion support are hard to spot and even harder to delegate. This Skill surveys a codebase's motion code, produces a prioritized audit of findings, 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 exact target values. - Read-only advisory workflow: Never modifies source code; outputs vetted findings with file:line evidence and severity rankings ordered by leverage. - Self-contained execution plans: Generates one plan per finding with exact cubic-bezier curves, durations, spring configs, repo conventions, boundaries, and feel-check verification steps. - Use Case: Ask it to audit a React app's animations; it maps the motion stack (Framer Motion, CSS transitions, tokens), flags issues like transition: all or scale(0) entrances, then writes numbered plans in plans/ ready for another agent to implement. ## Quick Start Ask the assistant to audit this codebase's animations 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 or CSS codebase?

Run the audit workflow, which maps your motion stack first, then checks eight categories including easing, interruptibility, performance, and accessibility. Findings come back as a severity-ranked table with exact file and line evidence.

What animation issues does this audit detect?

It detects ease-in on UI elements, transition: all, scale(0) entrances, keyframes on rapidly-triggered UI, missing prefers-reduced-motion handling, wrong transform-origin on popovers, and durations over 300ms on interface elements.

Does the animation audit modify my source code?

No, the skill is strictly read-only on source code. It only creates plan files under the plans/ directory, each containing exact target values, steps, and verification checks for a separate executor to implement.

Can I audit only one category like performance or accessibility?

Yes, you can invoke it with a category focus such as performance or accessibility to run recon plus a single-category audit. Effort levels quick, standard, and deep also control coverage and subagent count.

When should I not use an animation audit skill?

Skip it when you need a review of a single diff rather than a codebase-wide survey, or when you want fixes applied directly. Those cases belong to a diff review or direct implementation workflow instead.