AI-Friendly Web Design

Granskar eller bygger UI med en allvarlighetsrankad checklista för semantisk HTML, ARIA, stabila lokalisatorer och hover/popup-fällor.

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

Testad · Fungerar ★ 9.6/10

Vad den gör

Tillhandahåller fem uppgiftslägen (design, implementera, granska, refaktorera, generera tester) plus en fast High/Medium/Low allvarlighetsmodell för att fånga operabilitetsblockerare som div-as-button, endast-hover-menyer och oetiketterade inmatningar, och rekommenderar roll/label/text-först Playwright-lokalisatorer över CSS-selektorer. Utlöses vid UI-komponentarbete, tillgänglighetsgranskningar, semantiska HTML/ARIA-beslut och Playwright-testförfattande.

Testrapport

Granskade ett avsiktligt trasigt inloggningsformulär-snippet (div-knappar, endast-platshållare-inmatningar, endast-hover-hjälpmeny): skill-styrd granskning flaggade korrekt endast-hover-menyn som High allvarlighetsgrad enligt dess egna icke-förhandlingsbara krav och producerade en allvarlighetstabell med Playwright getByRole/getByLabel-fixar, där baslinjegranskningen bara sa 'add labels' utan rangordning.

Testad: 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

Kommandon och exempelprompter

/ai-friendly-web-designGranskar eller bygger UI med en allvarlighetsrankad checklista för semantisk HTML, ARIA, stabila lokalisatorer och hover/popup-fällor.

Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):

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.

Läs hela rapporten →