snapshot of https://github.com/marmelab/atomic-crm.git (main, 2026-09-18; blobs > 131072B omitted)

.claude/skills/frontend-dev/SKILL.md

@@ -0,0 +1,79 @@
+---
+name: frontend-dev
+description: 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.
+---
+
+# Frontend Development
+
+Reference for the conventions a frontend change must follow. 
+This is a reference skill, not a step sequence — read the relevant section before writing code, then verify against the checklist at the end. 
+The frontend uses ra-core (react-admin headless) for data fetching, routing, and CRUD logic, with shadcn-admin-kit and shadcn/ui for the UI layer.
+
+## When to Use
+
+- Creating or modifying React components, forms, list pages, or detail views.
+- Adding or changing filters, data fetching, or responsive (mobile/desktop) layouts.
+- Registering a new resource or reorganizing an existing resource folder.
+
+Not for backend/schema work — see `Skill({skill: "backend-dev"})`. 
+Not for theming/colors — see `Skill({skill: "shadcn-customization"})`.
+
+## Component architecture
+
+- Import form inputs (`TextInput`, `SelectInput`, `ReferenceInput`, etc.) from `@/components/admin/`, not from shadcn/ui directly. The admin layer wraps shadcn with ra-core integration (labels, validation, data binding).
+- Import pure UI components (`Card`, `Button`, `Badge`, `Sheet`, etc.) from `@/components/ui/`.
+- Domain configuration (deal stages, note statuses, task types, company sectors) comes from `useConfigurationContext()`, never hardcoded.
+
+## Resource (CRUD) conventions
+
+Each resource follows this file structure (e.g. `contacts/`):
+
+- `ContactList.tsx` — list page (desktop + mobile variants)
+- `ContactShow.tsx` — detail view
+- `ContactEdit.tsx` / `ContactCreate.tsx` — form pages
+- `ContactInputs.tsx` — shared form fields reused between create and edit
+- `index.tsx` — exports `{ list, show, edit, create, recordRepresentation }`
+
+Resources are registered in `root/CRM.tsx` via `<Resource name="contacts" {...contacts} />`.
+
+## Data fetching
+
+- For standard CRUD, use ra-core hooks: `useListContext()`, `useShowContext()`, `useGetList()`, `useGetOne()`, `useGetIdentity()`.
+- When a query or mutation isn't covered by ra-core hooks, add a custom dataProvider method and call it via `useQuery`/`useMutation` with `useDataProvider<CrmDataProvider>()` (e.g. `dataProvider.getActivityLog()` in `ActivityLog.tsx`, `dataProvider.salesCreate()` in `SalesCreate.tsx`).
+
+## Forms
+
+- Forms use `Form` from ra-core + `FormToolbar` for submit/cancel actions.
+- Ra-core's `Form` uses React Hook Form under the hood. Use `useFormContext()` for imperative operations (`setValue`, `reset`, `getValues`).
+- Top-level resource forms use full-page `CreateBase`/`EditBase` with `Card` (e.g. contacts), or `Dialog` (e.g. deals).
+- On mobile, inline/sub-resource forms use `CreateSheet`/`EditSheet` from `misc/` (e.g. notes, tasks).
+- Split form fields into semantic sub-components (e.g. `ContactIdentityInputs`, `ContactPositionInputs`).
+
+## Filters
+
+- Use `ToggleFilterButton` / `ActiveFilterButton` components for filter UI.
+- Filters apply immediately, no "apply" button.
+
+## Responsive design
+
+- Major pages have desktop and mobile variants. Use `useIsMobile()` to branch.
+- Desktop: 2-column grid layouts. Mobile: single column with `MobileHeader`/`MobileContent`.
+- Mobile lists use `InfiniteListBase` for scroll pagination.
+
+## Red Flags
+
+- Importing `TextInput`/`SelectInput`/etc. directly from `@/components/ui/` instead of `@/components/admin/`.
+- Hardcoding deal stages, note statuses, task types, or sectors instead of reading `useConfigurationContext()`.
+- A new resource folder missing one of the standard files, or not registered in `root/CRM.tsx`.
+- A bespoke fetch/axios call where a ra-core hook or a dataProvider method belongs.
+- A new top-level page with only a desktop layout and no `useIsMobile()` branch.
+- A form field component growing past the typical size instead of being split into semantic sub-components.
+
+## Verification
+
+- [ ] Inputs imported from `@/components/admin/`, pure UI from `@/components/ui/`.
+- [ ] Domain options come from `useConfigurationContext()` — nothing hardcoded.
+- [ ] New resources follow the file structure and are registered in `root/CRM.tsx`.
+- [ ] Data access uses ra-core hooks, or a dataProvider method via react-query.
+- [ ] Pages touching major UI have both desktop and mobile variants.
+- [ ] If the change touches UI/forms/filters/interactions, an e2e test exists (see `Skill({skill: "e2e-conventions"})`).