ui-ux-design

Implement UI/UX changes with shadcn/ui components and Tailwind tokens.

Updated Dec 22, 2025

Search Tags:#ui #accessibility #components #tailwind #ux #design-system

Ready to run

npx skills add https://github.com/htooayelwinict/claude-config --skill ui-ux-design-htooayelwinict

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-ux-design
Source: https://github.com/htooayelwinict/claude-config/tree/main/skills/ui-ux-design
Command: npx skills add https://github.com/htooayelwinict/claude-config --skill ui-ux-design-htooayelwinict

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides structured UI/UX guidance to improve interfaces using existing components, ensuring accessibility and consistency.

Core Features & Use Cases

Reuse shadcn/ui components and design tokens for cohesive visuals.
Enforce accessibility checks and responsive behavior.
Maintain design consistency across pages and components.

Quick Start

Audit a page for accessibility and replace ad-hoc styles with existing components.

Frequently Asked Questions about ui-ux-design

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

FAQPage Schema

How do I audit a UI for accessibility and WCAG compliance?▼

Accessibility audits evaluate interfaces against WCAG criteria by reviewing component usage, color contrast, keyboard navigation, and semantic HTML. This Skill guides you through auditing patterns, replacing ad-hoc styles with accessible shadcn/ui components, and testing responsive behavior to ensure your design meets accessibility standards.

Can I use Tailwind tokens to maintain design consistency across pages?▼

Tailwind tokens provide a centralized system for colors, spacing, and typography that enforces consistency across all pages and components. This Skill applies Tailwind design tokens to replace custom CSS, ensuring visual cohesion and making future design updates propagate automatically.

How do I implement loading and error states in reusable components?▼

Loading and error states handle user feedback during async operations and failures. This Skill implements these states within shadcn/ui components using Tailwind styling, ensuring functional requirements are met while maintaining accessibility and responsive design across mobile and desktop.

What's the best way to replace custom CSS with existing components?▼

Reusing shadcn/ui components eliminates ad-hoc styling by leveraging pre-built, accessible patterns. This Skill enforces component reuse and Tailwind tokens to maintain design consistency, reduce maintenance overhead, and guarantee accessibility compliance without custom CSS.

How do I ensure UI designs are responsive on both mobile and desktop?▼

Responsive behavior adapts layouts and interactions across screen sizes using Tailwind's breakpoint system and flexible components. This Skill tests responsive design on mobile and desktop, leveraging shadcn/ui components built for all viewports to satisfy technical requirements.

Do I need design system knowledge to use existing components effectively?▼

No—this Skill provides structured guidance for applying existing components and design tokens without deep design system expertise. It covers component reuse, accessibility checks, and responsive testing, allowing you to improve interfaces through consistent pattern application.