← ClaudeAtlas

robr0-design-systemlisted

Build React UI with @robr0/design-system. Use when installing the package, composing its components, theming with its design tokens, or reading a component's exact prop contract.
robritacca-dotcom/design-system · ★ 0 · Web & Frontend · score 60
Install: claude install-skill robritacca-dotcom/design-system
# Using @robr0/design-system Generated from the library's registries at version 0.15.0, alongside every deploy of https://robertritacca.com. The library is 122 React components across 11 categories, themed by 222 semantic design tokens, published to npm. ## Install ```bash npm install @robr0/design-system ``` Import the token stylesheet once, then components from the barrel or by deep subpath: ```tsx import '@robr0/design-system/tokens/tokens.css'; import { Button } from '@robr0/design-system'; import { Input } from '@robr0/design-system/components/Input/Input'; ``` The package is ESM-only, resolved via exports subpaths: use a bundler that handles CSS and font imports from node_modules (Vite, Next.js, webpack) and set TypeScript's `moduleResolution` to `"bundler"` (or `"nodenext"`). Components are provider-free with one exception: wrap the tree in `ToastProvider` if (and only if) the toast queue is used via `useToast`. ## Dark mode Set `data-theme="dark"` on the root element. Every semantic colour token has a light and a dark value; components never query `prefers-color-scheme` themselves. ## Theming Components read semantic tokens (`--color-*`, `--radius-*`, `--font-*`, `--motion-*`, ...), and every semantic colour token references a `--primitive-*` value. Re-theme by overriding primitives: one override cascades through both themes at once. Never hardcode a colour beside the components; override the token it should come from. The full token reference lives at https