motion-audit

Audits UI animations and produces prioritized motion fixes with exact values.

Updated Aug 12, 2026
One-click install
npx skills add https://github.com/brunoolf/frontend-craft --skill motion-audit-brunoolf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: motion-audit
Source: https://github.com/brunoolf/frontend-craft/tree/main/skills/motion-audit
Command: npx skills add https://github.com/brunoolf/frontend-craft --skill motion-audit-brunoolf

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interfaces often suffer from missing animations where continuity is needed, or from existing animations that violate craft standards like wrong durations, default easing curves, and missing reduced-motion support. This Skill performs a read-only review of motion in a codebase and produces a prioritized, executable fix plan without editing any files. ## Core Features & Use Cases - Opportunity Detection: Scans for absent motion such as broken continuity, missing action feedback, and state changes without transitions, rejecting more proposals than it approves. - Existing Animation Review: Judges current animations against a checklist covering duration, easing curves, symmetry, distance, density, interruption handling, reduced-motion, and performance. - Prioritized Fix Plans: Produces self-sufficient findings with file and line references, exact property/duration/curve values, and reduced-motion behavior, ordered by impact over effort. - Use Case: Ask "what could be animated here" or "review the animations" and receive findings like "eleven components use transition: all 0.3s ease-in-out" with the exact replacement values, ready for another agent to implement. ## Quick Start Ask the assistant to review the animations in this project and produce a prioritized motion improvement plan.

Frequently Asked Questions about motion-audit

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit animations in a web app?▼

Run a motion audit that checks each animation against criteria like duration under 400ms, intentional easing curves, exit symmetry at 70-80% of entry, and reduced-motion support. Findings are reported with file, line, and exact replacement values.

What should I check when reviewing UI animations?▼

Check duration, easing curve, enter/exit symmetry, travel distance, stagger caps, interruption handling, initial state safety, reduced-motion behavior, and performance issues like animating layout properties or permanent will-change.

Does this motion audit modify my code?▼

No. The audit is strictly read-only and produces findings and a prioritized plan with exact values. A separate implementation agent applies the fixes, which prevents the reviewer from altering design intent.

How are motion audit findings prioritized?▼

Findings are ranked as Blocking when they break accessibility or usability, High when users notice quality loss, Medium for craft issues, and Note for minor observations. Plans are ordered by impact over effort.

When is missing animation not a problem?▼

Absence of motion is often correct, such as in quiet dashboards. The audit rejects more proposals than it approves and only flags missing motion when it breaks continuity, feedback, orientation, or state transitions.