motion-visual-regression

motion-visual-regression

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

En une phrase

Met en place des tests visuels Playwright (golden screenshots) pour détecter automatiquement quand une animation casse ou quand un composant change visuellement sans qu'on le veuille.

Quand l'utiliser

• Sur un projet où les régressions visuelles coûtent cher (site client, portfolio public)
• Quand une équipe travaille à plusieurs et qu'on veut un filet de sécurité en CI
• Après avoir polish un motion system pour figer le rendu attendu
• Quand on a déjà eu un bug "ça marche en local mais pas en prod" sur du visuel
• Sur les pages critiques d'un site (hero, checkout, formulaires)

Comment l'invoquer

• Slash command : /motion-visual-regression
• Auto-invocation : ✅ Oui — pour stabiliser le motion et détecter les régressions visuelles

Description détaillée

L'idée : Playwright prend une capture d'écran de référence (le "golden") quand tout va bien, puis à chaque commit il recompare la page actuelle à la référence. Si les pixels diffèrent au-delà d'un seuil, le test échoue et tu sais qu'un changement de CSS ou un refactor a impacté le visuel.

Ce skill installe Playwright, écrit deux premiers tests toHaveScreenshot() (un état idle + un état stable après animation), puis t'arme contre la "flakiness" — c'est-à-dire les faux positifs où le test échoue sans raison à cause d'une animation qui n'est pas finie au moment de la capture. Pour ça il propose de désactiver les animations pendant les tests, de masquer les zones dynamiques (timestamp, données live), et de fixer des seuils de tolérance pixel pertinents.

Tu repars avec des scripts npm prêts à lancer, deux tests qui fonctionnent dès le premier npx playwright test, et un set de recommandations pour éviter que ta suite de tests visuels devienne un cauchemar à maintenir. Pour Thymon : utile si tu déploies souvent et que tu veux dormir tranquille la nuit, moins pertinent sur un projet perso en solo où tu vois tout de suite si quelque chose casse.

Source

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