AI-Friendly Web Design
Revisiona o costruisce UI con una checklist classificata per severità per HTML semantico, ARIA, locator stabili e trappole hover/popup.
Promosso
Cosa fa
Fornisce cinque modalità di compito (design, implement, review, refactor, generate tests) più un modello di severità fissa Alto/Medio/Basso per catturare blocchi di operabilità come div-as-button, menu solo hover e input senza etichetta, e raccomanda locator Playwright role/label/text-first rispetto ai selettori CSS. Si attiva su lavori di componenti UI, revisioni di accessibilità, decisioni HTML/ARIA semantiche e authoring di test Playwright.
Rapporto di test
Ho revisionato un frammento di modulo di login deliberatamente rotto (pulsanti div, input solo placeholder, menu di aiuto solo hover): la revisione guidata dalla skill ha correttamente segnalato il menu solo hover come severità Alta secondo i suoi non-negoziabili e ha prodotto una tabella di severità con correzioni Playwright getByRole/getByLabel, dove la revisione di base diceva solo 'add labels' senza classificazione.
Testato il: 2026-07-14 · Claude Code 2.x (agent harness)
Installazione
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
Comandi e prompt di esempio
/ai-friendly-web-designRevisiona o costruisce UI con una checklist classificata per severità per HTML semantico, ARIA, locator stabili e trappole hover/popup.
Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):
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.