Reviews pasted CSS, Tailwind classes or JSX styles for the motion mistakes that hurt real visitors, and lists only those, one line each with a fixed code, the place, why it matters and the fix - or exactly No findings. It catches movement that starts by itself, runs longer than five seconds and has no pause control, which fails WCAG 2.2.2 at Level A, large scaling or panning motion with no reduced-motion rule anywhere, a reduced-motion rule that leaves the large motion running, and layout properties such as height or top animated where transform fits. It leaves out the safe look-alikes, such as a short opacity fade on hover, a transform-only animation, and a reduced-motion rule that really switches the motion off. Use to review the styles of a page section before release, to check a hero, marquee, carousel or accordion for motion safety, or to gate a pull request that adds animation.
CSS Motion Review is a tested SKILL.md that reviews pasted CSS, Tailwind classes or JSX styles for the motion mistakes that hurt real visitors, and lists only those, one line each with a fixed code, the place, why it matters and the fix - or exactly No findings; an agent buys it once for $0.01 over x402.
Not for
Judging whether an animation looks good, measuring frame rates, colour contrast, flashing content, and anything a script adds that was not pasted. It reads the styles and markup as text and reports only the four listed motion problems, each with the place, the reason and a fix.
Tested, honestly
Tested 2026-10-29 with a strong and a weak model.
- SonnetStrong model, claude-sonnet-5-5
- Right on all 3 cases, read by hand. On a logo strip that loops for 36 seconds it gave exactly two lines, the loop with no pause control (named as the Level A failure) and the missing reduced-motion rule, and left out the opacity fade and the transform-only hover. On a hero with a hover zoom it named the reduced-motion rule that only changes a background colour and the accordion that animates its height, and left out the toast whose rule really switches it off. On a clean slideshow with a pause button it answered exactly No findings.
- HaikuWeak model, claude-haiku-5-5
- Right on all 3 cases, read by hand. It gave the same two findings as Sonnet on the logo strip and on the hero, with the same safe look-alikes left out, and answered exactly No findings on the slideshow. Its lines were indented by four spaces on one case and separated by a blank line on another, which the checks accept; the content is correct.
Full test summary
Example
Our own test text, before and after the skill ran. Excerpts only.
English · claude-sonnet-5-5
Before
<section class="sponsors">
<h2 class="visually-hidden">Our partners</h2>
<div class="sponsors-track">
<img src="/logos/harbor.svg" alt="Harbor Freight Co">
<img src="/logos/nimbus.svg" alt="Nimbus Cloud">
<img src="/logos/quill.svg" alt="Quill Press">
<img src="/logos/harbor.svg" alt="" aria-hidden="true">
<img src="/logos/nimbus.svg" alt="" aria-hidden="true">…
After
AUTOPLAY-NO-PAUSE — .sponsors-track, `animation: sponsor-scroll 36s linear infinite` — starts on load, loops past 5 seconds beside other content and has no pause, stop or hide control (WCAG 2.2.2, Level A) — add a pause/play button, or stop the scroll after a few cycles…
What is in the file
- The answer
- The codes
- How to read the file
- Rules
- Work in this order
- Short example
Languages
English. Tried in: English.
License
Perpetual, non-exclusive; use and modify for yourself incl. paid work; no resale or republishing. Holder: Georgi Kalchev, aiskills402.com. Full terms.
Versions
Current version 1.0.0, updated 2026-10-30. Whoever bought an earlier version gets new ones free through the same re-download token.
v1.0.0 · 2026-10-30
First release, written in the light-test batch of 29 October 2026 (three cases, price $0.01). The idea is ours; no foreign skill was opened, facts come from the public web accessibility and performance documentation (see notes/ideas.md). Output: one line per finding with a fixed code, or exactly `No findings.`
Test: three cases written by hand (two planted, each with a safe look-alike, one clean control), one run on Claude Sonnet and one on Claude Haiku, no run without the skill, no iteration on the skill text after the runs. `test/control.mjs` shows that the checks pass on the ideal answers and fail on realistic wrong ones. See `test-summary.json` for the verdicts read by hand. After the runs the frontmatter description was shortened to fit 1,024 characters; the rules the model follows were not changed.
FAQ
Reduced motion is missing; is that a WCAG failure?
Not by itself. The only code that is an accessibility failure is the loop that starts by itself, runs longer than five seconds beside other content and shows no way to stop it; the Understanding page for success criterion 2.2.2 places it at Level A. The other three are marked best practice, because the criterion about motion from interactions sits at Level AAA and the performance advice is guidance, not a rule.
Is a short fade on hover reported?
No. A transition of a few hundred milliseconds on opacity or transform runs once, is small, and moves nothing that forces the page to be laid out again. The skill states this and leaves such lines out of the list, along with a reduced-motion rule that sets the animation to none.
What if the paste has a reduced-motion rule that does not help?
That gets its own code. A rule that only changes a colour, or names another selector, while a big zoom or slide keeps running is reported as hollow. If the paste has no such rule at all, the report uses a different code, so you can tell a missing rule from a useless one.
How was it tested?
Three pasted sections: a logo strip that loops for 36 seconds, a hero with a hover zoom next to an accordion that animates its height, and a clean slideshow with a pause button. Each was sent once to Sonnet and once to Haiku, and the verdicts, read by hand, are in the test summary. Nothing was compared against a run without the skill, so no gain is claimed.