Was macht design-pass?
Ziel: $ARGUMENTS
Toolkit: ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/ · Checklist: ${CLAUDE_SKILL_DIR}/reference/review-checklist.md
1. Baseline (vor Codeänderungen)
Stellen Sie sicher, dass der Dev-Server läuft (starten Sie ihn ggf. im Hintergrund; führen Sie niemals einen Produktionsbuild aus), dann:
node ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/audit.mjs http://localhost:<port> --pages <path> --widths 375,768,1440 --dark --out /tmp/design-pass/before
2. Audit vor dem Patchen
- Finden Sie jede Komponente, die das Ziel rendert, und jede andere Stelle, die dasselbe Muster rendert (durchsuchen Sie Klassenstrings und Komponentennamen).
- Verwenden Sie eine vorhandene Primitive (Button, Card, Modal, Abschnittsüberschrift), bevor Sie eine neue schreiben. Wenn dasselbe Markup 2+ Mal vorkommt, extrahieren Sie es und stylen Sie es dann einmal um.
- Bauen Sie genau das, was gefragt wurde. Keine neuen Abschnitte, Badges, Toggles oder Animationen, es sei denn, sie wurden angefordert.
- Verwenden Sie nur Projekt-Tokens. Wenn ein Wert nicht in der Skala vorhanden ist, verwenden Sie den nächstgelegenen Schritt oder schlagen Sie ein Token vor (siehe
design-ref).
3. Anwendung
Arbeiten Sie die Checkliste durch: Hierarchie, eine primäre Aktion pro Ansicht, die Abstandsskala, die Schriftskala, leere / Lade- / Fehlerzustände und Eingabefelder ≥ 16 Pixel auf mobilen Geräten.
4. Überprüfung
node ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/audit.mjs http://localhost:<port> --pages <path> --widths 375,768,1440 --dark --out /tmp/design-pass/after
node ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/diff.mjs /tmp/design-pass/before /tmp/design-pass/after
- Lesen Sie die After-Blätter für jede Breite im hellen und dunklen Modus. Betrachten Sie die Diff-PNGs auf unbeabsichtigte Änderungen außerhalb des Ziels.
- Graustufen-Prüfung: Führen Sie eine Breite erneut aus mit
--inject "document.documentElement.style.filter='grayscale(1)'". - Dann den vollständigen
ui-audit-Breitensatz einmal, und Typcheck + Lint (kein Build). - Wenn das Projekt eine Figma-Datei synchron zum Code führt, aktualisieren Sie die passenden Frames im selben Task.
Abbruchkriterien
- Kein horizontaler Scrollbalken, keine neuen Kontrast- oder Axe-Funde im Vergleich zu vorher.
- Diff zeigt nur Änderungen dort, wo sie beabsichtigt sind.
- Keine neue Komponente, die eine vorhandene dupliziert, und kein nicht angeforderter UI.
- Dunkelmodus geprüft oder bestätigt, dass das Projekt keinen hat.
- Typcheck und Lint bestehen.
- Eine kurze Zusammenfassung für den Benutzer sowie die 1–2 Blatt-Pfade, die einen Blick wert sind.