react-ui-patterns

Skill zawiera sprawdzone wzorce React dla nowoczesnych interfejsów użytkownika. Nauczysz się, kiedy pokazywać wskaźniki ładowania, jak obsługiwać błędy z opcją ponowienia, oraz jak implementować optymistyczne aktualizacje. Materiał obejmuje decyzyjne drzewa wyboru stanu, porównanie szkieletów i spinnerów, oraz hierarchię obsługi błędów — od walidacji pól po powiadomienia toast. Idealny, gdy budujesz komponenty z asynchronicznym pobieraniem danych i chcesz uniknąć błędów UX takich jak mrugające loadery czy ukryte komunikaty o błędach.

1. Zainstaluj skill react-ui-patterns w swoim środowisku Claude, dodając go do katalogu skills. 2. Otwórz projekt React, w którym chcesz zastosować wzorce — przygotuj komponent z zapytaniem do API lub hook'iem pobierającym dane. 3. Zapoznaj się z główną zasadą: pokazuj wskaźnik ładowania tylko wtedy, gdy nie masz żadnych danych do wyświetlenia. Unikaj migotania loadera na danych z cache'u. 4. Zastosuj decyzyjne drzewo wyboru stanu — najpierw sprawdź błąd, potem czy ładujesz bez danych, następnie czy masz dane, a na koniec czy lista jest pusta. 5. Wybierz odpowiedni typ wskaźnika: użyj szkieletu dla znanych kształtów treści (listy, karty, ładowanie strony), a spinnera dla nieznanego kształtu (modalne akcje, wysyłanie formularza). 6. Wdrażaj obsługę błędów warstwowo — błędy pól w formularzu, powiadomienia toast dla błędów odwracalnych, a komunikaty błędów dla krytycznych problemów.