AI-Friendly Web Design
Przegląda lub buduje UI z listą kontrolną rankingową według ważności dla semantycznego HTML, ARIA, stabilnych lokatorów i pułapek hover/popup.
Testowano · Działa
Co robi ten skill
Zapewnia pięć trybów zadań (design, implement, review, refactor, generate tests) plus stały model ważności High/Medium/Low do wychwytywania blokad operacyjnych, takich jak div-as-button, menu tylko po najechaniu myszką i nieoznaczone pola wejściowe, oraz zaleca lokatory Playwright oparte na roli/etykiecie/tekście zamiast selektorów CSS. Uruchamia się na pracach nad komponentami UI, przeglądach dostępności, decyzjach dotyczących semantycznego HTML/ARIA i tworzeniu testów Playwright.
Raport z testu
Przeglądnięto celowo uszkodzony fragment formularza logowania (przyciski div, pola wejściowe tylko z placeholderem, menu pomocy tylko po najechaniu myszką): przegląd kierowany umiejętnością poprawnie oznaczył menu tylko po najechaniu myszką jako High severity zgodnie z własnymi niezbywalnymi zasadami i wygenerował tabelę ważności z poprawkami Playwright getByRole/getByLabel, gdzie bazowy przegląd po prostu stwierdził 'add labels' bez rankingu.
Testowano: 2026-07-14 · Claude Code 2.x (agent harness)
Instalacja
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
Komendy i przykładowe prompty
/ai-friendly-web-designPrzegląda lub buduje UI z listą kontrolną rankingową według ważności dla semantycznego HTML, ARIA, stabilnych lokatorów i pułapek hover/popup.
Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):
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.