AI-Friendly Web Design
Gennemgår eller bygger UI med en alvorligheds-rangeret tjekliste for semantisk HTML, ARIA, stabile lokatorer og hover/popup-fælder.
Testet · Virker
Hvad det gør
Tilbyder fem opgavetilstande (design, implement, review, refactor, generate tests) plus en fast High/Medium/Low alvorlighedsmodel til at fange operabilitetsblokkere som div-as-button, kun-hover-menuer og ulabeled inputs, og anbefaler role/label/text-first Playwright-lokatorer frem for CSS-selektorer. Udløses ved UI-komponentarbejde, tilgængelighedsgennemgange, semantiske HTML/ARIA-beslutninger og Playwright-testforfatning.
Testrapport
Gennemgik et bevidst ødelagt login-formular-snippet (div-knapper, placeholder-only inputs, kun-hover-hjælpemenu): skill-guidet gennemgang markerede korrekt kun-hover-menuen som High severity i henhold til dens egne ikke-forhandlingsbare punkter og producerede en alvorlighedstabel med Playwright getByRole/getByLabel-rettelser, hvor baseline-gennemgangen blot sagde 'add labels' uden rangering.
Testet: 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
Kommandoer og eksempelprompter
/ai-friendly-web-designGennemgår eller bygger UI med en alvorligheds-rangeret tjekliste for semantisk HTML, ARIA, stabile lokatorer og hover/popup-fælder.
Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen aktiverer prompter som disse skillen (på engelsk):
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.