Skill LibraryPrompt Skill1 DesignsTop Views

Motion Accessibility and Performance QA

Audit page and component motion for purpose, reduced-motion, scroll/loop controls, performant properties, lifecycle cleanup, and desktop/mobile evidence.

Skill Uses0

Recorded selections across prompt workflows.

Public Designs1

Ranked by views, then community favorites.

Prompt Lines7

Reusable instruction lines for generation.

Author@Interface Lab

Skill Directive

Description

Audit page and component motion for purpose, reduced-motion, scroll/loop controls, performant properties, lifecycle cleanup, and desktop/mobile evidence.

TagsQA

Skill Prompt

- Inputs must include page/component URL or code, motion inventory, triggers (load/hover/tap/scroll/drag/route), library used (CSS/Motion/GSAP/Lenis/Lottie/Anime.js), target devices, and reduced-motion requirements.
- Classify every motion first: orientation, state feedback, causal transition, progress, delight, or decorative loop; decorative loops are the first candidates to reduce or disable.
- Check accessibility: `prefers-reduced-motion` or library reduced-motion APIs must cover large movement, parallax, autoplay video, looping backgrounds, scrubbed motion, and continuous flashing; add an in-product motion toggle when needed.
- Check WCAG risk: non-essential interaction animation must be disable-able; auto-starting moving/flashing content that lasts more than five seconds alongside other content needs pause/stop/hide; critical state cannot be motion-only.
- Check performance properties: prefer transform, opacity, clip-path, and CSS variables; avoid sustained width/height/top/left/filter blur; throttle scroll/RAF/pointermove or use library motion values/quickTo.
- Check framework lifecycle: Motion in React/Next needs stable keys, AnimatePresence boundaries, and useReducedMotion; GSAP needs registerPlugin, scoped context revert; Lenis/ScrollTrigger need instance cleanup and refresh.
- Deliver a motion inventory, risk ranking, reduced-motion alternative matrix, performance fix recommendations, desktop/mobile verification steps, console/FPS/screenshot or DOM evidence, and boundaries needing human confirmation.

Public directive summary shown; Pro unlocks the full prompt.

Layout Info

Designs below are ordered by views. Top items use live previews; the rest stay fast thumbnail cards.

Unlock Pro All Skills

Motion Accessibility and Performance QA

More pages using Motion Accessibility and Performance QA