AI-Friendly Web Design
Examine ou construit des UI avec une liste de contrôle classée par gravité pour le HTML sémantique, ARIA, les localisateurs stables et les pièges de survol/popup.
Testé · Fonctionne
Ce que fait
Fournit cinq modes de tâche (design, implémentation, révision, refactoring, génération de tests) plus un modèle de gravité fixe Élevée/Moyenne/Faible pour détecter les bloqueurs d'opérabilité comme div-as-button, les menus uniquement au survol et les entrées non étiquetées, et recommande les localisateurs Playwright role/label/text-first plutôt que les sélecteurs CSS. Se déclenche sur le travail de composants UI, les revues d'accessibilité, les décisions HTML sémantique/ARIA et la création de tests Playwright.
Rapport de test
J'ai examiné un extrait de formulaire de connexion délibérément cassé (boutons div, entrées uniquement avec placeholder, menu d'aide uniquement au survol) : la revue guidée par la compétence a correctement signalé le menu uniquement au survol comme étant de gravité Élevée selon ses propres non-négociables et a produit un tableau de gravité avec des corrections Playwright getByRole/getByLabel, là où la revue de base disait simplement 'ajouter des étiquettes' sans classement.
Testé le: 2026-07-14 · Claude Code 2.x (agent harness)
Installation
git clone https://github.com/ianho7/ai-friendly-web-design-skill cd ai-friendly-web-design-skill mkdir -p ~/.claude/skills cp -r skills/ai-friendly-web-design ~/.claude/skills/ai-friendly-web-design
Commandes et exemples de prompts
/ai-friendly-web-designExamine ou construit des UI avec une liste de contrôle classée par gravité pour le HTML sémantique, ARIA, les localisateurs stables et les pièges de survol/popup.
Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :
Review this login form for accessibility issues.Write Playwright tests for checkout using stable locators.I'm designing a new settings page, help with the UI contract.