skills.rest
brixtonpham
brixtonphamCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/brixtonpham/claude-config --skill ui-design-system-brixtonpham
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
fusenginefusengine
22

designing-systems

Define OKLCH color palettes, CSS variables, and typography scales for Tailwind CSS v4 theming.

Community
Advanced
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
alissonmds00alissonmds00

shadcn

Manage shadcn/ui component installation, configuration, and design system rules.

Community
Advanced
oborchersoborchers
28

design-tokens

Manage design token architecture with a three-tier model and CSS custom properties.

Community
Intermediate