crm-react-ui-kit

Create a new React component in the crm-react-ui-kit library following the project's conventions (forwardRef, CSS variables theme system, useThemeClassName hook, .props.ts/.themes.ts/.module.css/index.ts files). Use when adding a new component under packages/ui-kit/src/components, scaffolding component files, or asked to create a new UI kit component.

Write Playwright Component Testing visual e2e tests for crm-react-ui-kit components, including the playground file and the prop-cartesian screenshot test. Use when adding `<Component>.e2e.test.tsx` and `<Component>.e2e-playground.tsx` files under `packages/ui-kit/src/components/<Name>/__tests__/`, generating image snapshots, or asked to write/update visual regression tests.

End-to-end scaffolding of a brand-new crm-react-ui-kit component — orchestrates source files, unit tests, Playwright e2e visual tests, and Storybook stories, then wires the component into package.json exports. Use when asked to "create a full component", "add a new component end to end", or to bootstrap everything (component + tests + e2e + stories) in one go.

Write Storybook 8 stories (.stories.tsx + .mdx) for crm-react-ui-kit components — including the meta with title/USAGE snippet, controlled/uncontrolled stories, hidden per-theme stories tagged !dev, and a Themes.mdx with ThemeVisualization. Use when adding `<Component>.stories.tsx`, `<Component>.mdx`, or `Themes.mdx` files under `packages/ui-kit/src/components/<Name>/__stories__/`.

Write Jest + React Testing Library unit tests for components in crm-react-ui-kit, following the project's render-helper pattern, role-based queries, and userEvent interactions. Use when adding `<Component>.test.tsx` files under `packages/ui-kit/src/components/<Name>/__tests__/` or asked to write unit tests for a UI kit component.