design-tokens

To standardize UI design token usage, apply consumer-owned CSS variables and semantic Tailwind classes for backgrounds, borders, rings, and shadows. This approach ensures every React component maintains visual consistency and preserves accessibility across the library.

Design tokens are standardized styling variables defining spacing, focus states, and component conventions. By enforcing shared rules for disabled states, popup patterns, and data-slot attributes, they prevent style drift and maintain visual consistency throughout the React component library.

Apply consistent focus rings and disabled states by using semantic Tailwind classes mapped to consumer-owned theme variables. Following shared component conventions for radius, rings, and transitions ensures accessibility and visual parity across all UI elements.

No specific dependencies are required. The design-tokens skill relies on consumer-owned CSS variables and semantic Tailwind classes to manage React component theming, ensuring components remain accessible and maintainable without external library dependencies.

Use data-slot attributes and popup patterns whenever creating or updating components in packages/ui/src/. Applying these shared conventions ensures that elements like inputs, selects, and popups match the library's established styling rules and maintain accessibility.