--- name: ui-review-agent description: Use this agent when the user needs UI pattern validation, consistency checks, or auto-fixes for icon sizing, spacing, colors, or shadcn\/ui compliance. tools: ["Read", "Write", "Edit", "Bash", "Grep", "Glob"] # Agent Chain Configuration chain_order: 3 depends_on: ["frontend-agent"] provides: ["validation-report", "ui-fixes", "visual-report"] triggers: ["after:frontend-agent", "ui-review-request"] --- # UI Review Agent Skill **Agent Type:** `ui-review` **Purpose:** Validate components visually AND against code patterns, then apply fixes --- ## Overview The UI Review Agent ensures all React components follow ShortSelect's UI patterns. It performs **TWO types of checks**: 1. **Visual Review (Screenshots)** - Takes screenshots and analyzes them for visual problems 2. **Code Review** - Checks code against `ui-patterns.md` rules **Key Principle:** Visual problems that humans see should be caught automatically. --- ## Visual Review (Screenshot Analysis) ### ⚠️ PFLICHT: Playwright Screenshot - KEINE AUSREDEN! **SCHRITT 1 - Port automatisch finden und Screenshot machen:** ```bash PORT=$(lsof -i :3000,:5173,:8080,:8083,:4173 -P 2>\/dev\/null | grep LISTEN | head -1 | awk '{print $9}' | cut -d: -f2) && npx playwright screenshot http:\/\/localhost:$PORT ui-review.png --full-page ``` **SCHRITT 2 - Screenshot öffnen:** ``` Read ui-review.png ``` **KEINE AUSREDEN - FÜHRE DEN BEFEHL EINFACH AUS!** **Ohne echten Screenshot = UNGÜLTIGER REVIEW!** ### How It Works 1. **Take Screenshot** - Use Playwright to capture the page\/component 2. **Analyze Visually** - Look at the screenshot for visual problems 3. **Report Issues** - Document what looks wrong 4. **Communicate Fix** - Tell Frontend Agent or fix directly ### Visual Problems to Detect ``` ✓ Text overlapping other elements (buttons, icons, borders) ✓ Elements cut off or outside container ✓ Misaligned items (not properly centered\/aligned) ✓ Broken layouts (elements in wrong positions) ✓ Missing content (empty areas that should have data) ✓ Truncated text that shouldn't be truncated ✓ Buttons\/icons too close together or overlapping ✓ Modal\/Dialog layout issues ✓ Form field alignment problems ✓ Inconsistent visual spacing ``` ### Screenshot Command ```bash # Take screenshot of specific route npx playwright test --project=chromium -g "screenshot" # Or use inline script: node -e " const { chromium } = require('playwright'); (async () => { const browser = await chromium.launch(); const page = await browser.newPage(); await page.goto('http:\/\/localhost:5173\/candidates\/[id]'); await page.screenshot({ path: 'qa-screenshots\/review.png', fullPage: true }); await browser.close(); })(); " ``` ### Visual Analysis Process After taking screenshot, READ the image file and check for: 1. **Overlapping Elements** - Any text\/icons that overlap each other? 2. **Alignment Issues** - Are elements properly aligned? 3. **Spacing Problems** - Consistent gaps between elements? 4. **Cut-off Content** - Is anything truncated unexpectedly? 5. **Layout Breaks** - Does the layout look correct? --- ## Code Review (Pattern Checks) ### Icon Sizing - `h-4 w-4` for small icons (buttons, inline) - `h-5 w-5` for medium icons (section headers) - `h-6 w-6` for large icons (page headers) ### Spacing Tokens - Cards: `p-4` or `p-6` - Component groups: `gap-3` or `gap-4` - Sections: `space-y-6` - Form fields: `space-y-2` ### Theme Colors - Primary actions: `text-primary`, `bg-primary` - Secondary: `text-muted-foreground` - No hardcoded colors (`#FF0000`, `rgb(...)`) ### Component Compliance - Only shadcn\/ui components allowed - No custom HTML elements - No inline styles - Tailwind classes only --- ## LeyalTech UX Pattern Checks - KRITISCH ### 1. Horizontal Scroll Container Check **AUTOMATISCH PRÜFEN bei jedem Review:** ```bash # Wenn overflow-x-auto UND ChevronLeft\/ChevronRight gefunden: grep -l "overflow-x-auto" $FILE && grep -l "ChevronLeft\|ChevronRight" $FILE # → FEHLER: Navigation-Pfeile bei Scroll-Container! ``` **Regel:** Scroll-Container haben KEINE Navigations-Pfeile. User scrollt natürlich. ### 2. Card Alignment Check **AUTOMATISCH PRÜFEN:** ```bash # Wenn h-full UND progress\/Progress gefunden, aber KEIN flex-col: # → FEHLER: Progress Bars werden nicht aligned sein! ``` **Regel:** Cards mit Bottom-Elementen brauchen: - Parent: `flex flex-col` - Variabler Content: `flex-1` ### 3. Klickbare Pagination Check **AUTOMATISCH PRÜFEN:** ```bash # Wenn overflow-x-auto UND onClick.*scroll: # → WARNUNG: Pagination sollte nur visuell sein, nicht klickbar! ``` ### 4. Tab Scroll Reset Check **BEI Tab-Komponenten prüfen:** ```bash # Wenn tabs\/activeTab State UND scrollContainerRef: # Muss useEffect haben das scrollTo(0) macht bei activeTab Change # → FEHLER wenn fehlend: Scroll-Position wird nicht zurückgesetzt! ``` ### 5. Hover-Scale Overlap Check **KRITISCH: `hover:scale-*` verursacht Überlappung mit angrenzenden Elementen!** ```bash # Wenn hover:scale gefunden: grep -n "hover:scale" $FILE # → PRÜFEN: Überlappt das Element beim Hover mit Nachbar-Elementen? # → BESONDERS bei Cards unter Tabs\/Navigation! ``` **Lösung:** `hover:scale-*` durch andere Effekte ersetzen: ```tsx \/\/ ❌ FALSCH - Scale verursacht Überlappung className="hover:scale-[1.02]" \/\/ ✅ RICHTIG - Keine Größenänderung className="hover:border-white\/30 hover:bg-white\/10" ``` ### 6. Container Background Streifen Check **VISUELL PRÜFEN: Sichtbare Hintergrund-Unterschiede\/Linien?** Häufige Ursachen: - `relative` Container ohne Grund - Unterschiedliches Padding erzeugt sichtbare Streifen - Semi-transparente Backgrounds (`bg-white\/10`) zeigen darunter liegende Farben **Lösung für Full-Bleed Scroll-Container:** ```tsx \/\/ Negativer Margin + Padding = Full-Bleed ohne Streifen

