Design & Motion · iart-ai/web-animation-skills

accessible-animation

Name: accessible-animation
Author: iart-ai/web-animation-skills

This skill should be used when the user asks to "respect prefers-reduced-motion", "honor reduced motion", "make my animations accessible", "fix vestibular / motion-sickness issues", "add a useReducedMotion hook", "gate GSAP / Framer Motion / Lenis for reduced motion", or "meet WCAG 2.3.3 / C39". Provides tiered (not all-or-nothing) reduced-motion patterns in CSS and JS.

L2 Local · Restricted workspaceV1 Commit-PinnedWrite FileDual-pass Audit

Author iart-aiGitHub iart-ai/web-animation-skills ↗Stars 28License MIT（仓库根 LICENSE 为 MIT License, Copyright (c) 2026 iart.ai；.claude-plugin/plugin.json 的 license 字段同为 MIT）Commit b6dba3eb75

Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

Treat prefers-reduced-motion as tiered degradation rather than a binary switch: categorize animations into three tiers (1 Remove / 2 Soften / 3 Keep), then adapt CSS and JS tier by tier.

skills/accessible-animation/SKILL.md

Honor `prefers-reduced-motion: reduce` as a *graceful degradation*, not a kill switch.

This explains why it is more complex than a single animation: none !important: disabling everything causes jarring jumps and loses critical state feedback (progress, focus rings).

CSS layer: Use 0.01ms as a global fallback (preserving transitionend/animationend events) + animation-iteration-count: 1 to kill infinite spinners, and selectively enable motion via affirmative no-preference queries.

skills/accessible-animation/SKILL.md

which can break JS that waits for transitionend/animationend. Use 0.01ms.

Both details come from practical pitfalls: 0s can freeze JS awaiting events; infinite marquees still consume CPU even at near-zero durations.

JS layer: Since CSS cannot control GSAP/canvas/Lenis, manage them consistently using matchMedia with change listeners for real-time reactivity, and provide a reusable useReducedMotion hook.

skills/accessible-animation/SKILL.md

