469c807c10
Motion/animation design skill with 3-designer lens (Emil Kowalski, Jakub Krehel, Jhey Tompkins). Two modes: Create and Audit. Complements frontend-design (broad) with deep motion expertise. Integration points: - skills-external/design-motion-principles/ — skill files + references - link.sh EXTERNAL_SKILLS — symlink to ~/.claude/skills/ - install-plugins.sh step 8c — presence check - update-all.sh step 7.2 — sync from GitHub - profiles: design, full, web, web-full — listed as external - plugin-advisor — decision table, recommended sets, conditional rules - design-gate — symlink check + non-blocking warning if missing Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
53 lines
1.6 KiB
Markdown
53 lines
1.6 KiB
Markdown
# Accessibility
|
|
|
|
**This is not optional.** Motion can cause discomfort, nausea, or distraction for many users.
|
|
|
|
---
|
|
|
|
## Respect User Preferences
|
|
|
|
```css
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|
|
```
|
|
|
|
**What this does**: Effectively disables animations while preserving final states (so layouts don't break).
|
|
|
|
---
|
|
|
|
## Functional vs. Decorative Motion
|
|
|
|
| Type | Purpose | Reduced Motion Behavior |
|
|
|------|---------|------------------------|
|
|
| **Functional** | Indicates state changes, spatial relationships, orientation | May need alternative (instant state change, no transition) |
|
|
| **Decorative** | Pure delight, visual interest | Can be fully removed |
|
|
|
|
**The test**: Does removing this animation break the user's ability to understand what happened? If yes, it's functional.
|
|
|
|
---
|
|
|
|
## Motion Sensitivity Considerations
|
|
|
|
- Avoid large-scale motion (full-screen transitions, parallax)
|
|
- Avoid continuous or looping animations that can't be paused
|
|
- Provide pause controls for any ambient animation
|
|
- Be especially careful with vestibular triggers: zooming, spinning, parallax
|
|
|
|
---
|
|
|
|
## Implementation Checklist
|
|
|
|
- [ ] Tested with `prefers-reduced-motion: reduce` enabled
|
|
- [ ] No vestibular triggers (excessive zoom, spin, parallax)
|
|
- [ ] Looping animations can be paused
|
|
- [ ] Functional animations have non-motion alternatives
|
|
- [ ] Users can complete all tasks with animations disabled
|