improve-animations

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

70|4|Updated Jul 22, 2025
One-click install
npx skills add https://github.com/AlexW00/Zettel --skill improve-animations-alexw00
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: improve-animations
Source: https://github.com/AlexW00/Zettel/tree/main/.agents/skills/improve-animations
Command: npx skills add https://github.com/AlexW00/Zettel --skill improve-animations-alexw00

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 concrete target values. - Read-only advisory workflow: Never modifies source code; all output is written as plan files under plans/ with exact file paths, current code excerpts, and target values. - Self-contained execution plans: Each plan includes severity, commit stamp, repo conventions, ordered steps, scope boundaries, and mechanical plus feel-check verification steps. - Use Case: Ask it to audit a React app's animations; it maps the motion stack (Framer Motion, CSS transitions, tokens), flags findings like transition: all or scale(0) entrances, and produces numbered plans another agent can implement one by one. ## 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 my 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 implementation plans.

What animation issues does a motion audit typically find?▼

Common findings include ease-in on UI entrances, transition: all, scale(0) appearances, keyframes on rapidly triggered elements like toasts, missing prefers-reduced-motion handling, and durations over 300ms on UI elements. Each finding cites exact file and line evidence.

Does it work with Framer Motion and plain CSS?▼

Yes. The recon phase detects Framer Motion, React Spring, GSAP, plain CSS, and WAAPI, plus component libraries like Radix and Base UI. Audit rules cover framework-specific issues such as non-accelerated Framer Motion x/y shorthand props.

Can the skill fix the animations it finds?▼

No, it is read-only on source code by design. It writes self-contained plans under plans/ that any agent or developer can execute; the execute variant dispatches an executor subagent and reviews the resulting diff separately.

When should I not use an animation audit skill?▼

Skip it when you need a review of a single diff rather than a codebase-wide roadmap, or when you want fixes applied immediately without a planning step. It is designed for prioritized motion improvement roadmaps, not inline code review.