motion-system

Motion system audit

Target: $ARGUMENTS (if empty, ask for the URL, and ask which interaction the user cares about — a modal, a dropdown, a page transition, a hover state).

What this skill can and cannot do

inspect_localhost_ui is read-only and returns one still frame. It cannot click, hover, scroll or record video, so you cannot watch an animation play. Do not write a report that implies you did.

You have four instruments, and every finding must come from one of them:

1. The CSS itself, read out of simplifiedDOM. Transition and animation utilities, duration-*, ease-*, delay-*, animate-*, transition-*, and inline style attributes carrying transition:, animation:, transition-duration or transition-timing-function. This is where most of the audit happens. Motion is declared in the markup and the stylesheet, and a declaration can be judged without being seen.
2. delay, used as a shutter speed. Capture the same URL with delay: 0 and again with delay: 2000. The first frame catches whatever is still in flight on load; the second shows the settled page. This is the only way to see motion through a still capture, and it only works for animation that runs on load or runs forever.
3. The user, asked to render a state. Anything driven by input — hover, press, open, close, toast, skeleton — cannot be triggered by the tool. Ask the user to put the page in that state and leave it there, then capture. See step 5 for the exact wording.
4. The source files. Keyframes, @media (prefers-reduced-motion) blocks, a tailwind.config transitionTimingFunction/keyframes extension, and animation-library props (Framer Motion transition, initial, animate, exit; GSAP tweens) live in code, not in the DOM. Read them.

Steps

1. Capture the settled page. Call inspect_localhost_ui with delay: 2000, fullPage: true. Confirm summary.domTruncated is false; if it is true, scope every finding to the part of the tree you actually read and say which regions you could not reach.