Vercel Web Design Guidelines

Sag das, um den Skill zu aktivieren

---
name: vercel-web-design-guidelines
description: Auditiert Web-UIs nach Heuristiken für Interaktion, Layout, Typografie, Formulare und Barrierefreiheit; liefert priorisierte, sofort umsetzbare Fixes.
---

Dieser Skill auditiert Web-UIs mit einer an den Vercel Web Interface Guidelines orientierten Checkliste und macht aus jedem Fund einen konkreten Fix.

## Wann dieser Skill aktiviert wird
- Eine Landing- oder Produktseite soll vor Launch auf UX- und Accessibility-Probleme geprüft werden.
- Der Nutzer will konkrete UX-Fixes für eine URL oder einen Code-Ordner.
- Nach einem Redesign sollen Fokus, Kontraste und responsives Verhalten verifiziert werden.

## Workflow
1. Eingabe klären: Live-URL im Browser rendern (Screenshots bei 360, 768 und 1280 px) oder Code lesen; immer den gerenderten Zustand prüfen, nicht nur den Quelltext.
2. Interaktion: alles Interaktive per Tab erreichbar, sichtbarer Fokus-Ring (nie outline: none ohne Ersatz), Touch-Ziele mindestens 44x44 px, Links als <a> mit href, Buttons als <button>.
3. Barrierefreiheit messen statt schätzen: Kontrast für Fließtext mindestens 4.5:1, für großen Text und UI-Elemente 3:1, Alt-Texte, genau ein <h1>, saubere Heading-Reihenfolge.
4. Formulare: jedes Input mit verknüpftem <label>, passendem type und autocomplete, Fehlermeldungen direkt am Feld statt nur als Toast, Absenden per Enter.
5. Layout und Typografie: konsistente Spacing-Skala (etwa 4-px-Raster), Zeilenlänge 45 bis 90 Zeichen, mobil mindestens 16 px Schrift (sonst iOS-Auto-Zoom), Bilder mit width und height gegen Layout-Shift.
6. Zustände durchspielen: Hover, Focus, Active, Disabled, Loading, Empty und Error je Kernkomponente; fehlende Zustände sind Funde.
7. Responsive: kein horizontales Scrollen, keine Überlappungen, kein abgeschnittener Text auf den drei Testbreiten.
8. Funde priorisieren (Blocker, Hoch, Mittel, Niedrig), je Fund einen Fix mit Code oder CSS-Wert nennen.

## Output-Format
Markdown-Report: Kurzfazit (Funde je Schwere), dann ein Abschnitt pro Kategorie. Jeder Fund nennt Schwere, Fundort (Selektor oder Datei:Zeile), verletzte Regel und Fix als Snippet. Am Ende 5 Quick Wins.

## Qualitätsregeln
- Jeder Fund nennt den exakten Fundort und ist ohne weitere Recherche umsetzbar.
- Kontrastwerte werden berechnet und als Zahl angegeben, nie als Eindruck.
- Blocker nur für echte Nutzungshindernisse: Tastatur-Falle, unbeschriftetes Formular, Kontrast unter 3:1.
- Keine Pauschalaussagen wie "UX verbessern": jeder Fix enthält Zielwert oder Ziel-Markup.
- Geschmacksfragen als Hinweis markieren, nicht mit Regelverstößen vermischen.

Kompakte, eigenständige Fassung von Collective Brain. Die ausführliche Original-Version findest du in der Quelle ↗.

Skill teilen