skills.rest
Kentox493
Kentox493COMMUNITY
Explore all skills by this author →
GitHub

ui-styling

Build accessible React interfaces with shadcn/ui components and Tailwind CSS utilities.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires pytest, pytest-cov, pytest-mock, and includes scripts (resource) and references (resource) components.

What problem does it solve? Building consistent, accessible user interfaces from scratch is slow and error-prone. This Skill provides structured guidance for composing shadcn/ui components (built on Radix UI primitives) with Tailwind CSS utility styling, covering theming, dark mode, responsive layouts, and accessibility patterns in one place. ## Core Features & Use Cases - Component Implementation: Install and compose shadcn/ui components such as buttons, forms, dialogs, tables, and command palettes with TypeScript-safe patterns. - Styling & Theming: Apply Tailwind utility classes, configure CSS variables, customize color palettes, and implement dark mode with next-themes. - Accessibility & Responsiveness: Follow WAI-ARIA patterns for keyboard navigation, focus management, and screen readers, plus mobile-first responsive breakpoint design. - Use Case: When building a dashboard in a Vite + React project, use this Skill to scaffold cards, forms with Zod validation, and a responsive grid layout with dark mode support. ## Quick Start Use the ui-styling skill to build a responsive login form with shadcn/ui components, Tailwind styling, and dark mode support.

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 components/ui directory 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. Toggle themes by switching the class on the html element.

Does shadcn/ui work with Vite or only Next.js?▼

shadcn/ui works with Vite, Next.js, Remix, and Astro. For Vite, install tailwindcss with the @tailwindcss/vite plugin, import Tailwind in your CSS entry file, then run the shadcn init command to configure paths.

How do I make shadcn/ui forms accessible with validation?▼

Combine the Form component with react-hook-form and zodResolver for schema validation. Use FormLabel, FormControl, FormDescription, and FormMessage so errors are announced to screen readers via aria-invalid and aria-describedby.

What is the difference between Tailwind utility classes and @apply?▼

Utility classes are applied directly in markup for most styling, while @apply extracts repeated utility patterns into reusable CSS classes within @layer components. Use @apply sparingly, only for truly repeated patterns.

Why are my Tailwind classes not applying in production builds?▼

Tailwind purges unused classes at build time, so dynamically constructed class names get removed. Use complete class strings in source files or add dynamic patterns to the safelist in your Tailwind configuration.

Related Skills

Explore More Software Engineering Skills→
vobasevobase
59

shadcn-ui

Integrate shadcn/ui components into React projects with Tailwind CSS and TypeScript configuration.

Official
Intermediate
aryan083aryan083
1

express-serverless-api

Build, test, and deploy Express.js REST APIs with MongoDB on Vercel.

Community
Advanced
ojallingtonojallington

accessibility-auditor

Run Playwright-based accessibility, visual regression, and performance audits on a dashboard.

Community
Advanced
google-labs-codegoogle-labs-code
8.2k

shadcn-ui

Integrates and customizes shadcn/ui components in React applications using Tailwind CSS.

Official
Advanced