skills.rest
KlyrhonMiko
KlyrhonMikoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

improve-animations

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

Updated Aug 25, 2026
Search Tags:#code review#frontend#audit#Framer Motion#animation#easing#css transitions
One-click install
npx skills add https://github.com/KlyrhonMiko/kly-skills --skill improve-animations-klyrhonmiko
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: improve-animations
Source: https://github.com/KlyrhonMiko/kly-skills/tree/main/data/skills/improve-animations
Command: npx skills add https://github.com/KlyrhonMiko/kly-skills --skill improve-animations-klyrhonmiko

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Animation issues like wrong easings, non-interruptible keyframes, and layout-triggering transitions make interfaces feel sluggish, but finding and fixing them requires senior motion-design judgment. This Skill surveys a codebase's motion code, produces a prioritized audit across eight categories, and writes precise implementation plans that any agent or cheaper model can execute without further context. ## 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 into plans/ with exact file paths, verbatim current code, target cubic-bezier curves, durations, spring configs, repo conventions, and verification steps including feel checks. - Read-Only Advisor Posture: Never modifies source code, runs builds, or commits; it only analyzes and plans, with invocation variants like quick, deep, category focus, plan, execute, and reconcile. - Use Case: A team feels their React app's dropdowns and toasts feel off. Run the audit to discover ease-in on entrances, transition: all, and keyframe-based toasts, then hand the generated plans to a cheaper model to implement each fix. ## Quick Start Ask the AI to audit the animations in this repository 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 improve-animations audit, which maps your motion stack (Framer Motion, CSS, GSAP), greps for transitions, keyframes, and easing usage, then evaluates findings across eight categories like easing, performance, and accessibility. It outputs a prioritized findings table and implementation plans.

What easing should UI animations use?▼

Entering or exiting elements should use ease-out, on-screen movement uses ease-in-out, hover and color changes use ease, and constant motion uses linear. The audit flags ease-in on UI as always wrong and recommends strong custom curves like cubic-bezier(0.23, 1, 0.32, 1).

Does this skill modify my source code?▼

No, it is strictly read-only on source code. It only creates or edits files under the plans/ directory, and it never runs installs, builds with side effects, commits, or formatters. Execution of plans is delegated to a separate agent via the execute variant.

Why does transition: all hurt animation performance?▼

transition: all animates unintended properties off the GPU, triggering layout, paint, and composite work. The audit flags it and recommends animating only transform and opacity, which stay on the compositor thread and avoid dropped frames.

Can I audit only one category like accessibility or performance?▼

Yes, invoking the skill with a category focus such as performance or accessibility runs recon plus an audit of that category only. Effort levels quick, standard, and deep also adjust coverage and the number of parallel read-only subagents.

When should animations be removed instead of fixed?▼

Elements triggered 100+ times per day, like keyboard shortcuts or command palette toggles, should never animate. The purpose-and-frequency audit category identifies high-frequency decorative motion where deletion is the strongest fix.

Related Skills

Explore More Software Engineering Skills→
gigun-devgigun-dev

improve-animations

Analyzes animation code and generates UI refinement implementation plans.

Community
Advanced
trobiastrobias

improve-animations

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

Community
Advanced
xzedmxzedm

review-animations

Reviews animation and motion code against ten craft standards covering easing, duration, origin, and accessibility.

Community
Intermediate
TimeKastTimeKast

performance-profiling

Guide evidence-based web performance profiling with Lighthouse and browser DevTools.

Official
Basic