reduced-motion-a11y

reduced-motion-a11y

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

En une phrase

Conçoit une stratégie prefers-reduced-motion complète pour que les utilisateurs sensibles au mouvement (vertige, migraines) puissent profiter du site sans casser le design.

Quand l'utiliser

• Sur tout site avec des animations un peu marquées (parallax, transitions de page, scroll-triggered)
• Avant la mise en prod pour cocher la case accessibilité WCAG
• Quand un utilisateur signale du motion sickness sur une page
• Pour structurer une variante "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
• Auto-invocation : ✅ Oui — pour mettre en place une stratégie reduced-motion

Description détaillée

Le réflexe naïf face à prefers-reduced-motion: 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 apaisée (un slide qui devient un fade).

Il génère ensuite l'implémentation CSS via la media query plus un attribut data (data-motion="reduce") pour pouvoir tester en local sans changer 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, des snippets CSS et utilitaires JS, 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