improve-animations

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

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

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 against eight categories, 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, with exact target values (cubic-bezier curves, duration budgets, spring configs). - Self-contained execution plans: Generates one plan per finding with verbatim current code, exact target values, repo conventions, ordered steps, scope boundaries, and feel-check verification steps. - Read-only advisory posture: Never modifies source code; all output lives under plans/, with invocation variants for quick or deep audits, category-focused reviews, and plan execution or reconciliation. - Use Case: Ask it to audit a Next.js app's animations; it maps the motion surface (Framer Motion, CSS transitions, tokens), flags findings like transition: all or scale(0) entrances with file:line evidence, and writes prioritized plans another agent can implement. ## Quick Start Ask the assistant to audit this codebase's animations 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 or Next.js codebase?▼

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

What animation issues does a motion audit typically find?▼

Common findings include ease-in on UI elements, durations over 300ms, scale(0) entrances, transition: all, non-interruptible keyframes on toasts, missing prefers-reduced-motion handling, and Framer Motion x/y shorthands that skip hardware acceleration.

Does this skill modify my source code automatically?▼

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 which dispatches an executor subagent.

Can I audit only animation performance or accessibility?▼

Yes. Passing a category focus such as performance or accessibility runs recon plus an audit of that category only. You can also use quick or deep variants to adjust coverage from high-traffic components to the whole repo.

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

It is not suited for reviewing a single diff, which belongs to a review-focused skill, nor for cases where you want fixes applied immediately without a planning step. It also defers to documented deliberate motion tradeoffs rather than re-litigating them.