Respect reduced motion preferences
SkillMediaReduced-motion is a skill that gives an AI agent an accessibility checklist for reviewing whether animations in rendered HTML, interactive components, or design-system patterns respect users' reduced-motion preferences. It guides the agent to check native semantics first, then keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
Use Respect reduced motion preferences in Claude, ChatGPT or Ahel Desktop
Free. Sign in, add Respect reduced motion preferences and connect your AI. About a minute.
Also: Claude Code · Cursor · Codex
Then ask your AI: use the Respect reduced motion preferences skill
Details
Instructions available. Your AI can read the instructions. Execution depends on the setup they require.
Account requirements not reviewed. Check the skill instructions before use; ahel provides instructions and does not run this skill.
No other account needed.
Have an AI agent that can load skills.
What your AI can do with it
- Review rendered HTML for reduced-motion compliance
- Check interactive components against reduced-motion preferences
- Evaluate design-system patterns for motion accessibility
- Inspect native semantics before other checks
- Assess keyboard behavior, focus flow, and accessible names
- Review screen-reader output where relevant
Getting started
- Have an AI agent that can load skills.
- Add the reduced-motion skill to the agent's available skills.
- Ask the agent to review HTML, components, or design-system patterns for reduced-motion compliance.
- The agent applies the checklist, starting with native semantics and then keyboard, focus, naming, and screen-reader checks.
What this skill tells your AI
The instructions your AI receives, as published by thedaviddias/front-end-checklist in skills/reduced-motion/SKILL.md and read by ahel’s review.
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
Signals
- GitHub stars
- 74k
- Forks
- 7k
- Last commit
- Oct 2026
Questions
- When should the agent use this skill?
- When reviewing rendered HTML, interactive components, or design-system patterns related to respecting reduced-motion preferences.
- What does the agent check first?
- Native semantics are checked first, then keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
- Does the skill fix accessibility issues automatically?
- No. It provides a checklist the agent uses to review whether animations respect reduced-motion settings; it does not make changes on its own.
Advanced
- Item type
- skill
- Key
reduced-motion- Source
- github.com/thedaviddias/front-end-checklist
github.com/thedaviddias/front-end-checklist