web-design-guidelines
Revue du code UI contre les directives de conception
Également disponible depuis: antfu,antfu,vercel-labs
Cette compétence Audite automatiquement les interfaces web contre les directives d'interface web de Vercel, identifiant les problèmes d'accessibilité, les problèmes UX et les violations de conformité de conception dans votre code UI.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "web-design-guidelines". Use web-design-guidelines to review src/components/Header.tsx
Résultat attendu:
- 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
Utilisation de "web-design-guidelines". Use web-design-guidelines to audit **/*.html
Résultat attendu:
- 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)
Audit de sécurité
SûrStatic 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.
Score de qualité
Ce que vous pouvez construire
Audit d'accessibilité
Réviser un composant React ou un fichier HTML pour la conformité WCAG, l'utilisation ARIA et les problèmes de contraste des couleurs
Conformité au système de conception
Vérifier si les composants UI suivent les modèles de conception établis et les directives d'interface de Vercel
Revue de code pré-lancement
Exécuter un audit final sur tous les fichiers UI avant le déploiement pour détecter tout problème d'accessibilité ou UX
Essayez ces prompts
Utilisez la compétence web-design-guidelines pour réviser mon code UI dans src/components/Button.tsx pour l'accessibilité et la conformité de conception.
Utilisez web-design-guidelines pour auditer tous les fichiers correspondant à **/*.tsx dans le répertoire des composants pour les violations des directives d'interface.
Exécutez web-design-guidelines sur l'ensemble du répertoire src pour vérifier tout le code UI contre les directives d'interface web de Vercel.
Je veux réviser mon code UI. Utilisez web-design-guidelines et demandez-moi quels fichiers réviser.
Bonnes pratiques
- Spécifiez les chemins de fichiers exacts ou les motifs glob pour concentrer la révision sur les fichiers pertinents
- Révisez les résultats au format fichier:ligne et corrigez les problèmes par ordre de sévérité
- Récupérez les directives fraîches avant chaque révision pour obtenir les dernières règles
Éviter
- Exécuter la compétence sans spécifier quels fichiers réviser
- Ignorer les résultats d'accessibilité - ils affectent les utilisateurs handicapés
- Supposer que la compétence détecte tous les problèmes - c'est un помощник, pas un remplacement pour les tests manuels