skills.rest
haotool
haotoolOFFICIAL
Explore all skills by this author →
GitHub

ui-design-system

Design scalable UI design systems for React apps with TailwindCSS, Radix UI, and shadcn/ui.

2|Updated Oct 12, 2025
Search Tags:#theming#accessibility#shadcn/ui#design-system#tailwindcss#radix-ui#ui-library
One-click install
npx skills add https://github.com/haotool/app --skill ui-design-system-haotool
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-system
Source: https://github.com/haotool/app/tree/main/.agents/skills/ui-design-system
Command: npx skills add https://github.com/haotool/app --skill ui-design-system-haotool

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TailwindCSS, Radix UI, and shadcn/ui-based UI design systems enable consistent, accessible, and scalable component libraries across React apps, reducing duplication and speeding UI development.

Core Features & Use Cases

  • Design tokens, theming, dark mode, and accessibility-driven components for production-ready interfaces
  • Component architecture, atomic design patterns, and responsive layouts for enterprise-grade apps
  • Use cases include building a shared component library for multiple apps, auditing UI patterns for WCAG compliance, and migrating legacy styles to a token-driven system

Quick Start

Install and scaffold a Tailwind + shadcn/ui based design system in your React project, then progressively integrate Radix primitives for accessible interactions.

Frequently Asked Questions about ui-design-system

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

FAQPage Schema
How do I build a scalable UI design system using TailwindCSS and shadcn/ui?▼

A scalable UI design system with TailwindCSS and shadcn/ui uses design tokens, theming, and Radix UI primitives to ensure consistency and accessibility across multiple React applications.

What are OKLCH-based color tokens and how do they work for dark mode theming?▼

OKLCH-based color tokens define perceptually uniform color spaces for theming, enabling consistent dark mode and light mode interfaces within a scalable UI design system.

Can I use Radix UI components with Tailwind config for WCAG compliance?▼

Yes, Radix UI components integrate with Tailwind config to provide ARIA-supported accessible interactions, ensuring your UI library meets WCAG compliance and accessibility standards.

How do I migrate legacy styles to a token-driven design system in React?▼

Migrating legacy styles to a token-driven system requires auditing existing UI patterns, mapping hardcoded values to OKLCH-based design tokens, and integrating Tailwind config for React components.

Does shadcn/ui support atomic design patterns for enterprise-grade apps?▼

shadcn/ui supports atomic design patterns for enterprise-grade apps by providing component architecture primitives that combine with Radix UI and TailwindCSS for responsive layouts.

When should I not use a shadcn/ui based design system for component architecture?▼

Avoid using a shadcn/ui based design system if your React project lacks TailwindCSS dependencies or requires non-token-driven styling architectures outside Radix UI primitive patterns.

Related Skills

Explore More Design & Creative Skills→
mostafasudomostafasudo
3

shadcn-ui

Automate discovery, installation, and customization of shadcn/ui components in React applications.

Community
Intermediate
GeneralJerelGeneralJerel

IBM Carbon Design System

Codify token-based theming and WCAG-compliant UI patterns for enterprise applications.

Community
Advanced
hotriluanhotriluan
3

ui-styling

Automate UI styling and component assembly for React apps with shadcn/ui and Tailwind CSS.

Community
Intermediate
ColdstartLabs-caColdstartLabs-ca

tailwind-styling

Enforce Tailwind-based styling rules with CSS tokens and config for consistent theming.

Official
Intermediate