How do I install the Reduced Motion skill?

Run npx skillmds@latest add thedaviddias/reduced-motion in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Reduced Motion safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Reduced Motion?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Reduced Motion free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Reduced Motion?

thedaviddias (@thedaviddias) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Reduced Motion by thedaviddias — Agent Skill

Name: Reduced Motion
Author: thedaviddias

Reduced Motion

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Respect reduced motion preferences. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

thedaviddias Updated Sep 17, 2026

File contents

Respect reduced motion preferences

Animations can trigger vestibular disorders, migraines, and seizures—respecting motion preferences makes your site usable for millions of affected users.

Quick Reference

Use prefers-reduced-motion media query to disable non-essential animations
Never flash content more than 3 times per second (seizure risk)
Replace motion with opacity/color transitions when reduced motion is enabled
Provide user controls to pause or disable animations

Check

Verify that animations respect prefers-reduced-motion, no content flashes more than 3 times per second, parallax and scrolljacking effects have alternatives, and motion warnings appear before pages with excessive animation.

Fix

Use @media (prefers-reduced-motion: reduce) to disable animations. Ensure no flashing exceeds 3 flashes/second. Avoid motion behind static text. Provide motion warnings for immersive experiences.

Explain

Explain how motion affects users with vestibular disorders, photosensitive epilepsy, and cognitive disabilities, and why providing motion controls and warnings is essential for inclusive design.

Code Review

Review the rendered markup and interactive states that affect Respect reduced motion preferences. Flag exact elements, roles, labels, focus behavior, or keyboard interactions that violate the rule, and note how to verify the fix with browser accessibility tooling or assistive tech.

For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/en/rules/accessibility/reduced-motion

Frequently asked questions