AI-Friendly Web Design

Gjennomgår eller bygger UI med en alvorlighetsgrad-rangert sjekkliste for semantisk HTML, ARIA, stabile lokatorer, og hover/popup-feller.

av ianho7 · ianho7/ai-friendly-web-design-skill

Bestått ★ 9.6/10

Hva den gjør

Tilbyr fem oppgavemoduser (design, implementer, gjennomgå, refaktor, generer tester) pluss en fast High/Medium/Low alvorlighetsgradsmodell for å fange opp operabilitetsblokkere som div-as-button, kun-hover-menyer og umerkede inndata, og anbefaler rolle/etikett/tekst-først Playwright-lokatorer over CSS-selektorer. Utløses på UI-komponentarbeid, tilgjengelighetsgjennomganger, semantiske HTML/ARIA-beslutninger og Playwright-testforfatting.

Testrapport

Gjennomgikk et bevisst ødelagt innloggingsskjema-utdrag (div-knapper, kun-plassholder-inndata, kun-hover-hjelpemeny): ferdighetsstyrt gjennomgang flagget korrekt kun-hover-menyen som High alvorlighetsgrad per dens egne ikke-forhandlingsbare punkter og produserte en alvorlighetsgradstabell med Playwright getByRole/getByLabel-fikser, der baseline-gjennomgangen bare sa 'add labels' uten rangering.

Testet på: 2026-07-14 · Claude Code 2.x (agent harness)

Installer

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-designGjennomgår eller bygger UI med en alvorlighetsgrad-rangert sjekkliste for semantisk HTML, ARIA, stabile lokatorer, og hover/popup-feller.

Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen 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.

Full rapport →