---
name: reduced-motion-design
description: Design reduced-motion alternatives for websites and apps. Use for prefers-reduced-motion, Motion useReducedMotion, CSS media queries, disabling parallax, replacing large movement, simplifying scroll scenes, preserving state feedback, accessibility, vestibular-sensitive animation, and motion QA.
---

# Reduced Motion Design

## Use This Skill

Use this skill for design reduced-motion alternatives for premium interactions.

## Operating Contract

1. Inspect the existing project before changing code.
2. Identify the motion stack, scroll behavior, component lifecycle, reduced-motion handling, and available verification commands.
3. Keep motion purposeful: clarify sequence, focus, depth, tactility, or product understanding.
4. Follow existing project conventions unless a change clearly improves the result.
5. Run available checks and visually inspect responsive/reduced-motion output when the change affects UI.

## Required Reference

Read [references/reduced-motion-design-guide.md](references/reduced-motion-design-guide.md) before making architectural or visible UI changes with this skill.