Does the Awwwards skill for Claude Code respect prefers-reduced-motion? We checked the files

An audit of the awwwards-animations skill for Claude Code at commit c92d00b found that none of its nine Quick Patterns checks prefers-reduced-motion, despite the skill listing the setting in its testing checklist. The skill's CSS-only reduced-motion snippet does not affect GSAP tweens or Lenis smooth scroll, which run in JavaScript; pairing the skill with GreenSock's gsap-core skill and gsap.matchMedia() adds the missing branch, which reverts ScrollTriggers automatically when the setting changes.

The awwwards-animations skill lists "Respects prefers-reduced-motion" in its testing checklist, but none of its nine ready-made patterns checks the setting. Its CSS snippet only reaches CSS animations. If you want Claude Code to ship award-style scroll motion that honors the setting, pair it with the official gsap-core skill and add the check yourself. We read the skill at commit c92d00b of DevMartinese/awwwards-animations-skill on 15 November 2026. It opens like this: Create premium web animations at Awwwards/FWA quality level. React-first approach . 60fps non-negotiable. Source: SKILL.md at c92d00b, "Awwwards Animations" In SKILL.md, reduced motion shows up in two places, and the reference files add a few more: useReducedMotion example and a global CSS block. - Respects prefers-reduced-motion . references/performance.md , a "Reduce Motion for Low-End" example that swaps a full animation for a 0.3 second fade, plus a checklist line. references/motion-patterns.md , a useReducedMotion tip, and in references/audio-reactive.md , one window.matchMedia check. The accessibility coverage exists, so the question is how far it reaches. For context, the skill has 3,211 installs and 15 GitHub stars on 15 November 2026 skills.sh registry and GitHub, via its Skillselion listing https://skillselion.com/skills/devmartinese/awwwards-animations-skill/awwwards-animations?utm source=devto&utm medium=social&utm campaign=awwwards-reduced-motion . Read its output before you ship it. No. The skill ships nine Quick Patterns: magnetic cursor, magnetic button, parallax hero, text character reveal, image reveal, glitch text, fractal tree, geometric dissection and brutalist grid. We searched the file for "reduce". The only hits are the Accessibility section and the checklist, both after the patterns. Not one pattern reads the user setting. The reference files add little. In references/gsap-react.md the word "reduce" does not appear. In references/lenis-react.md it appears once, in "Reduce lerp value". None of the skill's files we read mention gsap.matchMedia . So when you ask Claude Code for "a parallax hero with Lenis smooth scroll" and the skill supplies the code, the output has no reduced-motion branch unless you ask for one. The snippet is: @media prefers-reduced-motion: reduce { , ::before, ::after { animation-duration: 0.01ms important; transition-duration: 0.01ms important; } } It shortens CSS animations and CSS transitions. A GSAP tween runs in JavaScript on the GSAP ticker, so a gsap.to call ignores it. Lenis eases the scroll position in JavaScript too. We searched the lenis 1.3.17 package the version named in the skill's install notes in dist and the README for "reduced" and found no matches, so we found no built-in handling there either. In practice the CSS block protects hover transitions and keyframes. The scroll-scrubbed timelines, the text reveals and the smooth scroll layer are the heavy motion, and they are not covered. GreenSock's own gsap-core skill has the missing piece. We read it at commit aed9cfd of greensock/gsap-skills: gsap.matchMedia GSAP 3.11+ runs setup code only when a media query matches; when it stops matching, all animations and ScrollTriggers created in that run are reverted automatically . Source: skills/gsap-core/SKILL.md at aed9cfd, "Accessibility and responsive gsap.matchMedia " That revert behavior is what you want for scroll effects: if the visitor flips the OS setting mid-session, the ScrollTriggers unwind. The same section adds a rule worth copying into your project instructions: Respecting prefers-reduced-motion is important for users with vestibular disorders. Use duration: 0 or skip the animation when reduceMotion is true. Here is the parallax hero from the awwwards skill, rewritten around that API. The query is the no-preference case on purpose: matchMedia only calls the handler when one of its queries matches, so a lone reduce query would skip the animation for everyone else. It is a sketch built from the two sources above. We did not run it in a browser for this post. python 'use client' import { useEffect, useRef } from 'react' import gsap from 'gsap' import { ScrollTrigger } from 'gsap/ScrollTrigger' gsap.registerPlugin ScrollTrigger export function ParallaxHero { const root = useRef<HTMLDivElement null useEffect = { const mm = gsap.matchMedia mm.add ' prefers-reduced-motion: no-preference ', = { // runs only when motion is allowed; reduced-motion visitors get a static hero gsap.to '.parallax-bg', { yPercent: 50, ease: 'none', scrollTrigger: { trigger: root.current, start: 'top top', end: 'bottom top', scrub: true, }, } }, root.current ?? undefined return = mm.revert // gsap-core: revert on unmount }, return <div ref={root} className="relative h-screen overflow-hidden" …</div } Note that gsap-core tells you not to nest gsap.context inside matchMedia , which is why this sketch uses a plain effect with mm.revert instead of wrapping the call in useGSAP . The simplest approach is to not mount smooth scroll at all when the visitor asks for reduced motion. The skill already imports useReducedMotion from motion/react in its Accessibility section, so reuse it: js 'use client' import { ReactLenis } from 'lenis/react' import { useReducedMotion } from 'motion/react' export function SmoothScroll { children }: { children: React.ReactNode } { const reduced = useReducedMotion if reduced return < {children}</ return <ReactLenis root {children}</ReactLenis } The hook can return null before the first check, so Lenis may mount for one render. If that flicker matters, gate on reduced === false . Our sketch drops the GSAP ticker bridge from the skill's own SmoothScroll component to stay short. If you keep that bridge, render it only inside the non-reduced branch. A skill supplies patterns for one task. A rule in your project instructions applies to every task, so put it there: Every GSAP or Lenis animation needs a prefers-reduced-motion branch. Use gsap.matchMedia for GSAP. Do not mount ReactLenis when the user prefers reduced motion. Then check the result. The awwwards skill's own checklist says to confirm the setting is respected. In Chrome DevTools, open the Rendering panel and set "Emulate CSS media feature prefers-reduced-motion" to "reduce", then scroll the page. For a no-JavaScript route, see our CSS scroll animations vs GSAP guide https://skillselion.com/guides/css-scroll-animations-vs-gsap-claude-code-2026?utm source=devto&utm medium=social&utm campaign=awwwards-reduced-motion . Our ranked list of Awwwards-style skills for Claude Code https://skillselion.com/guides/awwwards-website-skills-claude-code?utm source=devto&utm medium=social&utm campaign=awwwards-reduced-motion has the full starter stack. The short version for this problem: matchMedia reduced-motion pattern. Install counts and stars come from the Skillselion catalog on 15 November 2026. File contents come from the GitHub commits named in each source line. If you already ship a Lenis or ScrollTrigger hero with a reduced-motion branch, how did you structure it? A matchMedia block, a context provider, or something else? I work on Skillselion, an independent directory that is not affiliated with Anthropic, OpenAI or Cursor.