improve-animations

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

Updated Aug 28, 2026
One-click install
npx skills add https://github.com/trobias/portfolio-nextjs-v2 --skill improve-animations-trobias
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: improve-animations
Source: https://github.com/trobias/portfolio-nextjs-v2/tree/main/.agents/skills/improve-animations
Command: npx skills add https://github.com/trobias/portfolio-nextjs-v2 --skill improve-animations-trobias

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Animation issues like wrong easings, non-interruptible keyframes, and layout-thrashing transitions are hard to spot and even harder to delegate. This Skill surveys a codebase's motion code, produces a prioritized audit, 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: Covers purpose/frequency, easing and duration, physicality and transform origin, interruptibility, performance, accessibility, cohesion, and missed opportunities, with exact target values (cubic-bezier curves, duration budgets, spring configs). - Prioritized findings table: Vets every finding at its file:line, ranks by severity and leverage, and separates additive missed opportunities from corrective fixes. - Self-contained execution plans: Writes one plan per finding into plans/ with verbatim current code, exact target values, repo conventions, scope boundaries, and feel-check verification steps. - Use Case: Ask it to audit a Next.js app using Framer Motion; it flags transition: all on dropdowns, scale(0) entrances, and missing prefers-reduced-motion handling, then produces plans another agent can implement verbatim. ## 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 or Next.js codebase?▼

Run the skill's full workflow: it maps your motion stack (CSS, Framer Motion, springs), audits eight categories from easing to accessibility, then presents a severity-ranked findings table. You select which findings become executable plans.

What animation issues does a motion audit typically find?▼

Common findings include ease-in on UI entrances, transition: all, scale(0) entrances, keyframes on interruptible UI like toasts, missing prefers-reduced-motion handling, and durations over 300ms on interface elements.

Does this skill modify my source code directly?▼

No. It is strictly read-only on source code and only creates files under plans/. Each plan is self-contained so a separate agent or developer can execute it, optionally via the execute invocation in an isolated worktree.

Can I audit only animation performance or accessibility?▼

Yes. Passing a category focus such as performance or accessibility limits the audit to that category after recon. Effort levels quick, standard, and deep also control coverage and subagent count.

Why should UI animations avoid ease-in and long durations?▼

ease-in starts slow, delaying the exact moment the user is watching, so entrances should use ease-out. UI animations should stay under 300ms; button feedback targets 100-160ms and modals 200-500ms.