What problem does it solve? It prevents inconsistent UI code in the Layer component library by defining strict rules for building primitives: no raw divs or spans, style props instead of ad-hoc CSS, and data-attribute variants instead of concatenated class names. ## Core Features & Use Cases - Primitive-First Composition: Mandates Stack, Typography, Button, and related primitives from @ui/* instead of raw HTML elements, keeping the design system domain-agnostic. - Variant Styling Convention: Requires toDataProperties to emit data-* attributes (e.g. data-variant='ghost') styled via SCSS attribute selectors, never string-concatenated class names. - Accessibility by Default: Interactive primitives wrap react-aria-components for focus management, keyboard behavior, and ARIA attributes, with forwardRef and withRenderProp patterns. - Use Case: When adding a new Badge or Button variant, follow the gallery story pattern—one AllVariants story rendering the full variant × size × state matrix driven from the component's exported unions. ## Quick Start Ask the AI to create a new UI primitive component following the design-system rules in src/components/ui, with data-attribute variants and an AllVariants Storybook gallery story.
