ui

Use when the user wants to create a custom UI kit on top of VegaUI. Helps define a branded theme, wrapper components, opinionated defaults, composed patterns, exports, and docs without forking the base component layer. Uses @vega-ui/react, @vega-ui/theme-core, docs/styling, and real component docs as the source of truth.

Use when creating a new standalone component on top of VegaUI. Helps choose the right VegaUI primitives, compose them into a product-facing component, define a stable API, apply theme-safe styling, add realistic stories and tests, and avoid rebuilding behavior that VegaUI already provides.

Use when creating or updating component documentation in this repository. Applies the local docs structure in docs/components, uses packages/ui/src and *.stories.tsx as sources of truth, writes realistic consumer-facing snippets, and avoids placeholders or pseudo-code in index.md, anatomy.md, examples.md, patterns.md, styling.md, and troubleshooting.md.

Use when reviewing component documentation in this repository. Checks docs/components content against packages/ui/src and *.stories.tsx, prioritizes placeholders, pseudo-code, API drift, weak examples, misleading minimal compositions, missing anatomy/usage guidance, and styling docs that invent unsupported contracts.

Use when creating or updating a branded theme on top of VegaUI. Helps map brand decisions onto VegaUI semantic theme variables, define app-level theme classes, validate contrast and state coverage, and avoid raw-token misuse or component-local hacks when a semantic override is the right tool.