forked from bchanot/claude
feat(skills): add design-motion-principles from kylezantos
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>
This commit is contained in:
co-authored by
Claude Opus 4.6
parent
6b55a3aaf6
commit
469c807c10
@@ -0,0 +1,52 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user