Added matchMedia() and risk level: low

README.md

@@ -136,6 +136,10 @@ Copy or adapt the `.github/` files into your repository so Copilot uses them. Se
 - **[Agent Skills spec](https://agentskills.io/specification.md)** — SKILL.md format and discovery
 - **GitHub Copilot** — use `.github/copilot-instructions.md` and optional `.github/instructions/*.instructions.md` (included in this repo)
 
+## Risk level
+
+**LOW** — GSAP is an animation library with a minimal security surface.
+
 ## License
 
 MIT

examples/vanilla/main.js

@@ -7,7 +7,7 @@ import { ScrollTrigger } from "https://cdn.jsdelivr.net/npm/gsap@3.14.2/ScrollTr
 
 gsap.registerPlugin(ScrollTrigger);
 
-// 1. Single tween — transform alias x, autoAlpha
+// 1. Single tween — transform alias x, autoAlpha (opacity + visibility)
 gsap.to("#single", {
   x: 120,
   autoAlpha: 1,

skills/gsap-core/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: gsap-core
-description: Use GSAP core API correctly — gsap.to(), gsap.from(), gsap.fromTo(), easing, duration, stagger, and defaults. Use when animating DOM elements, SVG, or objects with GSAP, or when the user asks about GSAP tweens, easing, or basic animation. GSAP is used by Webflow Interactions (Webflow acquired GSAP); Webflow outputs or runs GSAP under the hood — GSAP skills apply when debugging or customizing Webflow animations.
+description: Use GSAP core API correctly — gsap.to(), gsap.from(), gsap.fromTo(), easing, duration, stagger, defaults, and gsap.matchMedia() for responsive/accessibility (prefers-reduced-motion). Use when animating DOM elements, SVG, or objects with GSAP, or when the user asks about GSAP tweens, easing, basic animation, responsive animation, or reduced motion. GSAP is used by Webflow Interactions (Webflow acquired GSAP); Webflow outputs or runs GSAP under the hood — GSAP skills apply when debugging or customizing Webflow animations.
 license: MIT
 ---
 
@@ -16,6 +16,8 @@ Apply when writing or reviewing GSAP animations that use the core engine: single
 
 ## When to Use GSAP
 
+**Risk level: LOW** — GSAP is an animation library with a minimal security surface.
+
 Use GSAP when an application requires:
 
 - ✅ complex animation sequencing
@@ -197,6 +199,39 @@ Set project-wide Tween defaults with **gsap.defaults()**:
 gsap.defaults({ duration: 0.6, ease: "power2.out" });
 ```
 
+## Accessibility and responsive (gsap.matchMedia())
+
+**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**. Use it for responsive breakpoints (e.g. desktop vs mobile) and for **prefers-reduced-motion** so users who prefer reduced motion get minimal or no animation.
+
+- **Create:** `let mm = gsap.matchMedia();`
+- **Add a query:** `mm.add("(min-width: 800px)", () => { gsap.to(...); return () => { /* optional custom cleanup */ }; });`
+- **Revert all:** `mm.revert();` (e.g. on component unmount).
+- **Scope (optional):** Pass a third argument (element or ref) so selector text inside the handler is scoped to that root: `mm.add("(min-width: 800px)", () => { ... }, containerRef);`
+
+**Conditions syntax** — Use an object to pass multiple named queries and avoid duplicate code; the handler receives a context with `context.conditions` (booleans per condition):
+
+```javascript
+mm.add(
+  {
+    isDesktop: "(min-width: 800px)",
+    isMobile: "(max-width: 799px)",
+    reduceMotion: "(prefers-reduced-motion: reduce)"
+  },
+  (context) => {
+    const { isDesktop, reduceMotion } = context.conditions;
+    gsap.to(".box", {
+      rotation: isDesktop ? 360 : 180,
+      duration: reduceMotion ? 0 : 2  // skip animation when user prefers reduced motion
+    });
+    return () => { /* optional cleanup when no condition matches */ };
+  }
+);
+```
+
+Respecting **prefers-reduced-motion** is important for users with vestibular disorders. Use `duration: 0` or skip the animation when `reduceMotion` is true. Do not nest **gsap.context()** inside matchMedia — matchMedia creates a context internally; use **mm.revert()** only.
+
+Full docs: [gsap.matchMedia()](https://gsap.com/docs/v3/GSAP/gsap.matchMedia/). For immediate re-run of all matching handlers (e.g. after toggling a reduced-motion control), use **gsap.matchMediaRefresh()**.
+
 ## Official GSAP best practices
 
 - ✅ Use **property names in camelCase** in vars (e.g. `backgroundColor`, `rotationX`).
@@ -204,6 +239,7 @@ gsap.defaults({ duration: 0.6, ease: "power2.out" });
 - ✅ Use documented built-in eases; use CustomEase only when a custom curve is needed.
 - ✅ Store the tween/timeline return value when controlling playback (pause, play, reverse, kill).
 - ✅ Prefer timelines instead of chaining animations using `delay`.
+- ✅ Use **gsap.matchMedia()** for responsive breakpoints and **prefers-reduced-motion** so animations can be reduced or disabled for accessibility.
 
 ## Do Not
 

skills/llms.txt

@@ -5,8 +5,8 @@ Use this file to discover which skill to load. Each skill lives in a directory o
 ## Skills
 
 gsap-core
-  Core API: gsap.to(), from(), fromTo(), easing, duration, stagger, defaults, transforms, autoAlpha.
-  Triggers: GSAP tweens, easing, stagger, basic animation, Webflow interactions, transform, opacity.
+  Core API: gsap.to(), from(), fromTo(), easing, duration, stagger, defaults, transforms, autoAlpha, gsap.matchMedia() (responsive, prefers-reduced-motion).
+  Triggers: GSAP tweens, easing, stagger, basic animation, Webflow interactions, transform, opacity, responsive, accessibility, reduced motion, matchMedia.
 
 gsap-timeline
   Timelines: gsap.timeline(), position parameter, labels, nesting, playback.