react-skills

React 18 patterns for LlamaFarm Designer. Covers components, hooks, TanStack Query, and testing.

1. Zainstaluj umiejętność w swoim projekcie LlamaFarm, dodając react-skills do konfiguracji Claude. Umiejętność jest dostępna tylko dla systemu Claude (user-invocable: false), więc będzie automatycznie dostępna w kontekście Designer.
2. Zapoznaj się ze strukturą katalogów projektu: api/ dla funkcji serwisowych, components/ dla komponentów zorganizowanych po funkcjach, hooks/ dla niestandardowych hooków, lib/ dla narzędzi pomocniczych (np. cn do łączenia klas Tailwind), types/ dla definicji TypeScript i test/ dla narzędzi testowych.
3. Stosuj wzorce komponowania: preferuj małe, skoncentrowane komponenty zamiast dziedziczenia, używaj forwardRef dla komponentów opakowujących elementy DOM i dodawaj displayName dla lepszej widoczności w DevTools.
4. Zarządzaj stanem zgodnie z typem: useState i useReducer dla stanu lokalnego interfejsu, TanStack Query (useQuery, useMutation) dla stanu serwerowego, React Context z niestandardowymi hookami dla stanu współdzielonego, a komponenty kontrolowane dla stanu formularza.
5. Twórz niestandardowe hooki dla logiki wielokrotnego użytku, pamiętając o Regułach Hooków (top-level, spójna kolejność), używaj fabryk kluczy zapytań dla TanStack Query i optymalizuj wydajność za pomocą useMemo i useCallback.
6. Stylizuj komponenty za pomocą cn() z lib/utils do łączenia klas Tailwind, stosuj cva (class-variance-authority) dla wariantów komponentów i przestrzegaj konwencji trybu ciemnego z prefiksem dark:.