AI-Friendly Web Design
Überprüft oder erstellt UI mit einer nach Schweregrad geordneten Checkliste für semantisches HTML, ARIA, stabile Locators und Hover-/Popup-Fallen.
Getestet · Funktioniert
Was es kann
Bietet fünf Aufgabenmodi (design, implement, review, refactor, generate tests) plus ein festes High/Medium/Low-Schweregradmodell zum Erkennen von Bedienbarkeitsblockern wie div-as-button, Hover-only-Menüs und unbeschrifteten Eingaben und empfiehlt role/label/text-first Playwright-Locators gegenüber CSS-Selektoren. Wird ausgelöst bei UI-Komponentenarbeit, Barrierefreiheitsprüfungen, semantischen HTML/ARIA-Entscheidungen und Playwright-Test-Authoring.
Testbericht
Ein bewusst fehlerhafter Login-Formular-Snippet wurde überprüft (div buttons, placeholder-only inputs, hover-only help menu): Die Skill-geführte Überprüfung markierte das Hover-only-Menü korrekt als High severity gemäß seinen eigenen Nicht-Verhandelbaren und erzeugte eine Schweregradtabelle mit Playwright getByRole/getByLabel-Korrekturen, während die Baseline-Überprüfung nur 'add labels' ohne Ranking sagte.
Getestet am: 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
Befehle & Beispiel-Prompts
/ai-friendly-web-designÜberprüft oder erstellt UI mit einer nach Schweregrad geordneten Checkliste für semantisches HTML, ARIA, stabile Locators und Hover-/Popup-Fallen.
Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):
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.