skills.rest
Ramadan-Elgamal
Ramadan-ElgamalCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-styling

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Building consistent, accessible user interfaces from scratch requires deep knowledge of ARIA patterns, responsive design, and theme systems. This Skill provides structured guidance for composing shadcn/ui components with Tailwind CSS so you can ship polished interfaces without reinventing accessibility and styling patterns. ## Core Features & Use Cases - Component Implementation: Install and compose shadcn/ui components (forms, dialogs, tables, navigation) built on Radix UI primitives with full TypeScript support. - Theming & Dark Mode: Configure CSS variable-based themes, dark mode with next-themes, and custom color palettes across light and dark variants. - Responsive Layouts: Apply mobile-first Tailwind breakpoints, grid systems, and container queries for adaptive layouts. - Automation Scripts: Use Python scripts to install components and generate Tailwind configurations programmatically. - Use Case: When building a dashboard in a Next.js app, use this Skill to scaffold a responsive card grid with dark mode support, an accessible form with Zod validation, and a consistent theme in minutes. ## Quick Start Ask the AI to build a responsive dashboard page using shadcn/ui cards and buttons with dark mode support in your Next.js project.

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 add followed by component names like button, card, or dialog after initializing with npx shadcn@latest init. Components are copied into your components/ui directory with automatic dependency management.

How do I set up dark mode with shadcn/ui and Tailwind CSS?▼

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

Does shadcn/ui work with frameworks other than Next.js?▼

Yes, shadcn/ui supports Vite, Remix, and Astro in addition to Next.js. The CLI init command prompts for your framework and configures paths, TypeScript, and Tailwind accordingly.

Are shadcn/ui components accessible by default?▼

Yes, components are built on Radix UI primitives which follow WAI-ARIA design patterns. Keyboard navigation, focus management, and screen reader announcements are built in, though you should still verify color contrast and label icon-only buttons.

How do I customize shadcn/ui component styles?▼

Edit the component files directly in your components/ui directory, modify CSS variables in globals.css for theme-wide changes, or pass a className prop for one-off overrides. You can also add custom variants in the cva variant definitions.

Why is my Tailwind class not applying in production?▼

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

Related Skills

Explore More Design & Creative Skills→
shep-aishep-ai
241

shadcn-ui

Automate shadcn/ui component setup and usage in React projects.

Official
Intermediate
petbrainspetbrains
13

backend-trpc-openapi

Generate REST endpoints and OpenAPI documentation from tRPC routers.

Official
Intermediate
inbharataiinbharatai
22

accessibility-checker

Audit digital content for WCAG 2.2 compliance and accessibility issues.

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

shadcn-ui

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

Official
Advanced