grommet

Build and contribute Grommet React components following official team conventions. Use when creating a new component from scratch, refactoring a component to align with Grommet conventions, preparing a PR for Grommet core contribution, or reviewing a component against acceptance criteria. Covers scaffolding, forwardRef, displayName, useThemeValue, FormContext, propTypes, TypeScript declarations, accessibility, i18n, and testing.

Style Grommet components using styled-components and the Grommet theme system. Use when creating or modifying StyledComponentName.js files, adding or updating theme tokens in base.js and base.d.ts, applying disabledStyle or readOnlyStyle helpers, choosing t-shirt sizing values, or composing UI with Grommet primitives. Covers useThemeValue, styledComponentsConfig, passThemeFlag, normalizeColor, genericStyles, and theme namespace conventions.

Write tests and Storybook stories for Grommet components. Use when writing unit tests with @testing-library/react and jest-axe, setting up userEvent interactions, querying the DOM, or creating CSF-3 Storybook stories. Covers required axe accessibility checks as the first test, userEvent vs fireEvent guidance, query priority (getByRole first), Grommet wrapper requirement, snapshot usage, coverage targets, story file format, FormField integration stories, and CustomThemed stories.