# Reduce Motion

> Add prefers-reduced-motion support. Wraps existing animations in a media query and provides static fallbacks.

- Skill: `dragoon0x/reduce-motion` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/reduce-motion`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/reduce-motion/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/reduce-motion

---


# /reduce-motion — Reduced Motion Support

For every animation and transition in the code:
1. Wrap in @media (prefers-reduced-motion: no-preference) { }
2. Add @media (prefers-reduced-motion: reduce) with:
   - animation-duration: 0.01ms
   - transition-duration: 0.01ms
   - Preserve final states (don't hide content that animates in)
3. Test that the page is fully usable without any motion