Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add iart-ai/web-animation-skills --skill accessible-animationgit clone --depth 1 https://github.com/iart-ai/web-animation-skillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/iart-ai/web-animation-skills/accessible-animation)<a href="https://agentmods.dev/skills/iart-ai/web-animation-skills/accessible-animation"><img src="https://agentmods.dev/badge/skills/iart-ai/web-animation-skills/accessible-animation/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/iart-ai/web-animation-skills/accessible-animation"><img src="https://agentmods.dev/badge/skills/iart-ai/web-animation-skills/accessible-animation.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- Socket pass
- Snyk pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00098 | $0.02969 |
| Opus 5.5 | $0.00039 | $0.01188 |
| Sonnet 5.5 | $0.00020 | $0.00594 |
| Haiku 4.5 | $0.00010 | $0.00297 |
Grade A, and why
accessible-animation scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 232 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Accessible Animation (Reduced Motion, Tiered)
Honor prefers-reduced-motion: reduce as a graceful degradation, not a kill switch. The OS-level setting (macOS: Settings > Accessibility > Display > Reduce motion; Windows: Settings > Accessibility > Visual effects > Animation effects; iOS/Android equivalents) signals that vestibular-triggering motion causes nausea, dizziness, or migraines. The correct response is to remove the dangerous motion while keeping orientation cues.
When to use
Use when adding or auditing animation in a web UI, when a user reports motion sickness or WCAG findings, or when integrating animation libraries (GSAP, Framer Motion, Lenis smooth scroll, Anime.js, CSS keyframes) into an accessible product.
The core principle: tier motion, do not nuke it
Removing all animation is a common over-correction. An instant state change with no transition can be more disorienting (elements teleport) and removes useful affordances (focus rings, loading spinners that communicate progress). Sort every animation into three tiers:
- Tier 1 — Remove entirely (vestibular triggers). Parallax; large-area slides/translates across the viewport; scale/zoom of large elements; 3D rotation and spin; continuous auto-playing carousels and marquees; smooth-scroll hijacking (Lenis/Locomotive); scroll-jacked pinned scenes; motion-path animation; anything that moves a large portion of the screen or implies depth/self-motion.
- Tier 2 — Soften / shorten. Replace movement with a short opacity fade (≤200ms). Reduce distance and duration. Keep the fact of a transition (so elements don't teleport) but strip the displacement. Replace a 600ms slide-in-from-left with a 150ms cross-fade.
- Tier 3 — Always keep. Opacity fades, color/background transitions, focus-ring transitions, loading indicators, and motion that is essential to meaning (WCAG allows essential animation). These rarely trigger vestibular responses because they imply no self-motion.
CSS layer: media-query gating
What ships with it
2 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 1mo ago First seen · 232 lines · 98 tokens per session scan A 29d5fec1be9f
accessible-animation is a skill published in the GitHub repository iart-ai/web-animation-skills (60 stars, last pushed 4mo ago), licensed MIT. It adds 98 tokens to every session and 2,969 once invoked, about $0.0004 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
role-ui-ux-designer
Use when orchestrating UI/UX design systems, anti-AI-slop frontend styling, tactile micro-interactions, responsive design tokens, accessibility standards, and high-fidelity interface engineering.
cinematic-scroll
Design and build cinematic websites, 3D websites, interactive portfolios and product landing pages with scroll-driven storytelling, parallax, text animation and optional Three.js/WebGL scenes. Use for new experiences, motion improvements, scroll audits and storyboards in standalone HTML or an existing app. Includes…
cinematic-scroll
Design and build cinematic websites, 3D websites, interactive portfolios and product landing pages with scroll-driven storytelling, parallax, text animation and optional Three.js/WebGL scenes. Use for new experiences, motion improvements, scroll audits and storyboards in standalone HTML or an existing app. Includes…
validate-motion
Browse MotionSpec motion primitives and draft or validate a MotionSpec JSON specification for web animation. Use for catalog questions, choosing an available primitive, or checking an existing spec. This workflow validates specifications; it does not compile, deploy or execute animation.
audit-motion
Check a public website's CSS animation and transitions with MotionSpec. Use when the user asks for a motion-accessibility check, reduced-motion support, or pause controls on a specific public URL. Reports static CSS findings and coverage; does not certify accessibility or test flashing.
motion
Author verified, reduced-motion-safe web animation with MotionSpec. Use when adding scroll, entrance, hover, or loop animation to a website or web app — instead of hand-writing GSAP or CSS keyframes, write a MotionSpec JSON spec, validate it, and compile deterministic code.