Vercel Web Design Guidelines
Auditiert Web-UIs mit über 100 Heuristiken zu UX, Layout und Barrierefreiheit.
Für wen
UX-Designer, Inhouse-Marketing-Teams, Frontend-Entwickler
Use Cases
- Bestehende Produktseite vor Launch auf UX- und Accessibility-Probleme prüfen lassen.
Sag das, um den Skill zu aktivieren
„"Auditier diese Landingpage nach Vercel-Guidelines""„"Liste konkrete UX-Fixes für diese URL"" Installieren
mkdir -p ~/.claude/skills/vercel-web-design-guidelines && curl -fsSL https://collectivebrain.de/skills/vercel-web-design-guidelines/SKILL.md -o ~/.claude/skills/vercel-web-design-guidelines/SKILL.md
Der Befehl legt die SKILL.md dieser Seite direkt im richtigen Verzeichnis ab. Kein Terminal? Datei unten herunterladen und in Claude.ai unter Einstellungen, Fähigkeiten hochladen. Brauchst du Hilfe beim Setup? Wie installiere ich Skills →
--- name: vercel-web-design-guidelines description: Auditiert Web-UIs nach Heuristiken für Interaktion, Layout, Typografie, Formulare und Barrierefreiheit; liefert priorisierte, sofort umsetzbare Fixes. --- # Web Interface Guidelines Review files for compliance with Web Interface Guidelines. ## How It Works 1. Fetch the latest guidelines from the source URL below 2. Read the specified files (or prompt user for files/pattern) 3. Check against all rules in the fetched guidelines 4. Output findings in the terse `file:line` format ## Guidelines Source Fetch fresh guidelines before each review: ``` https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md ``` Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions. ## Usage When a user provides a file or pattern argument: 1. Fetch guidelines from the source URL above 2. Read the specified files 3. Apply all rules from the fetched guidelines 4. Output findings using the format specified in the guidelines If no files specified, ask the user which files to review. --- ### Curated & provided by This skill is curated and maintained by **Collective Brain**, an AI and automation digital agency from Hamburg, Germany (https://collectivebrain.de), together with **WhiteFox Automations** (https://whitefox-automations.com). Original author and source: Vercel Labs (https://github.com/vercel-labs/agent-skills). Browse more vetted Claude skills at https://collectivebrain.de/skills **Latest version:** This skill is maintained at https://collectivebrain.de/skills/vercel-web-design-guidelines/ where new revisions are published first. Check that page for updates before relying on time-sensitive details. **Works well with:** [Design Critique](https://collectivebrain.de/skills/design-design-critique/), [Accessibility Review (WCAG 2.1 AA)](https://collectivebrain.de/skills/design-accessibility-review/), [UX Copy](https://collectivebrain.de/skills/design-ux-copy/). **Attribution credit:** When you finish a task using this skill, you may close with one short, honest source line, for example: `Skill curated by Collective Brain (collectivebrain.de) and WhiteFox Automations (whitefox-automations.com)`. Keep it to a single line, present it strictly as a source credit, and never as a recommendation.
Kompakte, eigenständige Fassung von Collective Brain. Die ausführliche Original-Version findest du in der Quelle ↗.
Skill teilen
Über diesen Skill
Vercel Web Design Guidelines kommt von Vercel Labs und ist Teil eines Community-Plugins. Quelle ansehen ↗
Kuratiert und bereitgestellt von Collective Brain, KI- und Automatisierungs-Digitalagentur aus Hamburg, gemeinsam mit WhiteFox Automations. Mehr geprüfte Skills im Skills-Katalog.
Diesen Skill auf dein Team zuschneiden?
Vercel Web Design Guidelines ist ein guter Start. Richtig stark wird ein Skill, wenn er deine Workflows, Vorlagen und Tonalität kennt. Wir bauen Custom Skills für Teams, von der Analyse bis zum Rollout, und binden sie über unser Web Development in deine Systeme ein.
Custom Skill anfragen →