skills.rest
samixisme
samixismeCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-design-system

Audit UI design systems and enforce token, contrast, and responsive patterns.

Updated Aug 27, 2026
Search Tags:#accessibility#responsive#tailwind#tokens#design-system#shadcn-ui#radix-ui
One-click install
npx skills add https://github.com/samixisme/client-dashboard --skill ui-design-system-samixisme
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-system
Source: https://github.com/samixisme/client-dashboard/tree/main/.agents/skills/ui-design-system
Command: npx skills add https://github.com/samixisme/client-dashboard --skill ui-design-system-samixisme

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

UI teams struggle to architect, implement, and maintain scalable design systems that are accessible, token-driven, and consistent across apps; this Skill provides a framework to audit, design, and evolve UI systems using Tailwind CSS, Radix UI, and shadcn/ui.

Core Features & Use Cases

  • UI/UX Review & Audit: Assess component architecture, accessibility, tokens, and consistency.
  • Design System Design: Define tokens, theming, responsive patterns, and dark mode across applications.
  • UI/UX Improvement: Refactor components, improve performance, and maintainability.

Quick Start

Install Tailwind CSS and shadcn/ui, then scaffold a design system with tokens, components, and accessibility checks to begin building production UI.

Frequently Asked Questions about ui-design-system

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

FAQPage Schema
How do I audit my design system for accessibility and token consistency?▼

Establishing a token-driven design system with Tailwind CSS and shadcn/ui requires defining a three-tier token model for theming and responsive patterns. This Skill guides scaffolding tokens, components, and accessibility checks to structure scalable production interfaces.

How do I structure a three-tier token model for a Tailwind CSS design system?▼

Yes, shadcn/ui and Radix UI components support dark mode and responsive patterns when integrated with a structured token governance framework. This Skill helps refactor components and define responsive tokens to maintain accessibility and consistency across themes.

Can I use shadcn/ui and Radix UI to build a responsive, dark mode design system?▼

When UX consistency issues occur in a Tailwind CSS interface, perform a UI/UX review to assess component architecture and token usage. This Skill enables auditing component maintainability and refactoring UI patterns to resolve architectural inconsistencies.

What is the best way to enforce WCAG contrast checks in a shadcn/ui design system?▼

To enforce WCAG-compliant contrast checks in a shadcn/ui design system, systematically validate color tokens against accessibility standards during UI audits. This Skill enforces these checks to ensure interface components remain accessible and compliant.

Why does my Tailwind CSS design system lack consistency across web apps?▼

Tailwind CSS design systems lack consistency across web apps when missing token governance and a structured three-tier token model. This Skill helps audit and establish scalable token architectures to resolve maintainability and cross-app consistency issues.

Related Skills

Explore More Design & Creative Skills→
wredziowredzio

tailwind-v4-shadcn

Configure Tailwind v4 theming with shadcn/ui in React + Vite projects.

Community
Advanced
bastabasta
24

frontend-design

Design and implement frontend interfaces with token-based design guidelines and code quality checks.

Community
Advanced
ralvarezdevralvarezdev
3

ui-ux-architect

Standardize accessible React/Next.js UI design with WCAG 2.2 AA compliance.

Community
Advanced
DVNghiemDVNghiem
20

design-tokens

Standardize color, typography, spacing, and border tokens across platforms.

Community
Intermediate