frontend-dev
Standardy kodowania React dla komponentów, formularzy i widoków w Atomic CRM
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Umiejętność Claude'a zawierająca wytyczne do tworzenia i modyfikacji komponentów frontendowych w Atomic CRM. Obejmuje praktyki dla komponentów React, formularzy, stron listy, widoków szczegółów, filtrów, pobierania danych i responsywnych layoutów. Integruje się z ra-core do logiki CRUD, routingu i pobierania danych, oraz z shadcn-admin-kit i shadcn/ui do warstwy UI. Definiuje konwencje struktury zasobów, importowania komponentów formularzy z warstwy admin, konfiguracji domeny z kontekstu oraz standardów dla hooków pobierania danych.
Jak używać
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.
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.
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.
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.
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
(). 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} />.