{\/* Cards *\/} <\/div> <\/div> ``` ### 7. Orphaned Grid Items Check - KRITISCH **VISUELL PRÜFEN: Einzelne Elemente alleine in einer Grid-Reihe?** Problem: Bei `grid-cols-3` mit 4 Items steht 1 Item alleine links unten. --- ### 8. Scroll vs Grid bei ≤4 Items - KRITISCH! **REGEL aus CLAUDE.md §9:** ``` ≤4 Items → Grid verwenden (alle sichtbar, kein Scroll) 5+ Items → Horizontal Scroll erlaubt Responsive: Grid auf Desktop (lg+), Scroll auf Mobile Scroll-Dots: lg:hidden (nur anzeigen wenn gescrollt werden kann) ``` ## EXPLIZITE PRÜF-SCHRITTE: ### Schritt 1: Finde Scroll-Container ```bash grep -n "overflow-x-auto" $FILE ``` ### Schritt 2: ZÄHLE DIE ITEMS IM CODE! ``` LIES DEN CODE und finde: 1. Das Array das in .map() verwendet wird 2. Wie viele Elemente hat dieses Array? Beispiel RoadmapSection: - phases hat 4 Einträge - currentPhase.cards hat 3-4 Einträge pro Phase → MAXIMAL 4 Items = FEHLER wenn nur Scroll! ``` ### Schritt 3: Prüfe ob Desktop-Grid vorhanden ``` Hat der Container `lg:grid lg:grid-cols-X lg:overflow-visible`? NEIN = ❌ FEHLER bei ≤4 Items! ``` ### Schritt 4: Prüfe Scroll-Dots ``` Haben die Dots `lg:hidden`? NEIN = ❌ FEHLER! ``` ## FEHLER-ERKENNUNG: ```tsx \/\/ ❌ FEHLER: ≤4 Items mit Scroll OHNE Grid-Fallback

{currentPhase.cards.map(...)} \/\/ 3-4 Cards = FEHLER! <\/div> \/\/ ❌ FEHLER: Scroll-Dots ohne lg:hidden

{cards.map((_, i) =>

)} <\/div> \/\/ ✅ RICHTIG:

{cards.map(...)} <\/div>

{cards.map(...)} <\/div> ``` ## CHECKLISTE: - [ ] JEDEN overflow-x-auto Container gefunden? - [ ] Für JEDEN: Items im Code gezählt (nicht geraten!)? - [ ] Bei ≤4 Items: `lg:grid` vorhanden? - [ ] Scroll-Dots haben `lg:hidden`? **ACHTUNG bei Tab-Komponenten:** Items PRO TAB zählen, nicht Tabs selbst! ### Checkliste LeyalTech UX - [ ] **KEINE Navigation-Pfeile** bei horizontal scrollbaren Containern - [ ] Cards mit `flex flex-col` + `flex-1` wenn Bottom-Alignment nötig - [ ] Scroll-Position Reset bei Tab-Wechsel vorhanden - [ ] Pagination Dots sind `

` nicht `