AgentSkillsCN

frontend-dev

Atomic CRM前端开发的编码实践。当您创建或修改React组件、表单、列表页面、详情视图、筛选器、数据获取，或响应式布局时，可使用此技能。

SKILL.md
--- frontmatter
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.

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.

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.