Bastien Chanot 469c807c10 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>

2026-05-25 22:40:23 +02:00

1.6 KiB

Raw Blame History

Accessibility

This is not optional. Motion can cause discomfort, nausea, or distraction for many users.

Respect User Preferences

@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

1.6 KiB Raw Blame History