CSS cannot gate JS-driven animation (GSAP timelines, Framer's `animate`, canvas/WebGL, Lenis).

Three library-level recipes (gsap.matchMedia, Framer Motion reducedMotion, and simply not instantiating Lenis) each correspond to distinct rollback semantics.

Anchor requirements to WCAG criteria (2.3.3 AAA / C39 / 2.2.2 A), and mandate capturing both normal and degraded paths during acceptance verification.

skills/accessible-animation/SKILL.md

npx playwright screenshot --reduced-motion=reduce --wait-for-timeout=500 "file://$PWD/demo.html?t=0.6&reduce=1" reduced.png

Dual channels (?reduce=1 and --reduced-motion=reduce) resolve the verification challenge where the CSS layer cannot be toggled directly from JS.

2Core Capabilities

01Three-tier motion classification (Tier 1 Remove / Tier 2 Soften / Tier 3 Keep) with itemized criteria

02CSS global safety net with layered overrides (avoiding a global * that wipes out Tier 3 motion)

03JS-side matchMedia gating and runtime change listeners (OS toggle takes effect in real time)

04React useReducedMotion hook (including SSR hydration mismatch handling)

05Library-level recipes: GSAP matchMedia auto-revert / Framer Motion reducedMotion / Lenis non-instantiation

06WCAG mapping (2.3.3 Animation from Interactions / C39 / 2.2.2 Pause, Stop, Hide)

07Dual-path verification (one frame captured for normal and degraded paths each) and a 5-item pre-completion checklist

08Application-level one-click degradation (Framer Motion's MotionConfig reducedMotion="user")

09Zero-build delivery (single HTML with inline CSS and JS or via CDN, explicitly no bundler)

3External Dependencies

Kind	Dependency / Endpoint
cli	npx / Playwright（宿主侧截图工具，带 --reduced-motion=reduce 开关；非 skill 自带）
cli	scripts/seek-shot.sh + scripts/contact-sheet.sh（仓库根打包助手；SKILL.md 的 Packaged helper 段点名）
cli	ffmpeg（contact-sheet.sh 用 hstack 拼接触表）
package	gsap（可选示例：gsap.matchMedia 条件回滚）
package	lenis（可选示例：降级路径下不实例化平滑滚动）
package	framer-motion（可选示例：自带 useReducedMotion）
api	window.matchMedia('(prefers-reduced-motion: reduce)') 与 MediaQueryList 的 change 事件

4Recommended Governance & Evidence

Suggested Controls for Safe Operation

For Agent Runtime

Restrict working directory

For Administrators

Retain operation logs

Evidence & Triggers (File Paths & Excerpts)

本地工作目录: File I/O and artifact output: Zero disk writes within this skill's directory; deliverable is a single self-contained .html (containing both normal and degraded paths), authored by the agent.

Audit Notes: Grading is determined solely by the skill's own directory (skills/accessible-animation/ = SKILL.md + 0-byte README.md + references/patterns.md, verified completely via find): zero scripts, zero credentials, zero runtime outbound network calls (token scan for fetch(/XMLHttpRequest/curl/wget/child_process/process.env/API_KEY|TOKEN|SECRET/.env/eval( yielded 0 hits), and no disk writes. External artifacts referenced in text are host-side screenshot tools such as npx playwright (with the --reduced-motion=reduce flag) and optional npm packages (gsap/lenis/framer-motion, written in sample code and installed by the user's project), none of which are bundled runtime behaviors of this skill; delivered HTML loading via CDN constitutes artifact-phase references and does not affect the rating.

5Second-Pass Verification

[ok] --reduced-motion=reduce 是否真是可用的取证开关（否则验收步骤失效） — SKILL.md 与 references 都用它驱动验收，同时提供不依赖该 CLI 的替代（?reduce=1 加浏览器工具模拟媒体特性），因此验收路径不唯一依赖该开关；本次只读侦查未实际运行该命令，故仅确认文档层面自洽。
[ok] 0.01ms 而非 0s 的理由是否成立 — SKILL.md 正文与 Gotchas 两处一致说明：0s 会让等待 transitionend/animationend 的 JS 收不到事件；references 的全局兜底同样使用 0.01ms，前后自洽。
[ok] WCAG 条款号与级别是否与正文一致 — 2.3.3（AAA，交互触发运动）、C39（命名充分技术）、2.2.2（A，超过 5s 的自动运动需可暂停）三处在 WCAG mapping 段、速查表与 Gotchas 互相印证，未见错配。
[discrepancy] Packaged helper 的相对路径基准 — SKILL.md 写 scripts/seek-shot.sh anim.html 0 1.5 3，但 scripts/ 位于仓库根而非本 skill 目录，单装形态下相对路径不成立（对 pin commit 有效的真实出入）。

6Verdict & Scenarios

The only accessibility skill that systematically opposes disabling all animations and provides three-tier criteria

Covers both CSS and JS paths without leaving blind spots, explicitly noting that CSS cannot govern GSAP/canvas/Lenis

Acceptance requires dual-path screenshots with an enforcible degradation toggle, avoiding hollow claims of 'supporting reduced-motion'

Precise alignment with WCAG criteria (2.3.3 / C39 / 2.2.2), directly usable as review criteria

Best for: Suitable for: 1) Accessibility remediation of existing animations (user reports of dizziness or WCAG audit issues); 2) Teams embedding reduced-motion tiers into component design systems during design phases; 3) Projects needing to coordinate CSS and multiple JS animation sources (GSAP/Framer/Lenis/canvas); 4) Scenarios needing demonstration and acceptance scripts verified with dual screenshots.

Not for: Not suitable for: 1) Requests purely to make animations look prettier (this skill focuses only on degradation and compliance); 2) Full a11y audits (color contrast, focus order, and ARIA are out of scope; covers motion only); 3) Replacing glassmorphism or 60fps-animation—this skill governs how much motion occurs, not aesthetic flair or rendering efficiency.

Install Agent-Ready

① Verified Mirror 2026-09-28

Option A · Direct DownloadDownload accessible-animation.tar.gz

sha256: 490eb34e2446669d…

Option B · Copy Guide for Agent

install.json

Agents automatically download and verify mirrors from this JSON guide.

② Upstream GitHub

GitHub Repo ↗

Pinned to commit b6dba3eb75.