# CSS Motion Review 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. - Page: https://aiskills402.com/skills/css-motion-review - Category: Code & Engineering (https://aiskills402.com/categories/code) - Price: $0.01 once, USD-priced, paid in USDC on Base over x402. Price as loaded on this page. The 402 response your agent receives is authoritative. - Version: 1.0.0 - Card (JSON): https://api.aiskills402.com/v1/skills/css-motion-review ## Use it when 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. ## 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. - Strong model (claude-sonnet-5-5 (Claude Code alias "sonnet")): 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. - Weak model (claude-haiku-5-5 (Claude Code alias "haiku")): 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. Note: Light test: three cases (two planted, one clean), one run per model; no comparison without the skill. The three page sections were written by us; each planted one carries a safe look-alike (a short opacity fade, a transform-only hover, a reduced-motion rule that really switches a toast off), and neither planted case has a comment pointing at the defect. Facts come from the public MDN, W3C and web.dev pages named in the notes, read on 29 October 2026; there are no owner-measured facts. Full summary: https://aiskills402.com/skills/css-motion-review/tests ## Example ### English (claude-sonnet-5-5) Before: >
Harbor Freight Co Nimbus Cloud Quill Press … 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 ## How to buy Agent (HTTP): 1. GET https://api.aiskills402.com/v1/skills/css-motion-review/file without a payment header. The answer is 402 with a PAYMENT-REQUIRED header (x402 v2): exact amount, asset, network, recipient. 2. Sign `accepts[0]` with an x402 client (for example @x402/core + @x402/evm). 3. Repeat the GET with the signature in the PAYMENT-SIGNATURE header. The answer is 200 with the file, its sha256 and a re-download token. Agent (MCP): https://mcp.aiskills402.com/mcp — free tools search_skills, get_skill, redownload_skill. Buying itself is over HTTP. Full flow: https://aiskills402.com/docs ## The file - Version: 1.0.0 - Size: 7.4 KB (7568 bytes) - SHA-256: 5855dd890f0d792ff606f67cd6e33e4b8c3cf4f73b3445ad818563f042f07242 - Updated: 2026-10-30 - New versions are free through your re-download token. ## Versions ### 1.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. ## License Perpetual, non-exclusive; use and modify for yourself incl. paid work; no resale or republishing. Holder: Georgi Kalchev, aiskills402.com. Terms: https://aiskills402.com/docs#license ## 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. ## Measurement limits - Models other than the two named above were not run. - Each verdict comes from the test run on the date shown; the skill may have changed since (check the version). - Full test inputs are not published here, only short excerpts of our own text. - Results on your own texts, languages and domains can differ. Offer note: Paid in USDC (USD-pegged) over x402 by an AI agent; one-time.