improve-animations

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

Updated Sep 5, 2023
One-click install
npx skills add https://github.com/eyenalxai/dotfiles --skill improve-animations-eyenalxai
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: improve-animations
Source: https://github.com/eyenalxai/dotfiles/tree/main/.agents/skills/improve-animations
Command: npx skills add https://github.com/eyenalxai/dotfiles --skill improve-animations-eyenalxai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Animation quality 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, and writes plans precise enough for any agent or cheaper model 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 using exact target values from Emil Kowalski's animation philosophy. - Self-contained implementation plans: Writes one plan per finding with verbatim current code, exact cubic-bezier curves, durations, spring configs, repo conventions, scope boundaries, and feel-check verification steps. - Read-only advisor posture: Never modifies source code, runs builds, or installs anything; it only creates files under plans/ and can dispatch an executor subagent on request. - Use Case: Ask it to audit a React app using Framer Motion and Tailwind; it maps the motion surface, flags findings like transition: all or scale(0) entrances with file:line evidence, then writes numbered plans in plans/ ready for execution. ## Quick Start Ask the agent to audit the animations in this repository and write improvement plans for the highest-leverage findings.

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, Tailwind), audits eight categories in parallel, vets each finding at its file:line, and presents a severity-ranked table. You then select which findings become executable plans.

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, missing prefers-reduced-motion handling, and Framer Motion x/y/scale shorthands that skip hardware acceleration.

Does this skill modify my source code?

No. It is strictly read-only on source code and only creates or edits files under plans/. If asked to fix code directly, it declines and points you to executing a written plan with any agent.

Can I audit only one category like performance or accessibility?

Yes. Passing a category focus such as performance, accessibility, or easing runs recon plus an audit of that category only. You can also use quick or deep to adjust audit effort and subagent count.

When should I not use an audit-then-plan workflow for animations?

Skip it when you need a review of a single diff (use a review-focused skill instead) or when you want fixes applied immediately. This skill deliberately separates judgment from execution and never edits source files itself.