diegosouzapw/awesome-omni-skill

Examiner le code de l'interface utilisateur pour vérifier la conformité aux directives de l'interface Web. À utiliser lorsqu'on vous demande de « réviser mon UI », « vérifier l'accessibilité », « auditer le design », « réviser l'UX » ou « vérifier mon site par rapport aux meilleures pratiques ».

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

Cette compétence est conçue pour auditer automatiquement le code front-end d'une application web, en le comparant aux directives de l'interface Web de Vercel, actualisées à chaque exécution. L'agent récupère d'abord la dernière version des règles de qualité via une URL source, puis lit les fichiers spécifiés par l'utilisateur et applique l'ensemble des règles de conformité. Au-delà des vérifications standards d'accessibilité et de performance, la compétence inclut une couche d'audit spécifique au secteur de la santé : elle vérifie la présence de PHI (informations médicales protégées), la visibilité des coordonnées d'urgence avec fonction « tap-to-call », et la mise en avant des diplômes et numéros de licence des médecins. Elle applique également des normes de design médical strictes : contraste du bleu primaire (#2d54ff), lisibilité de l'or de confiance (#d4a574) sur fond marine, et taille minimale des cibles tactiles de 48x48px pour les personnes âgées. La compétence s'intègre naturellement dans un flux de travail de conception en quatre étapes : Design, Code, Audit, Correction.

Compatible avec✓Claude Code~Codex CLI~Cursor

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

Documentation

Directives de l'interface Web

Examiner les fichiers pour vérifier la conformité aux directives de l'interface Web.

Comment ça fonctionne

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/le motif)
Vérifier toutes les règles des directives récupérées
Afficher les résultats dans le format concis fichier:ligne
Couche d'audit santé : Effectuer un second passage pour la conformité HIPAA/ADA, notamment :
- Vérification de la confidentialité des patients (contrôle PHI).
- Accessibilité des contacts d'urgence (appel direct par tap).
- Mise en évidence des diplômes et du numéro de licence des médecins.

Source des directives

Récupérer les directives fraîches avant chaque révision :

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 comme 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
Appliquer les normes de conception médicale :
- Vérification du contraste du bleu primaire (#2d54ff).
- Lisibilité de l'or de confiance (#d4a574) sur fond marine.
- Les cibles tactiles mobiles doivent avoir une taille minimale de 48x48px pour faciliter l'utilisation par les personnes âgées.

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

Compétences associées

Compétence	Quand l'utiliser
frontend-design	Avant de coder - Apprendre les principes de conception (couleur, typographie, psychologie UX)
web-design-guidelines (celle-ci)	Après avoir codé - Auditer l'accessibilité, les performances et les meilleures pratiques

Flux de travail de conception

1. DESIGN   → Lire les principes frontend-design
2. CODE     → Implémenter le design
3. AUDIT    → Exécuter la révision web-design-guidelines ← VOUS ÊTES ICI
4. FIX      → Corriger les résultats de l'audit