frontend-dev

Coding practices for frontend development in Atomic CRM. Use when creating or modifying React components, forms, list pages, detail views, filters, data fetching, or responsive layouts.

1. Zainstaluj umiejętność w swoim Claude'u lub agencie, wskazując ścieżkę do pliku konfiguracyjnego frontend-dev z repozytorium marmelab/atomic-crm. Umiejętność będzie dostępna podczas pracy nad kodem frontendowym projektu.

2. Kiedy tworzysz lub modyfikujesz komponent React w Atomic CRM, aktywuj umiejętność i opisz, co chcesz zbudować — np. nowy formularz kontaktu, stronę listy lub widok szczegółów. Claude będzie stosować wytyczne dotyczące struktury komponentów i konwencji nazewnictwa.

3. Importuj komponenty formularzy (TextInput, SelectInput, ReferenceInput) z @/components/admin/, a nie bezpośrednio z shadcn/ui. Warstwa admin opakowuje shadcn z integracją ra-core, zapewniając etykiety, walidację i wiązanie danych.

4. Importuj czyste komponenty UI (Card, Button, Badge, Sheet) z @/components/ui/ i pobieraj konfigurację domeny (etapy transakcji, statusy notatek, typy zadań) z useConfigurationContext(), nigdy nie hardcoduj wartości.

5. Dla standardowych operacji CRUD używaj hooków ra-core: useListContext(), useShowContext(), useGetList(), useGetOne(), useGetIdentity(). Jeśli zapytanie lub mutacja nie są pokryte hookami ra-core, dodaj niestandardową metodę dataProvider i wywołaj ją przez useQuery/useMutation z useDataProvider().

6. Strukturyzuj zasoby zgodnie z konwencją: ContactList.tsx dla strony listy, ContactShow.tsx dla widoku szczegółów, ContactEdit.tsx i ContactCreate.tsx dla formularzy, ContactInputs.tsx dla pól formularza współdzielonych między tworzeniem i edycją, index.tsx eksportujący { list, show, edit, create, recordRepresentation }. Zarejestruj zasoby w root/CRM.tsx poprzez <Resource name="contacts" {...contacts} />.