AI-Friendly Web Design
Recenzuje nebo vytváří UI s kontrolním seznamem seřazeným podle závažnosti pro sémantické HTML, ARIA, stabilní lokátory a hover/popup pasti.
Otestováno · Funguje
Co umí
Poskytuje pět režimů úkolů (design, implement, review, refactor, generate tests) plus pevný model závažnosti High/Medium/Low pro zachycení blokátorů operability, jako jsou div-as-button, menu pouze při najetí myší a neoznačené vstupy, a doporučuje Playwright lokátory role/label/text-first před CSS selektory. Spouští se na práci s UI komponentami, recenze přístupnosti, rozhodnutí o sémantickém HTML/ARIA a tvorbu Playwright testů.
Testovací report
Zkontroloval jsem záměrně rozbitý úryvek přihlašovacího formuláře (div tlačítka, vstupy pouze s placeholderem, menu pouze při najetí myší): recenze řízená dovedností správně označila menu pouze při najetí myší jako vysokou závažnost podle jejích vlastních nekompromisních pravidel a vytvořila tabulku závažnosti s opravami Playwright getByRole/getByLabel, kde základní recenze pouze řekla 'add labels' bez hodnocení.
Testováno: 2026-07-14 · Claude Code 2.x (agent harness)
Instalace
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
Příkazy a ukázkové prompty
/ai-friendly-web-designRecenzuje nebo vytváří UI s kontrolním seznamem seřazeným podle závažnosti pro sémantické HTML, ARIA, stabilní lokátory a hover/popup pasti.
Skilly se spouštějí běžnými požadavky — žádné příkazy k zapamatování. Po instalaci ho aktivují prompty jako tyto (anglicky):
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.