improve-animations

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

Updated Sep 7, 2026
One-click install
npx skills add https://github.com/raphaelmans/spectralpointengineering --skill improve-animations-raphaelmans
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: improve-animations
Source: https://github.com/raphaelmans/spectralpointengineering/tree/main/.skillshare/skills/improve-animations
Command: npx skills add https://github.com/raphaelmans/spectralpointengineering --skill improve-animations-raphaelmans

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 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 (cubic-bezier curves, duration budgets, spring configs). - Read-only advisor workflow: Recon of the motion stack (Framer Motion, GSAP, CSS, WAAPI), parallel subagent audits, manual vetting of every finding at its file:line, then prioritized findings ordered by leverage. - Self-contained execution plans: Each plan includes verbatim current code, exact target values, repo conventions with exemplars, scope boundaries, and feel-check verification steps, written to plans/ with commit stamps. - Use Case: Ask it to audit a Next.js app's animations; it finds transition: all 400ms ease-in on a dropdown, flags it as HIGH severity, and writes a plan specifying the exact cubic-bezier(0.23, 1, 0.32, 1) replacement, transform-origin fix, and reduced-motion handling. ## 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 default workflow: it maps your motion stack and conventions, audits eight categories (easing, interruptibility, performance, accessibility, and more), then presents a vetted findings table ordered by leverage. You select which findings become executable plans.

What animation problems does a motion audit typically find?▼

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

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, and an execute variant can dispatch an executor subagent in an isolated worktree.

Does it work with Framer Motion and plain CSS animations?▼

Yes. The recon phase detects Framer Motion, React Spring, GSAP, plain CSS, and WAAPI, plus component libraries like Radix, Base UI, and shadcn/ui. Findings and plans extend the repo's existing easing tokens and conventions rather than inventing parallel ones.

When should I not use a full animation audit?▼

Skip the full audit when you only need a review of a single diff (use a review-focused skill instead) or when you already know the exact fix you want. For a known improvement, use the plan invocation to write one targeted plan without auditing.