skills.rest
HsnSaboor
HsnSaboorCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-design-system

Review and improve React UI components with TailwindCSS, Radix UI, and shadcn/ui.

Updated Jan 21, 2026
Search Tags:#accessibility#react#design system#ui/ux#shadcn/ui#tailwind#radix ui
One-click install
npx skills add https://github.com/HsnSaboor/open-engineer --skill ui-design-system-hsnsaboor
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-system
Source: https://github.com/HsnSaboor/open-engineer/tree/main/src/skills/bundled/samhvw8-ui-design-system
Command: npx skills add https://github.com/HsnSaboor/open-engineer --skill ui-design-system-hsnsaboor

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the creation and enhancement of user interfaces by providing a robust architecture for modern React applications, focusing on design systems, accessibility, and performance.

Core Features & Use Cases

  • Design System Architecture: Implement scalable design systems using TailwindCSS, Radix UI, and shadcn/ui.
  • Accessibility Audits: Ensure WCAG 2.1/2.2 AA/AAA compliance for all UI components.
  • Performance Optimization: Improve Core Web Vitals and reduce bundle sizes.
  • Use Case: Refactor an existing React application's component library to adopt a consistent design system, improve accessibility, and ensure responsiveness across all devices.

Quick Start

Use the ui-design-system skill to review the accessibility of the current UI 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 design system using TailwindCSS and shadcn/ui?▼

Build a scalable design system by leveraging TailwindCSS for styling and shadcn/ui for accessible, Radix UI-powered components. This approach provides a robust architecture for modern React applications, ensuring UI consistency and performance.

How do I audit React components for WCAG accessibility compliance?▼

Audit React components for WCAG accessibility compliance by reviewing UI elements against WCAG 2.1/2.2 AA/AAA standards. This process identifies and resolves accessibility issues within your shadcn/ui and Radix UI components.

Can I use Radix UI and shadcn/ui to refactor an existing React component library?▼

You can refactor an existing React component library using Radix UI and shadcn/ui to adopt a consistent design system. This improves accessibility, ensures responsiveness, and standardizes UI components across all devices.

What is the best way to implement dark mode and theming in a TailwindCSS design system?▼

Implement dark mode and theming in a TailwindCSS design system by utilizing its configuration capabilities alongside shadcn/ui components. This ensures consistent visual themes and seamless dark mode transitions across your React application.

How do I improve Core Web Vitals and reduce bundle size for React UI components?▼

Improve Core Web Vitals and reduce bundle size by optimizing and refactoring React UI components. Using Radix UI and shadcn/ui ensures performance optimization while maintaining accessible, responsive layouts.

Related Skills

Explore More Design & Creative Skills→
weebcoder101weebcoder101
3

frontend

Provide React frontend development guidelines for component architecture, state management, and TailwindCSS styling.

Community
Intermediate
MisonLMisonL
8

performance-profiling

Collect Core Web Vitals and Lighthouse scores to measure web performance.

Community
Intermediate
pohlai88pohlai88

Frontend Builder

Architect React and Next.js frontend architectures with component organization and state management.

Community
Advanced
pedronauckpedronauck
567

storybook-stories

Generate and refactor Storybook stories following project patterns and design tokens.

Community
Intermediate