O
opik-frontend
Wzorce React dla frontendu Opik – TanStack Query, Zustand i shadcn/ui w jednym miejscu
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill dla deweloperów pracujących nad frontendem Opik. Zawiera architekturę i best practices dla komponentów React, zarządzania stanem (Zustand, React state), pobierania danych (TanStack Query), routingu (TanStack Router) oraz walidacji formularzy (React Hook Form + Zod). Dokumentuje kluczowe błędy do uniknięcia, takie jak useEffect do data fetchingu czy niepotrzebna memoizacja. Definiuje warstwową strukturę projektu i reguły lokalizacji stanu (URL, Zustand, React state).
Jak używać
- Zainstaluj skill w swoim środowisku agenta, wskazując repozytorium comet-ml/opik i ścieżkę .agents/skills/opik-frontend. 2. Gdy pracujesz nad komponentami w apps/opik-frontend, konsultuj architekturę routingu (TanStack Router z routingiem plikowym) i data fetchingu (TanStack Query zamiast raw fetch w useEffect). 3. Zarządzaj stanem globalnym za pomocą Zustand z selektorami specifycznymi (unikaj wybierania całego store'a), a stanem lokalnym React state dla inputów formularzy i toggleów UI. 4. Buduj komponenty z shadcn/ui i Radix UI, używając React Hook Form do formularzy i Zod do walidacji. 5. Pamiętaj o warstwowej architekturze (ui → shared → pages-shared → pages bez zależności cyklicznych) i uruchom npm run deps:validate po zmianach importów. 6. Stosuj memoizację (useMemo, useCallback) tylko dla złożonych obliczeń i funkcji przekazywanych dzieciom – nie memoizuj prostych wartości czy prymitywów.