AI-Friendly Web Design

Reviewt of bouwt UI met een op ernst gerangschikte checklist voor semantische HTML, ARIA, stabiele locators en hover/popup traps.

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

Getest · Werkt ★ 9.6/10

Wat het doet

Biedt vijf taakmodi (design, implement, review, refactor, generate tests) plus een vast High/Medium/Low ernstmodel voor het opvangen van operabiliteitsblokkades zoals div-as-button, hover-only menu's en ongelabelde inputs, en beveelt role/label/text-first Playwright locators aan boven CSS selectors. Activeert bij UI component werk, toegankelijkheidsreviews, semantische HTML/ARIA beslissingen, en Playwright test authoring.

Testrapport

Reviewde een opzettelijk gebroken login-formulier snippet (div buttons, placeholder-only inputs, hover-only help menu): skill-geleide review markeerde correct het hover-only menu als High severity volgens zijn eigen non-negotiables en produceerde een ernsttabel met Playwright getByRole/getByLabel fixes, waar de baseline review alleen 'add labels' zei zonder rangschikking.

Getest op: 2026-07-14 · Claude Code 2.x (agent harness)

Installatie

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

Commando's en voorbeeldprompts

/ai-friendly-web-designReviewt of bouwt UI met een op ernst gerangschikte checklist voor semantische HTML, ARIA, stabiele locators en hover/popup traps.

Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):

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.

Volledig rapport (Engels) →