Infrasity-Labs/dev-gtm-claude-skills

Examine le code d'interface utilisateur pour vérifier sa conformité avec les directives Web. À utiliser lorsque l'on vous demande « examiner 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 dev-gtm-claude-skills ?

Cette compétence automatisée d'audit d'interface utilisateur permet aux développeurs et aux agents IA de vérifier la conformité du code UI avec les directives Web. Elle récupère les dernières règles depuis une source mise à jour, lit les fichiers spécifiés par l'utilisateur (ou lui demande lesquels analyser), puis applique toutes les règles pour identifier les problèmes d'accessibilité, d'UX, de navigation, de performance et d'animation. Les résultats sont présentés dans un format concis `fichier:ligne`, facilitant le repérage rapide des corrections. La compétence s'intègre également avec `ui-ux-pro-max` pour obtenir des conseils de remédiation approfondis par catégorie. Supportée sur les plateformes comme Claude Code, Cursor et Codex, elle est idéale pour être invoquée avec des commandes telles que « vérifie mon UI » ou « audite mon design ».

Compatible avec✓Claude Code~Codex CLI~Cursor

npx skills add https://github.com/Infrasity-Labs/dev-gtm-claude-skills/tree/HEAD/.claude/skills/web-design-guidelines

Documentation

Directives d'Interface Web

Examine les fichiers pour vérifier leur conformité avec les Directives d'Interface Web.

Fonctionnement

Récupère les dernières directives depuis l'URL source ci-dessous
Lit les fichiers spécifiés (ou demande à l'utilisateur les fichiers/modèles)
Vérifie toutes les règles des directives récupérées
Affiche les résultats au format concis fichier:ligne

Source des Directives

Récupère les directives récentes avant chaque examen :

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

Utilise WebFetch pour obtenir 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 modèle en argument :

Récupère les directives depuis l'URL source ci-dessus
Lit les fichiers spécifiés
Applique toutes les règles des directives récupérées
Affiche les résultats en utilisant le format spécifié dans les directives

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

Correction des Problèmes

Après avoir identifié des problèmes, utilise ui-ux-pro-max pour obtenir des conseils de remédiation approfondis par catégorie :

# Problèmes d'accessibilité
python3 skills/ui-ux-pro-max/scripts/search.py "accessibility contrast aria keyboard" --domain ux

# Problèmes d'UX de formulaires
python3 skills/ui-ux-pro-max/scripts/search.py "forms validation error feedback" --domain ux

# Problèmes d'animation / mouvement
python3 skills/ui-ux-pro-max/scripts/search.py "animation reduced-motion timing" --domain ux

# Problèmes de navigation
python3 skills/ui-ux-pro-max/scripts/search.py "navigation breadcrumb back behavior" --domain ux

# Problèmes de performance / mise en page
python3 skills/ui-ux-pro-max/scripts/search.py "layout shift lazy loading performance" --domain ux

Fais correspondre les résultats de l'audit au mot-clé de domaine le plus proche ci-dessus. La Référence Rapide ui-ux-pro-max (sections 1–9) couvre toutes les catégories que le vérificateur de directives identifie.

Compétences Associées

ui-ux-pro-max : Conseils UX approfondis et règles de remédiation pour chaque catégorie de résultat
frontend-design : Direction et planification du design avant l'écriture du code
ui-styling : Implémentation des composants — shadcn/ui et Tailwind — là où les corrections nécessitent des modifications au niveau des composants