About web-motion-auditor
Web Motion Auditor is a skill for inspecting animated states in a web app and reporting concrete fixes with file references. It checks accessibility and performance across desktop and mobile widths, and uses a motion quality rubric.
Key features
- 01Inspect animated UI states
- 02Check reduced-motion and focus visibility
- 03Review motion impact on interaction
- 04Check desktop and mobile performance
- 05Provide fixes with file references
Use cases
- 01Auditing a web app's transitions
- 02Checking motion accessibility
- 03Reviewing animation performance at different widths
- 04Prioritizing concrete animation fixes
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/web-motion-auditorin Claude Code to confirm it loaded.
Details
From the project READMEWeb Motion Auditor
Workflow
- Run or open the app.
- Inspect the animated states: load, hover, focus, click, route transition, scroll, empty/loading/success/error.
- Check accessibility:
prefers-reduced-motion- focus visibility
- no motion that blocks reading or interaction
- Check performance on desktop and mobile widths.
- Capture screenshots/video when possible.
- Score with the motion quality rubric.
- Return concrete fixes with file references.
Common Fixes
- Shorten transitions.
- Use transforms/opacity instead of layout-heavy properties.
- Reduce stagger count.
- Add reduced-motion branch.
- Replace decorative motion with state-explaining motion.
- Move complex narrative motion to Remotion or a controlled hero scene.
Comments
Markdown supported