skills.rest
umairshahid622
umairshahid622COMMUNITY
Explore all skills by this author →
GitHub

ui-styling

Build accessible user interfaces with shadcn/ui components and Tailwind CSS utility styling.

Updated Sep 1, 2026
Search Tags:#accessibility#react#responsive design#shadcn/ui#tailwind css#ui components#dark mode
One-click install
npx skills add https://github.com/umairshahid622/perfumora --skill ui-styling-umairshahid622
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-styling
Source: https://github.com/umairshahid622/perfumora/tree/main/perfumora/.claude/skills/ui-styling
Command: npx skills add https://github.com/umairshahid622/perfumora --skill ui-styling-umairshahid622

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Building consistent, accessible, and responsive user interfaces from scratch is slow and error-prone. This Skill provides a complete workflow for creating React-based UIs using shadcn/ui components (built on Radix UI primitives) styled with Tailwind CSS, including theming, dark mode, and responsive layouts. ## Core Features & Use Cases - Component Library Guidance: Full catalog of shadcn/ui components (forms, dialogs, tables, navigation, command palettes) with installation and composition patterns. - Tailwind Styling System: Utility-first styling references covering layout, spacing, typography, responsive breakpoints, and theme customization via CSS variables. - Accessibility & Theming: ARIA patterns, keyboard navigation, dark mode setup with next-themes, and CSS variable-based color systems. - Automation Scripts: Python utilities to install shadcn/ui components and generate Tailwind configurations. - Use Case: A developer building a Next.js dashboard can scaffold accessible cards, forms with Zod validation, and a dark-mode toggle in minutes using the provided patterns and CLI scripts. ## Quick Start Ask the assistant to create a responsive dashboard page with shadcn/ui cards, a validated login form, and dark mode support using Tailwind CSS.

Frequently Asked Questions about ui-styling

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

FAQPage Schema
How do I add shadcn/ui components to my React project?▼

Run npx shadcn@latest init to configure your project, then use npx shadcn@latest add followed by component names like button, card, or dialog. Components are copied into your codebase under components/ui with full TypeScript support.

How do I implement dark mode with shadcn/ui and Tailwind?▼

Install next-themes, wrap your app in a ThemeProvider with attribute set to class, and define dark theme CSS variables under a .dark selector in globals.css. Components then respond to dark: utility variants automatically.

What is the difference between shadcn/ui and other component libraries?▼

shadcn/ui uses a copy-paste distribution model where components live in your own codebase rather than a node_modules package. It is built on Radix UI primitives for accessibility and styled with Tailwind CSS, giving full customization control.

Does shadcn/ui support form validation?▼

Yes, the Form component integrates React Hook Form with Zod schema validation through zodResolver. It provides FormField, FormMessage, and aria-invalid attributes so validation errors are announced to screen readers.

Are shadcn/ui components accessible by default?▼

Yes, components are built on Radix UI primitives that follow WAI-ARIA design patterns, including keyboard navigation, focus trapping in dialogs, and screen reader announcements. You should still verify color contrast and add aria-labels to icon-only buttons.

How do I customize Tailwind CSS theme colors?▼

Define custom tokens using the @theme directive in your CSS file, such as --color-brand-500 in oklch format, or extend the theme in tailwind.config.ts. For shadcn/ui projects, update the HSL CSS variables in globals.css to change the palette globally.

Related Skills

Explore More Software Engineering Skills→
getprobe-devgetprobe-dev
4

shadcn-ui

Install and customize React UI components via a CLI with Tailwind CSS and Radix UI.

Official
Advanced
hendrax5hendrax5

phase-6-ui-integration

Implement frontend UI and integrate it with backend APIs.

Community
Intermediate
BRANDNEWSHVTBRANDNEWSHVT

accessibility-audit

Identify and fix WCAG 2.1 AA accessibility gaps in frontend user interfaces.

Official
Advanced
grimmolfgrimmolf

Frontend CSS

Apply standardized CSS practices to resolve inconsistent frontend styling.

Community
Basic