reduced-motion-a11y

reduced-motion-a11y

Catalogue généré le 2026-05-11

En une phrase

ConcevoirConçoit une stratégie prefers-reduced-motion (prefers-reduced-motion) + variantescomplète pour limiterque leles motionutilisateurs sicknesssensibles au mouvement (vertige, migraines) puissent profiter du site sans casser l’UI.le design.

Quand l'utiliser

• VoirSur tout site avec des animations un peu marquées (parallax, transitions de page, scroll-triggered)

Avant la descriptionmise ci-dessusen etprod pour cocher la sectioncase «accessibilité WCAG Quand un utilisateur signale du motion sickness sur une page Pour allerstructurer plusune loinvariante »."reduce" qui reste élégante (pas juste tout couper) Sur un projet où le motion est central à l'identité (sinon trop d'animations à gérer)

Comment l'invoquer

• Slash command : /reduced-motion-a11y (si exposé dans ton CLI)

Phrases déclencheurs : voir la description complète ci-dessous Auto-invocation : sur✅ demandeOui explicite— pour mettre en place une stratégie reduced-motion

PourDescription aller plus loin

Reduced Motion & Accessibilité

Objectifdétaillée

RespecterLe réflexe naïf face à prefers-reduced-motionmotion: reduce, c'est de tout désactiver d'un coup avec une media query qui assassine toutes les transitions. Ce skill propose mieux : une matrice où tu décides animation par animation ce qui est essentiel (un chargement qui doit rester visible), ornemental (un parallax qu'on peut couper) ou à remplacer par une variante “reduce”apaisée utile.(un slide qui devient un fade).

Procédure

Il

génère Essentielensuite vs ornemental Substitutions reduce Impll'implémentation CSS via la media query +plus optionun attribut data (data-attrmotion="reduce") Vérifierpour focus/drawers/modalspouvoir tester

Outputsen attendus

local

sans Matricechanger les préférences système, et passe en revue les pièges classiques : le focus qui saute pendant une transition de page, les modales qui s'ouvrent sans animation visible donc semblent surgir, les drawers qui ne préviennent plus l'utilisateur.

Tu repars avec la matrice normal vs reduce

reduce, Snippetsdes snippets CSS +et utilitaires ChecklistJS, et une checklist QA pour vérifier que le site reste utilisable en mode reduced-motion. Pour Thymon : à utiliser sur tout projet où il y a plus de trois animations significatives, surtout les sites marketing où les utilisateurs ne s'attendent pas à un crash de leur oreille interne.

Source

• Plugin : perso (standalone)
• Nom interne : reduced-motion-a11y
• Fichier : /home/thymon/.claude/skills/reduced-motion-a11y/SKILL.md