skills.rest
devlitus
devlitusCOMMUNITY
Explore all skills by this author →
GitHub

ui-design-system

Review and refactor UI components for accessibility with TailwindCSS, Radix UI, and shadcn/ui.

1|Updated Feb 12, 2026
Search Tags:#accessibility#design system#ui/ux#shadcn/ui#tailwind#radix ui
One-click install
npx skills add https://github.com/devlitus/queryBox --skill ui-design-system-devlitus
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-system
Source: https://github.com/devlitus/queryBox/tree/main/.agents/skills/ui-design-system
Command: npx skills add https://github.com/devlitus/queryBox --skill ui-design-system-devlitus

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the creation and refinement of user interfaces by providing expert guidance on modern UI development stacks, design system architecture, and accessibility best practices.

Core Features & Use Cases

  • UI/UX Review & Audit: Analyze existing interfaces for accessibility, performance, and consistency.
  • Design System Architecture: Implement robust design systems using TailwindCSS, Radix UI, and shadcn/ui.
  • Component Development: Build accessible, responsive, and themeable UI components.
  • Use Case: A developer needs to refactor a legacy component library to meet WCAG AA standards and implement a dark mode theme. This Skill provides the patterns and code examples to achieve this efficiently.

Quick Start

Use the ui-design-system skill to review the accessibility of the provided component code.

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 design system architecture using TailwindCSS and shadcn/ui?▼

Building a design system architecture with TailwindCSS and shadcn/ui involves structuring accessible components, responsive layouts, and theming. This Skill guides you through reviewing, designing, and refactoring UI components for modern web applications.

What is the best way to refactor legacy components to meet WCAG accessibility standards?▼

The best way to refactor legacy components for WCAG accessibility is to audit existing interfaces and apply accessible component patterns. This Skill provides code examples to improve UI components to meet accessibility best practices.

Can I use Radix UI to implement dark mode and responsive layouts?▼

Yes, you can use Radix UI to implement dark mode and responsive layouts. This Skill focuses on building themeable, accessible components using Radix UI and TailwindCSS, providing patterns for robust theme implementation.

How do I audit existing interfaces for accessibility and performance?▼

To audit existing interfaces for accessibility and performance, this Skill analyzes your UI/UX for consistency and compliance. It reviews your component code to identify areas for improvement based on modern design system standards.

Does shadcn/ui work well with TailwindCSS for component development?▼

shadcn/ui works seamlessly with TailwindCSS for component development, allowing you to build accessible and themeable UI components. This Skill leverages both stacks to streamline your design system architecture and refactor workflows.

When should I not use Radix UI for my UI component library?▼

You should evaluate not using Radix UI if your web application does not require complex accessible component patterns or deep design system architecture. This Skill targets modern stacks needing robust theming, dark mode, and WCAG AA compliance.

Related Skills

Explore More Design & Creative Skills→
try-workstry-works
95

ui-design-system

Develop UI components and design systems with TailwindCSS, Radix UI, and shadcn/ui.

Community
Advanced
viably-labsviably-labs

ui-ux-design-system

Designs accessible SaaS UI/UX systems with tokens, shadcn/ui and Radix components, dark mode, WCAG 2.1 AA compliance, and responsive layouts.

Official
Advanced
shishiv30shishiv30

import-comp-cms

Synchronize component data between local JavaScript files and a CMS database.

Community
Intermediate
itsimonfredlingjackitsimonfredlingjack

tailwind-css

Style UI components with Tailwind CSS utility classes.

Community
Intermediate