Skip to content
Get All-Access
All skills
ProCoding agent skills

Motion audit. Checks every animation against the WunderUI motion rules — and patches what it finds.

Finds transition-all, raw durations, ease-in-out and other generic curves, scroll-driven animations without an @supports fallback, missing reduced-motion handling, animated layout properties and fades on the LCP element. Every finding cites its rule from DESIGN.md; the mechanical ones are fixed with the token the element's role calls for.

Get All-AccessSee the workflow
Workflow

What it actually does. Step by step, in the order it runs.

  1. 1

    Collect the files

    Every component and style file: tsx, jsx, css, scss, vue, svelte, astro.

    motion-audit.mjs scan
  2. 2

    Generic motion

    transition-all (M8), raw ms and duration-300 (M1), ease-in-out, ease-in, ease-out and foreign cubic-beziers (M3). Ambient loops like spinners are exempt.

  3. 3

    Scroll animations

    animation-timeline: view() without @supports not (animation-timeline: view()) — invisible in browsers without scroll timelines (M7).

  4. 4

    Reduced motion

    Animations outside prefers-reduced-motion: no-preference or motion-safe:, layout properties that animate (M2), a fade on the first heading (M4).

  5. 5

    Justify each finding

    A report grouped by rule, each with its reason in one sentence and the suggested change.

    motion-audit.mjs report
  6. 6

    Patch and build

    Mechanical swaps by role — a hover gets duration-fast, a dialog duration-slow — then a new scan and the build.

    motion-audit.mjs fix
Example run

Real output. From a test run of this skill.

You ask

“Audit the motion in src.”

Or in other words

  • “Audit our animations.”
  • “Why do our transitions feel generic?”
  • “Check reduced motion across the app.”
2 files · 18 findings  M1 7 · M3 6 · M7 2 · M2 1 · M4 1 · M8 1

M8  src/Card.tsx:3      transition-all             →  transition
M1  src/Card.tsx:3      duration-300 (hover)        →  duration-fast
M3  src/styles.css:1    ease-in-out                 →  var(--ease-entrance)
M7  src/styles.css:1    animation-timeline: view()  →  add @supports not (…) fallback
M4  src/Card.tsx:4      fade on h1                  →  full opacity, transform only

fix: 7 applied · 7 manual left · 4 ambient loops skipped
Install

Comes with WunderUI Pro. One folder for your agent.

The WunderUI Pro skills zip comes with your order (confirmation e-mail and Polar customer portal). Unzip it and copy the folder:

# from the WunderUI Pro skills zip
cp -r wunderui-skills/skills/wunderui-motion-audit ~/.claude/skills/

Claude Code loads it by itself when your request fits. Cursor, Codex and other agents: point them at the skill's .

What it needs

  • Node.js 20+