diegosouzapw/awesome-omni-skill

Vérifier le code d'interface utilisateur pour la conformité aux Directives Web. À utiliser quand on vous demande « vérifier mon UI », « contrôler l'accessibilité », « auditer le design », « vérifier l'UX » ou « contrôler mon site par rapport aux bonnes pratiques ».

Qu'est-ce que awesome-omni-skill ?

Cette compétence (skill) permet d'auditer le code d'interface utilisateur (UI) d'une application web par rapport aux Directives Web officielles, en se concentrant sur l'accessibilité, les performances et les bonnes pratiques générales. L'utilisateur peut fournir un ou plusieurs fichiers ou motifs de fichiers, et la compétence applique automatiquement l'ensemble des règles extraites d'une source distante (le dépôt Vercel Labs). Le résultat est présenté sous un format concis `fichier:ligne`, facilitant l'identification et la correction des problèmes. Cette compétence fonctionne avec n'importe quel éditeur ou agent prenant en charge les skills (Claude Code, Cursor, Codex, etc.) et exploite la capacité de récupération web pour garantir l'utilisation des règles les plus récentes.

Compatible avec✓Claude Code~Codex CLI~Cursor

npx skills add https://github.com/diegosouzapw/awesome-omni-skill/tree/HEAD/skills/development/web-design-guidelines-gensart-projs

Documentation

Directives Web Interface

Vérifier les fichiers pour la conformité aux Directives Web Interface.

Fonctionnement

Récupérer les dernières directives depuis l'URL source ci-dessous
Lire les fichiers spécifiés (ou demander à l'utilisateur les fichiers / motif à utiliser)
Vérifier toutes les règles des directives récupérées
Afficher les résultats au format concis fichier:ligne

Source des directives

Récupérer les directives fraîches avant chaque vérification :

https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md

Utiliser WebFetch pour récupérer les dernières règles. Le contenu récupéré contient toutes les règles et les instructions de format de sortie.

Utilisation

Lorsqu'un utilisateur fournit un fichier ou un motif d'argument :

Récupérer les directives depuis l'URL source ci-dessus
Lire les fichiers spécifiés
Appliquer toutes les règles des directives récupérées
Afficher les résultats en utilisant le format spécifié dans les directives

Si aucun fichier n'est spécifié, demander à l'utilisateur quels fichiers vérifier.

Compétences connexes

Compétence	Quand l'utiliser
frontend-design	Avant le codage - Apprendre les principes de conception (couleur, typographie, psychologie UX)
web-design-guidelines (ceci)	Après le codage - Auditer l'accessibilité, les performances et les bonnes pratiques

Flux de travail de conception

1. DESIGN   → Lire les principes frontend-design
2. CODE     → Implémenter le design
3. AUDIT    → Lancer la vérification web-design-guidelines ← VOUS ÊTES ICI
4. CORRECTION → Traiter les résultats de l'audit