ホーム / 全スキル / デザイン＆モーション / accessible-animation
English (EN)简体中文 (ZH)日本語 (JA)
デザイン＆モーション · iart-ai/web-animation-skills

accessible-animation

このスキルは、ユーザーが「prefers-reduced-motionに対応して」「reduced motionを尊重して」「アニメーションをアクセシブルにして」「前庭疾患・乗り物酔いの問題を解消して」「useReducedMotionフックを追加して」「GSAP / Framer Motion / Lenisをreduced motion用に制御して」「WCAG 2.3.3 / C39に準拠して」と要求した際に使用します。CSSおよびJSにおける段階的（オール・オア・ナッシングではない）なreduced-motionパターンを提供します。

L2 ローカル · 作業ディレクトリ限定V1 コミット固定ファイル書き込みDual-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
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

prefers-reduced-motionをオン／オフのスイッチではなく段階的デグラデーションとして扱う：アニメーションをまず3段階（1 削除 / 2 緩和 / 3 維持）に分類し、段階ごとにCSSとJSを変更する

skills/accessible-animation/SKILL.md
Honor `prefers-reduced-motion: reduce` as a *graceful degradation*, not a kill switch.
単なるanimation: none !importantの指定よりも複雑になる理由を説明しています。すべてを無効化すると、要素の瞬間移動や状態フィードバック（進捗表示、フォーカスリングなど）の喪失を招くためです。

CSS層：グローバルなセーフティネットとして0.01ms（transitionend/animationendイベントを維持）+ animation-iteration-count: 1を使用して無限ループを停止し、肯定クエリno-preferenceで動きを選択的に有効化する

skills/accessible-animation/SKILL.md
which can break JS that waits for transitionend/animationend. Use 0.01ms.
どちらの詳細も実践的なトラブルから得られた知見です。0sにするとイベント待機中のJSが停止し、無限マーキーは持続時間がほぼゼロであってもCPUを消費し続けるためです。

JS層：CSSでは制御できないGSAP/canvas/Lenisを、matchMediaとchangeリスナーによるリアルタイム検知で一元管理し、再利用可能なuseReducedMotionフックを提供する

skills/accessible-animation/SKILL.md
CSS cannot gate JS-driven animation (GSAP timelines, Framer's `animate`, canvas/WebGL, Lenis).
3つのライブラリ向けレシピ（gsap.matchMedia、Framer MotionのreducedMotion、Lenisの非インスタンス化）は、それぞれ異なるロールバックセマンティクスに対応しています。

要件をWCAG達成基準（2.3.3 AAA / C39 / 2.2.2 A）に紐付け、受入検証時には通常パスとデグラデーションパスの両方のスクリーンショット取得を必須化する

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
?reduce=1と--reduced-motion=reduceのデュアルチャネルにより、CSS層をJSから切り替えられないという検証上の課題を解決します。

2コア機能

013段階のモーション分類（Tier 1 削除 / Tier 2 緩和 / Tier 3 維持）と個別判定基準
02CSSグローバルセーフティネットと階層的オーバーライド（グローバル*によるTier 3モーションの上書き防止）
03JS側のmatchMediaゲート制御とランタイム変更リスナー（OS設定変更へのリアルタイム反映）
04React用useReducedMotionフック（SSRハイドレーションの不整合対策を含む）
05ライブラリ向けレシピ：GSAP matchMedia自動ロールバック / Framer Motion reducedMotion / Lenis非インスタンス化
06WCAGマッピング（2.3.3 インタラクションによるアニメーション / C39 / 2.2.2 一時停止、停止、非表示）
07デュアルパス検証（通常・デグラデーション各1フレームのキャプチャ）と完了前5項目チェックリスト
08アプリケーションレベルのワンクリックデグラデーション（Framer MotionのMotionConfig reducedMotion="user"）
09ゼロビルド納品（CSS・JSインラインまたはCDN経由の単一HTML、バンドラー不使用を明記）

3外部依存関係

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

4推奨統制措置と判定根拠

安全運用のための推奨統制措置
Agent 向け
作業ディレクトリを限定
管理者向け
操作ログを保持
判定根拠（ファイルパスと抜粋）
  • 本地工作目录: ファイル読み書きおよび成果物出力: 本スキルディレクトリ内へのディスク書き込みはゼロ。納品物はエージェントが出力する自立型.htmlファイル1点（通常パスとデグラデーションパスの両方を含む）。
監査ノート： 格付け判定はスキル自身のディレクトリ（skills/accessible-animation/ = SKILL.md + 0バイトのREADME.md + references/patterns.md、findにて全量検証済み）のみに基づきます：スクリプトゼロ、認証情報ゼロ、ランタイム外部送信ゼロ（fetch(/XMLHttpRequest/curl/wget/child_process/process.env/API_KEY|TOKEN|SECRET/.env/eval( のトークンスキャンで該当なし）、ディスク書き込みなし。本文内で言及されている外部ツールはホスト側のスクリーンショットツールであるnpx playwright（--reduced-motion=reduceフラグ付き）や任意のnpmパッケージ（gsap/lenis/framer-motion、サンプルコード内に記載されユーザープロジェクト側で導入）であり、いずれも本スキル自体に組み込まれた挙動ではありません。納品HTMLにおけるCDN参照は成果物フェーズの参照であり、格付けには影響しません。

5二重目の独立検証

  • [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 有效的真实出入）。

6結論

  • アニメーション全停止に系統立てて反対し、3段階の判定基準を提示する唯一のアクセシビリティスキル
  • CSSとJSという相互にカバーできない2つの経路を網羅し、CSSではGSAP/canvas/Lenisを制御できない点に言及
  • 受入条件としてデュアルパスのスクリーンショット取得と強制可能なデグラデーションスイッチを義務付け、「reduced-motion対応」という口先だけの主張を防止
  • WCAG基準（2.3.3 / C39 / 2.2.2）への具体的なマッピングにより、レビュー基準としてそのまま利用可能
    • 最適な用途： 適しているケース：① 既存のアニメーションに対するアクセシビリティ改修（ユーザーからのめまい報告やWCAG監査指摘への対応）；② 設計段階でコンポーネント規約にreduced-motionの階層分類を組み込むチーム；③ CSSとGSAP/Framer/Lenis/canvasなどの複数アニメーションソースを同時に制御する必要があるプロジェクト；④ 2種類のスクリーンショットで納品・受入確認を行うデモおよび検証スクリプトが必要な場合。
    不向きな用途： 適していないケース：① アニメーションの見た目を良くしたいだけの要望（本スキルはデグラデーションと適合性のみを扱います）；② 完全なa11y監査（コントラスト比、フォーカス順序、ARIAは対象外であり、モーションのみをカバーします）；③ glassmorphismや60fps-animationの代替としての利用（本スキルは動きをどれだけ抑えるかを管理するものであり、見栄えの良さや描画パフォーマンスを追求するものではありません）。
    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
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit b6dba3eb75.