skills.rest
robritacca-dotcom
robritacca-dotcomCOMMUNITY
Explore all skills by this author →
Website𝕏@robr0GitHub

robr0-design-system

Build React UI with the @robr0/design-system component library and design tokens.

1|Updated Feb 14, 2026
Search Tags:#typescript#theming#react#npm#design system#components#design tokens
One-click install
npx skills add https://github.com/robritacca-dotcom/design-system --skill robr0-design-system-robritacca-dotcom
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: robr0-design-system
Source: https://github.com/robritacca-dotcom/design-system/tree/main/website/public/skill/robr0-design-system
Command: npx skills add https://github.com/robritacca-dotcom/design-system --skill robr0-design-system-robritacca-dotcom

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @robr0/design-system, recharts, and includes references (resource) components.

What problem does it solve? Building React interfaces with an unfamiliar component library means guessing prop names, import paths, and theming rules. This Skill provides the exact install steps, import patterns, theming rules, and prop contracts for the @robr0/design-system package so generated UI code works on the first try. ## Core Features & Use Cases - Installation and setup guidance: Covers npm install, ESM-only exports subpaths, TypeScript moduleResolution settings, and the single ToastProvider exception. - Theming with design tokens: Explains the three-tier token architecture, dark mode via data-theme="dark", and re-theming by overriding primitive tokens across 235 semantic tokens. - Component catalog and prop contracts: A references/components.md catalog lists all 132 components across 11 categories with import lines, plus links to per-component markdown prop contracts and an MCP endpoint. - Use Case: Ask the AI to build a settings page with a form, a data table, and a toast notification; the Skill supplies the correct imports, props, and token-based styling without guessing. ## Quick Start Use the robr0-design-system skill to build a React settings page using @robr0/design-system components with correct imports and theming.

Frequently Asked Questions about robr0-design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I install and import @robr0/design-system components?▼

Run npm install @robr0/design-system, import the token stylesheet once via '@robr0/design-system/tokens/tokens.css', then import components from the main barrel or deep subpaths like '@robr0/design-system/components/Input/Input'. The package is ESM-only and needs a bundler that handles CSS imports.

How do I theme @robr0/design-system with design tokens?▼

Components read semantic tokens like --color-* and --radius-*, each referencing a --primitive-* value. Re-theme by overriding primitives, which cascades through both light and dark themes at once. Never hardcode colours beside components.

Does @robr0/design-system support dark mode?▼

Yes, set data-theme="dark" on the root element. Every semantic colour token has a light and dark value, and components never query prefers-color-scheme themselves, so theme control is fully manual.

Where do I find exact prop types for each component?▼

Three equivalent sources exist: the .d.ts files in node_modules after install, per-component markdown contracts at robertritacca.com/components/<slug>.md, and the MCP endpoint's get_component tool. All are generated from the same JSDoc shipped in the package.

Why do chart components fail after installing @robr0/design-system?▼

Chart components ship from the '@robr0/design-system/charts' subpath and require the optional recharts peer dependency. Install recharts separately; everything in the main barrel is dependency-free.

Does @robr0/design-system work with Next.js and TypeScript?▼

Yes, it works with Vite, Next.js, and webpack since they handle CSS and font imports from node_modules. Set TypeScript moduleResolution to "bundler" or "nodenext" because the package is ESM-only and resolved via exports subpaths.

Related Skills

Explore More Software Engineering Skills→
fragments-sdkfragments-sdk
1

fragments/ui-setup

Install the Fragments UI library and configure FragmentsProvider in React projects.

Official
Intermediate
popmechanicpopmechanic
134

test

Automate end-to-end integration testing for the vibes platform with Cloudflare deployment.

Community
Advanced
KyaniteLabsKyaniteLabs
3

theming

Establish semantic token systems for light, dark, and high-contrast UI themes.

Official
Advanced
Eng-susoEng-suso

radix-ui-design-system

Build accessible React component libraries using Radix UI headless primitives.

Community
Intermediate