Does it support custom design tokens?

Yes, it is specifically configured to read local design documentation (like DESIGN-SYSTEM.md) to ensure generated code uses your project's unique tokens.

What is the primary focus of this skill?

The skill focuses on generating UI components that strictly adhere to a project's specific design system using shadcn/ui and Tailwind CSS.

How does it handle accessibility?

The skill includes a quality gate requiring ARIA labels and proper state management (hover, focus, disabled) for every component generated.

Does it generate responsive code?

Yes, it forbids non-responsive grid or flex layouts, requiring developers to include appropriate mobile and desktop breakpoints.

shadcn/ui Design System Builder

Name: shadcn/ui Design System Builder
Author: CleanExpo

byCleanExpo

•

Design Tools

Generates accessible, theme-compliant shadcn/ui components using project-specific design tokens and design system patterns.

This skill automates the creation of high-quality UI components by enforcing strict adherence to a project's design system and shadcn/ui standards. It ensures visual consistency by utilizing predefined design tokens for colors, typography, and spacing while mandating accessibility features and responsive layouts. By integrating with local design documentation, it bridges the gap between raw code generation and brand-aligned frontend development, preventing common anti-patterns like hardcoded color values and ensuring every component meets professional quality gates.

Key Features

01Automated shadcn/ui component scaffolding

02Mandatory responsive breakpoint implementation

03Built-in accessibility (ARIA) and state management

04Strict design token enforcement for colors and spacing

051 GitHub stars

06Local design system documentation integration

Use Cases

01Building consistent dashboard widgets for the Unite-Hub CRM

02Rapidly prototyping accessible forms and interactive UI elements

03Refactoring legacy Tailwind components to use standardized design tokens

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add cleanexpo/unite-hub ui-component-creation

For use in Claude.ai and ChatGPT

Download Skill