Parent : [[INDEX-WEB-UIUX]]
Checklist qualité rendu — gate avant ship
Problème
Un rendu « qui a l'air pro » en dev peut être slop IA, inaccessible, lent ou cassé en prod. Sans gate mesurable, on ship à l'aveugle.
Solution
Passer cette checklist à chaque page ou feature UI avant de considérer le travail terminé. Bloquer le ship si un item Bloquant échoue.
Gate bloquante (non négociable)
| # | Check | Comment vérifier |
|---|---|---|
| B1 | Build prod OK | npm run build — zero error |
| B2 | Accessibilité clavier | Tab du haut au bas, focus visible, Escape ferme modals |
| B3 | Lighthouse a11y ≥ 90 | Chrome DevTools → Lighthouse → Accessibility (mobile) |
| B4 | Mobile 375px | Pas de scroll horizontal, texte lisible, CTA atteignable |
| B5 | Anti-slop visuel | Pas Inter-only + gradient violet hero + cards imbriquées (KNOW-ANT-WEB-001, 002) |
Gate recommandée
| # | Check | Seuil |
|---|---|---|
| R1 | Lighthouse Performance | ≥ 85 (mobile) |
| R2 | Lighthouse SEO | ≥ 90 (pages publiques) |
| R3 | Empty / loading / error | Les 3 états existent et sont designés |
| R4 | Desktop 1440px | Layout intentionnel, pas colonne perdue |
| R5 | Relecture à froid | Screenshot revu le lendemain — toujours OK ? |
Commandes rapides
npm run build
python meta/validators/quality-gate.py "C:\chemin\projet"
Lighthouse : F12 → Lighthouse → Mobile → Generate report.
Exemple
Correct
Checklist passée, scores notés dans le PR ou README :
Build: OK | a11y: 94 | perf: 88 | mobile: OK | slop scan: 0 hit
Incorrect
« L'IA a généré, ça rend bien, on ship. » — sans scores ni test clavier.
Quand ne PAS l'utiliser
- WIP interne < 1h (prototype jetable) — mais ne pas confondre avec prod.
- Backend-only sans UI.
Source
- Consolidation workflow qualité knowledge-core — 2026-06-09
Liens connexes
- [[KNOW-PAT-142|KNOW-PAT-142]]