web-design-guidelines (Vercel)
Skill : Une méthode réutilisable : instructions, procédures, parfois scripts ou modèles · nécessite claude-code
Audite votre code d'interface contre plus de cent règles de Vercel (accessibilité, formulaires, animations, images) et sort les écarts fichier par fichier.
Excellent relecteur UI après génération. Il télécharge ses règles à chaque exécution depuis un dépôt Vercel, d'où la pastille orange.
La sécurité reflète la destination des données, les permissions demandées et les incidents recensés à la date de vérification. Ce n’est pas une garantie d’absence de risque : vérifiez le mode de déploiement et les connexions que vous activez.
Ce que ça fait, concrètement
Quand on génère du code d'interface avec un agent IA, il est difficile de savoir si le résultat respecte les bonnes pratiques du web : accessibilité, gestion du focus, formulaires, animations, typographie, images, performance, internationalisation. web-design-guidelines comble ce manque en auditant automatiquement le code produit contre plus de cent règles.
Concrètement, le skill s'installe dans claude-code et s'active sur des phrases comme « Review my UI » ou « Check accessibility ». Il lit les fichiers d'interface du projet, télécharge à chaque exécution les règles de référence depuis le dépôt Vercel sur GitHub, puis restitue les écarts détectés fichier par fichier, classés par catégorie.
Il s'adresse aux développeurs web qui utilisent déjà claude-code et veulent un filet de sécurité qualité après une phase de génération de code. Il couvre onze catégories : accessibilité, états de focus, formulaires, animations, typographie, images, performance, navigation et état, mode sombre, interactions tactiles, et internationalisation.
Il ne convient pas à ceux qui cherchent un outil de test automatisé intégré à une pipeline CI/CD, ni à ceux qui n'utilisent pas claude-code comme environnement de développement.
Ce que ça propose
- ·Audit de l'accessibilité : vérifie les aria-labels, le HTML sémantique et les gestionnaires clavier.
- ·Contrôle des états de focus : détecte les patterns focus-visible manquants ou incorrects.
- ·Vérification des formulaires : contrôle l'autocomplete, la validation et la gestion des erreurs.
- ·Analyse des animations : repère l'absence de prise en charge de prefers-reduced-motion et les transformations non optimisées pour le compositeur.
- ·Audit des images : vérifie les dimensions, le chargement différé et les textes alternatifs.
- ·Contrôle de la typographie : détecte les guillemets droits, les points de suspension incorrects et l'absence de tabular-nums.
- ·Vérification de l'internationalisation : contrôle l'usage de Intl.DateTimeFormat et Intl.NumberFormat.
- ·Rapport fichier par fichier : restitue les écarts classés par catégorie pour chaque fichier audité.
En pratique
- Prix
- GratuitGratuit (MIT).
- Usage commercial
- Usage commercial : oui
- Disponible sur
- GitHub vercel-labs/agent-skills, skills.sh
- Hôte
- claude-code
- Licence
- MIT
- Autres hôtes
- claude-code, cursor, codex, opencode, gemini-cli
- Interface FR
- Non
Sécurité et données
- Pastille
- Sécu : une réserve, lire la fiche
- Vos données
- Données en local
- Permissions
- Lit vos fichiers d'interface et récupère à chaque audit des instructions distantes (raw.githubusercontent.com/vercel-labs) : leur contenu peut changer sans que vous le voyiez.
- Maintenance
- Active
- Dernière release
- 27 octobre 2026
Liens et dépôt vérifiés le 8 novembre 2026 · ajoutée le 23 septembre 2026
Comment installer web-design-guidelines (Vercel)
npx skills add vercel-labs/agent-skills