web-design-guidelines

Par elophanto · elophanto

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

npx skills add https://github.com/elophanto/elophanto --skill web-design-guidelines

Directives Interface Web

Vérifiez la conformité des fichiers avec les Directives Interface Web.

Déclencheurs

  • web design review
  • ui review
  • web interface
  • design review
  • web guidelines
  • vercel guidelines
  • check my ui
  • review my site
  • design compliance

Fonctionnement

  1. Récupérez les dernières directives à partir de l'URL source ci-dessous
  2. Lisez les fichiers spécifiés (ou demandez à l'utilisateur les fichiers/motif)
  3. Vérifiez par rapport à toutes les règles des directives récupérées
  4. Affichez les résultats au format concis file:line

Source des Directives

Récupérez les directives à jour avant chaque examen :

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

Utilisez 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

Quand un utilisateur fournit un argument fichier ou motif :

  1. Récupérez les directives à partir de l'URL source ci-dessus
  2. Lisez les fichiers spécifiés
  3. Appliquez toutes les règles des directives récupérées
  4. Affichez 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.

Vérifier

  • La modification a été rendue dans un navigateur/simulateur et une capture d'écran ou un snapshot DOM a été capturé, pas seulement examiné par le code
  • La mise en page a été vérifiée aux points de rupture que le guide web-design-guidelines appelle (mobile + desktop minimum) ; la preuve de chacun est jointe
  • Les valeurs de couleur, typographie et espacement utilisées proviennent des tokens de conception / thème du projet, non des valeurs codées en dur ad-hoc
  • La navigation au clavier et l'ordre de focus ont été testés sur chaque élément interactif introduit
  • Les variantes reduced-motion / dark-mode (si supportées) ont été vérifiées, pas supposées héritées
  • Aucune erreur console ou avertissement d'hydratation n'a été émis lors du rendu de vérification

Skills similaires