react-skills

Zestaw umiejętności Claude zawierający sprawdzone wzorce i praktyki dla React 18 w subsystemie Designer. Obejmuje komponenty, hooki, zarządzanie stanem serwerowym za pomocą TanStack Query, routing i testowanie. Struktura projektu oparta na TypeScript 5.2+, Radix UI, TailwindCSS i Vite. Dowiedz się, jak organizować komponenty, obsługiwać stan lokalny i serwerowy, tworzyć niestandardowe hooki oraz pisać testy z Vitest i React Testing Library.

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:.