majiayu000/claude-skill-registry

Examiner le code UI pour vérifier sa conformité aux directives d'interface web. À utiliser lorsque l'utilisateur demande « revoir mon UI », « vérifier l'accessibilité », « auditer le design », « revoir l'UX » ou « vérifier mon site par rapport aux bonnes pratiques ».

Qu'est-ce que claude-skill-registry ?

Cette compétence, basée sur le référentiel Web Interface Guidelines, permet d'auditer automatiquement vos fichiers d'interface utilisateur (HTML, CSS, JS, etc.) par rapport à un ensemble de règles actualisées. Elle récupère dynamiquement les dernières directives depuis un fichier Markdown distant, puis lit les fichiers spécifiés par l'utilisateur (ou demande une sélection si aucun fichier n'est fourni). Pour chaque règle extraite, la compétence vérifie leur application et produit un rapport au format `fichier:ligne`, concis et orienté développeur. L'outil est idéal pour les phases post-développement : après avoir conçu et implémenté une interface, vous pouvez exécuter cette compétence en une commande pour détecter les problèmes d'accessibilité, de performance et de non-respect des bonnes pratiques. Elle s'intègre naturellement dans un workflow de design en quatre étapes : DESIGN → CODE → AUDIT → FIX, où elle constitue la phase d'audit. Compatible avec tout assistant capable d'exécuter des tâches de lecture de fichiers et de récupération Web (comme Claude Code, Cursor, etc.), elle ne nécessite aucune dépendance externe autre que la capacité à effectuer une requête HTTP GET et à lire le système de fichiers local.

Compatible avec✓Claude Code~Codex CLI~Cursor

npx skills add https://github.com/majiayu000/claude-skill-registry/tree/HEAD/skills/design/web-design-guidelines-dgkngk-super-kit

Documentation

Directives d'interface Web

Examiner les fichiers pour vérifier leur conformité aux directives d'interface Web.

Fonctionnement

Récupérer les dernières directives depuis l'URL source ci-dessous
Lire les fichiers spécifiés (ou demander à l'utilisateur de fournir des fichiers / un motif)
Vérifier chaque règle contenue dans les directives récupérées
Produire les résultats au format concis fichier:ligne

Source des directives

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

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 argument fichier ou motif :

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

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 le codage - Apprendre les principes de design (couleur, typographie, psychologie UX)
web-design-guidelines (cette compétence)	Après le codage - Auditer l'accessibilité, les performances et les bonnes pratiques

Workflow de design

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