U
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Visual testing - catch invisible buttons, broken layouts, contrast
How to use
- Załaduj umiejętność razem z ui-web.md lub ui-mobile.md, w zależności od tego, czy testujesz interfejs webowy czy mobilny. 2. Po utworzeniu nowego komponentu UI otwórz listę kontrolną z umiejętności i przejdź przez każdą sekcję: widoczność przycisków, rozmiary obszarów kliknięcia (minimum 44px), stany interakcji (hover, focus, disabled, loading) oraz tryb ciemny, jeśli dotyczy. 3. Aby sprawdzić kontrast tekstu, kliknij prawym przyciskiem myszy na element w przeglądarce, wybierz Inspect, przejdź do panelu Styles i kliknij wartość koloru – poszukaj wskaźnika współczynnika kontrastu (musi być ✓ dla AA, czyli 4.5:1 dla tekstu). 4. Jeśli pracujesz z Tailwind, skorzystaj z gotowych kombinacji kolorów z umiejętności (np. text-gray-900 na białym tle = 16:1, text-gray-400 = FAIL). 5. W razie wątpliwości użyj zewnętrznych narzędzi: WebAIM Contrast Checker lub Coolors Contrast Checker, aby zweryfikować współczynnik kontrastu. 6. Zaznacz wszystkie pozycje na liście kontrolnej przed wysłaniem UI do produkcji.