ui-mobile

Umiejętność projektowania interfejsów mobilnych zgodnie z wytycznymi dostępności WCAG 2.1. Zawiera obowiązkowe reguły dla React Native: minimalne rozmiary przycisków (44×44 punkty), wymagane współczynniki kontrastu tekstu (4,5:1), oraz zasady widoczności elementów interaktywnych. Naucz się budować aplikacje na iOS i Android, które są użyteczne dla wszystkich użytkowników, bez kompromisów na dostępności.

1. Załaduj umiejętność wraz z plikami base.md i react-native.md w swoim projekcie Claude. 2. Zapoznaj się z trzema obowiązkowym standardami: touch targety muszą mieć minimum 44×44 punkty dla każdego elementu interaktywnego (przyciski, ikony, linki), kontrast tekstu musi wynosić co najmniej 4,5:1 dla tekstu zwykłego i 3:1 dla tekstu dużego zgodnie z WCAG 2.1 AA, wszystkie przyciski muszą mieć widoczne granice – używaj solidnych tła z kontrastowym tekstem. 3. Podczas projektowania komponentów React Native stosuj podane rozmiary paddingu i wysokości: paddingVertical 12–16 punktów, paddingHorizontal 16–24 punkty, minHeight i minWidth 44 punkty dla przycisków. 4. Sprawdzaj kombinacje kolorów przed wdrożeniem – czarny tekst (#000000) na białym tle daje kontrast 21:1, szary-700 (#374151) na białym daje 9,2:1, białe (#FFFFFF) na szarym-900 daje 16:1. Unikaj szarych odcieni poniżej 4,5:1. 5. Testuj każdy element interaktywny na rzeczywistych urządzeniach iOS i Android, aby potwierdzić, że touch targety są łatwe do dotknięcia i że kontrast jest wystarczający w różnych warunkach oświetlenia.