Layout-Prüfung
layout-audit.mjs neben dieser Datei durchläuft eine Seite in mehreren Breiten und misst das DOM. Es
meldet nur das, was ein Mensch als Layout-Fehler bezeichnen würde; Barrierefreiheit ist eine separate Frage, die es nicht stellt.
node ~/.claude/skills/layout-audit/layout-audit.mjs --base=http://localhost:3000 --routes=/,/pricing
Flags: --routes (kommasepariert, Standard /), --widths (Standard 1440x900,390x844), --auth=user:pass
für Basic Auth, --shots=<dir> um zusätzlich einen Screenshot pro Route und Breite zu erstellen, --json um Durchläufe zu vergleichen.
Playwright wird aus dem global installierten @playwright/cli bezogen, sodass kein Projekt eine Abhängigkeit erhält.
Prüfungen
| Prüfung | Bedeutung |
|---|---|
viewport-overflow | Ein Element ragt über den Viewport-Rand hinaus – die Seite scrollt horizontal |
clipped-text | Eine Box schneidet ihren eigenen Text ohne Auslassungspunkte und ohne Titel ab, sodass der Text unerreichbar ist |
collapsed-text | Ein Element enthält Text, hat aber keine Höhe – es erscheint als leere Lücke |
overlapping-text | Zwei Textboxen werden auf denselben Pixeln gezeichnet |
tiny-text | Schriftgröße unter dem, was auf einem Telefon lesbar ist |
Arbeiten mit dem Ergebnis
- Führen Sie es gegen einen Build aus, nicht gegen einen Dev-Server während der Bearbeitung. Hot Reload hinterlässt halb angewandte Styles.
- Gruppieren Sie die Funde nach Element, bevor Sie etwas beheben. Ein gemeinsamer Header, der auf zehn Routen wiederholt wird, ist ein Fehler, nicht zehn, und die Anzahl im Bericht ist nicht der Arbeitsaufwand.
- Abschneiden mit Auslassungspunkten und einem Titel ist ein Muster, kein Fehler – das Tool schließt es bereits aus. Wenn ein Fund meldet, dass eine Box Text abschneidet, ist der Text tatsächlich unerreichbar.
- Ein wiederholter Fund bei einer Klasse von Elementen ist eine Designentscheidung. Die Schriftgröße auf einer gesamten Oberfläche oder eine Farbe gehört demjenigen, der das Design verantwortet; melden Sie die Zahlen und lassen Sie sie entscheiden, anstatt die Palette beiläufig zu ändern.
- Ein Screenshot fängt immer noch ein, was keine Regel formuliert. Nutzen Sie
--shotsund betrachten Sie die Seiten, die die Regeln als sauber bezeichnet haben, insbesondere die Telefonbreite. - Ein sauberer Durchlauf sagt nichts über das Telefon einer Person aus. Playwrights WebKit mit einem iPhone-Profil ist nicht Safari auf einem iPhone. Wenn ein gemeldeter Telefonfehler nicht reproduzierbar ist, sagen Sie dies, anstatt zu melden, dass es funktioniert, fragen Sie dann nach dem Gerät oder entfernen Sie den vermuteten Mechanismus vollständig.
- Beweisen Sie, dass eine Regel feuert, bevor Sie einer Null vertrauen. Platzieren Sie den Fehler auf einer Testseite, führen Sie die Prüfungen dagegen aus und beobachten Sie, wie die Regel ihn meldet. Insbesondere ein Seitenebenen-Clip lässt naive Breitenvergleiche auf jeder Seite bestehen.