ui-design-system

Architect scalable UI design systems with three-tier design tokens and CSS variable theming.

Updated Jan 28, 2026

Search Tags:#accessibility #design-system #tailwindcss #shadcn-ui #design-tokens #radix-ui #component-library

Ready to run

npx skills add https://github.com/brixtonpham/claude-config --skill ui-design-system-brixtonpham

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-design-system
Source: https://github.com/brixtonpham/claude-config/tree/main/skills/ui-design-system
Command: npx skills add https://github.com/brixtonpham/claude-config --skill ui-design-system-brixtonpham

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designing and maintaining cohesive UI design systems across teams is complex and error-prone, often resulting in inconsistent interfaces and slowed delivery.

Core Features & Use Cases

Establish a three-tier design-token system (primitive, semantic, component) and a robust theming strategy using CSS variables and OKLCH color space.
Provide accessible UI primitives and components by integrating Radix UI and shadcn/ui, enabling rapid, consistent UI development.
Support responsive design, dark mode, and design-system documentation to ensure scalable, maintainable projects.

Quick Start

Create a production-ready design system using TailwindCSS, Radix UI, and shadcn/ui with tokens, theming, and accessible components.

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 with three-tier design tokens?▼

Build a scalable UI design system by establishing a three-tier design-token architecture using primitive, semantic, and component tokens. This approach structures theming via CSS variables and the OKLCH color space to ensure cohesive, maintainable interfaces across product teams.

What is the best way to integrate Radix UI and shadcn/ui for accessible components?▼

The best way to integrate Radix UI and shadcn/ui for accessible components is to use them as accessible UI primitives within your design system. This enables rapid, consistent UI development while maintaining robust accessibility patterns across React applications.

Does this design system approach support CSS variable theming and dark mode integration?▼

Yes, this design system approach fully supports CSS variable theming and dark mode integration. It architects a robust theming strategy using semantic tokens and the OKLCH color space, ensuring responsive design and seamless dark mode transitions.

Can I use TailwindCSS with a semantic design token structure for React apps?▼

Yes, you can use TailwindCSS with a semantic design token structure for React apps. The system provides full TailwindCSS compatibility, allowing you to map primitive and semantic tokens directly into your utility classes for consistent styling.

How do you structure design tokens to maintain consistency across product teams?▼

Structure design tokens to maintain consistency across product teams by separating them into primitive, semantic, and component tiers. This three-tier system prevents inconsistent interfaces by decoupling raw values from their semantic meaning and component-specific applications.