菜单
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.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
Architecture Decision Record format and rules for the developer agent. Load when the implementation introduces a structural decision worth remembering 6 months later — new pattern, new dependency, deliberate departure from convention, non-obvious schema choice. Skip for naming and file-layout micro-choices. No ADR is the default.
Coding practices for backend development in Atomic CRM. Use when deciding whether backend logic is needed, or when creating/modifying database migrations, views, triggers, RLS policies, edge functions, or custom dataProvider methods that call Supabase APIs.
Remove one or more of the initial CRM resources (contacts, companies, deals, tags, tasks) from the codebase. Use when the user asks to delete, remove, or strip out one or several of these built-in resources. Runs the delete-initial-resource.ts script to drop each resource's own folder, then guides cleanup of every file that references them.
Playwright E2E testing patterns — web-first assertions, user-visible locators, network interception, fixtures, authentication, and parallel execution. Use when building or reviewing E2E tests with Playwright, when setting up browser testing for a web app, or when migrating from Cypress or Selenium.
Domain-by-domain interview to produce $CLAUDE_PROJECT_DIR/docs/project-context.json. Invoked once by the orchestrator; the orchestrator then conducts all turns directly using Read/Write/Edit — no agent dispatching.
Shadcn/ui theming and component customization — CSS variables, OKLCH colors, dark mode, variants, wrappers. Load for any ticket involving colors, theme, UI layout, or component styling.
| 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. |
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.
Not for backend/schema work — see Skill({skill: "backend-dev"}).
Not for theming/colors — see Skill({skill: "shadcn-customization"}).
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).Card, Button, Badge, Sheet, etc.) from @/components/ui/.useConfigurationContext(), never hardcoded.Each resource follows this file structure (e.g. contacts/):
ContactList.tsx — list page (desktop + mobile variants)ContactShow.tsx — detail viewContactEdit.tsx / ContactCreate.tsx — form pagesContactInputs.tsx — shared form fields reused between create and editindex.tsx — exports { list, show, edit, create, recordRepresentation }Resources are registered in root/CRM.tsx via <Resource name="contacts" {...contacts} />.
useListContext(), useShowContext(), useGetList(), useGetOne(), useGetIdentity().useQuery/useMutation with useDataProvider<CrmDataProvider>() (e.g. dataProvider.getActivityLog() in ActivityLog.tsx, dataProvider.salesCreate() in SalesCreate.tsx).Form from ra-core + FormToolbar for submit/cancel actions.Form uses React Hook Form under the hood. Use useFormContext() for imperative operations (setValue, reset, getValues).CreateBase/EditBase with Card (e.g. contacts), or Dialog (e.g. deals).CreateSheet/EditSheet from misc/ (e.g. notes, tasks).ContactIdentityInputs, ContactPositionInputs).ToggleFilterButton / ActiveFilterButton components for filter UI.useIsMobile() to branch.MobileHeader/MobileContent.InfiniteListBase for scroll pagination.TextInput/SelectInput/etc. directly from @/components/ui/ instead of @/components/admin/.useConfigurationContext().root/CRM.tsx.useIsMobile() branch.@/components/admin/, pure UI from @/components/ui/.useConfigurationContext() — nothing hardcoded.root/CRM.tsx.Skill({skill: "e2e-conventions"})).