diegosouzapw/awesome-omni-skill

Examiner le code d'interface utilisateur pour vérifier la conformité avec les directives d'interface Web. À utiliser lorsqu'on demande de « revoir mon UI », « vérifier l'accessibilité », « auditer le design », « examiner l'UX » ou « vérifier mon site par rapport aux bonnes pratiques ».

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

Cette compétence permet à un agent IA d'auditer des fichiers d'interface utilisateur (HTML, CSS, JavaScript, etc.) par rapport aux dernières Directives d'Interface Web. Elle est conçue pour les agents de codage comme Claude Code, Cursor ou Codex et fournit un processus d'audit structuré, automatisant la vérification de l'accessibilité, des performances et des bonnes pratiques après le développement. La compétence charge d'abord les directives via Context7, Tavily, BraveSearch ou Serper.dev (en dernier recours une recherche Web standard), puis lit les fichiers spécifiés, applique toutes les règles des directives et produit des résultats au format concis `fichier:ligne`. Un workflow de conception est inclus, positionnant cet audit comme la troisième étape après le design et le développement, et avant la correction des problèmes.

Compatible avec✓Claude Code~Codex CLI~Cursor

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

Documentation

Directives d'Interface Web

💡 Outil MCP disponible : Utilisez d'abord Context7, Tavily, BraveSearch ou Serper.dev ; ce n'est qu'en cas d'échec que vous devez utiliser WebSearch ou WebFetch si nécessaire.

Examiner les fichiers pour vérifier la conformité avec les Directives d'Interface Web.

Comment ça fonctionne

Utilisez Context7, Tavily, BraveSearch ou Serper.dev pour charger les dernières Directives d'Interface Web si nécessaire ; ce n'est qu'en cas d'échec que vous devez utiliser WebSearch ou WebFetch si nécessaire.
Lisez les fichiers spécifiés (ou demandez à l'utilisateur les fichiers/le motif)
Vérifiez toutes les règles des directives
Produisez les résultats au format concis fichier:ligne

Source des directives

Utilisez Context7, Tavily, BraveSearch ou Serper.dev pour interroger la documentation des Directives d'Interface Web ; ce n'est qu'en cas d'échec que vous devez utiliser WebSearch ou WebFetch si nécessaire. Les directives contiennent toutes les règles et les instructions de format de sortie.

Utilisation

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

Utilisez Context7, Tavily, BraveSearch ou Serper.dev (ou la documentation dans l'IDE) pour charger les directives pertinentes ; ce n'est qu'en cas d'échec que vous devez utiliser WebSearch ou WebFetch si nécessaire
Lisez les fichiers spécifiés
Appliquez toutes les règles des directives
Produisez les résultats en utilisant le format spécifié dans les directives

Si aucun fichier n'est spécifié, demandez à l'utilisateur quels fichiers examiner.

Compétences connexes

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

Workflow de design

1. DESIGN   → Lire les principes de frontend-design
2. CODE     → Implémenter le design
3. AUDIT    → Exécuter la revue web-design-guidelines ← VOUS ÊTES ICI
4. FIX      → Corriger les problèmes identifiés par l'audit