skills.rest
danieliudi
danieliudiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-styling

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

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

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 design tokens. This Skill provides structured guidance for composing production interfaces with shadcn/ui components (built on Radix UI) and Tailwind CSS, including theming, dark mode, and accessibility patterns. ## Core Features & Use Cases - Component Catalog: Reference guides for forms, dialogs, tables, navigation, and feedback components with copy-paste React/TypeScript examples. - Theming & Dark Mode: CSS variable system, next-themes integration, color palette customization, and component variant extension. - Responsive & Accessible Patterns: Mobile-first breakpoint strategies, keyboard navigation, screen reader support, and WCAG contrast guidance. - Automation Scripts: Python CLI tools to install shadcn/ui components and generate Tailwind configuration files. - Use Case: You need a dashboard with a validated login form, dark mode toggle, and responsive card grid. The Skill provides the exact component composition, form schema with react-hook-form and Zod, and responsive Tailwind classes. ## Quick Start Ask the assistant to build a responsive dashboard card layout with a validated form using shadcn/ui components and 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 npx shadcn@latest add button card dialog to install specific components. Components are copied into your components/ui directory with automatic dependency handling, and the included shadcn_add.py script wraps this for programmatic use.

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

Install next-themes, wrap your app in a ThemeProvider with attribute="class", and define light and dark CSS variable sets in globals.css. Tailwind's dark: variant then responds to the .dark class on the html element, and a toggle component switches themes.

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

Yes, shadcn/ui supports Vite, Remix, and Astro in addition to Next.js. For Vite, install tailwindcss with @tailwindcss/vite as a plugin and import the Tailwind CSS entry in your stylesheet.

How do I validate forms with shadcn/ui components?▼

Combine the Form component with react-hook-form and zodResolver from @hookform/resolvers. Define a Zod schema, pass it to useForm, and wire FormField, FormControl, and FormMessage so validation errors display accessibly next to each input.

Are shadcn/ui components accessible by default?▼

Yes, they are built on Radix UI primitives that follow WAI-ARIA design patterns, providing keyboard navigation, focus trapping in dialogs, and screen reader announcements out of the box. You should still add aria-labels to icon-only buttons and verify color contrast meets WCAG AA.

Why do my Tailwind classes not apply after customization?▼

Common causes are missing file paths in the content array of tailwind.config, dynamically constructed class names that the build-time scanner cannot detect, or custom tokens not declared in the @theme block. Use the safelist option for classes generated at runtime.

Related Skills

Explore More Design & Creative Skills→
getprobe-devgetprobe-dev
4

shadcn-ui

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

Official
Advanced
TugoukezhangTugoukezhang
8

cloudbase

Build, deploy, and manage web apps, mini programs, and backends with CloudBase.

Community
Advanced
contentbugvideoeditingcontentbugvideoediting

browser-qa

Automate browser-based visual testing and UI interaction verification across breakpoints.

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