web-design-guidelines
Überprüfung des UI-Codes anhand von Design-Richtlinien
Auch verfügbar von: antfu,antfu,vercel-labs
Diese Fähigkeit führt automatisch Audits von Webschnittstellen gemäß den Vercel Web Interface Guidelines durch und identifiziert Probleme mit Barrierefreiheit, UX-Probleme und Verstöße gegen die Design-Compliance in Ihrem UI-Code.
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "web-design-guidelines". Use web-design-guidelines to review src/components/Header.tsx
Erwartetes Ergebnis:
- src/components/Header.tsx:15 - Missing ARIA label on navigation element
- src/components/Header.tsx:23 - Color contrast ratio below 4.5:1 for link text
- src/components/Header.tsx:31 - Use semantic <button> instead of <div> for actions
Verwendung von "web-design-guidelines". Use web-design-guidelines to audit **/*.html
Erwartetes Ergebnis:
- index.html:42 - Form labels must be associated with inputs via for attribute
- index.html:58 - Images require alt text for accessibility
- about.html:12 - Heading levels should not skip (h1 -> h3)
Sicherheitsaudit
SicherStatic analysis flagged 7 potential issues (external_commands, network, weak cryptographic algorithms). Manual review confirms all findings are false positives. The 'external_commands' detections are markdown backticks for code formatting, not shell execution. The 'network' detection is an intentional hardcoded URL to Vercel's official GitHub guidelines repository. The 'weak cryptographic algorithm' detections are triggered by YAML frontmatter content with no actual cryptographic code. This skill is a safe design review tool that fetches official Vercel guidelines and applies them to audit UI code.
Qualitätsbewertung
Was du bauen kannst
Barrierefreiheits-Audit
Überprüfung einer React-Komponente oder HTML-Datei auf WCAG-Compliance, ARIA-Nutzung und Farbkontrastprobleme
Design-System-Compliance
Prüfung, ob UI-Komponenten etablierte Designmuster und Vercels Schnittstellenrichtlinien befolgen
Pre-Launch Code-Überprüfung
Durchführung eines letzten Audits aller UI-Dateien vor dem Deployment, um Barrierefreiheits- oder UX-Probleme zu erkennen
Probiere diese Prompts
Use the web-design-guidelines skill to review my UI code in src/components/Button.tsx for accessibility and design compliance.
Use web-design-guidelines to audit all files matching **/*.tsx in the components directory for interface guideline violations.
Run web-design-guidelines on the entire src directory to check all UI code against Vercel's Web Interface Guidelines.
I want to review my UI code. Use web-design-guidelines and ask me which files to review.
Bewährte Verfahren
- Geben Sie exakte Dateipfade oder Glob-Muster an, um die Überprüfung auf relevante Dateien zu fokussieren
- Überprüfen Sie Ergebnisse im file:line Format und beheben Sie Probleme nach Schweregrad geordnet
- Laden Sie frische Richtlinien vor jeder Überprüfung herunter, um die neuesten Regeln zu erhalten
Vermeiden
- Ausführen der Fähigkeit ohne Angabe, welche Dateien überprüft werden sollen
- Ignorieren von Barrierefreiheitsbefunden – sie beeinträchtigen Benutzer mit Behinderungen
- Annahme, dass die Fähigkeit alle Probleme erkennt – sie ist ein Helfer, kein Ersatz für manuelle Tests