skills.rest
prasanna591
prasanna591COMMUNITY
Explore all skills by this author →
GitHub

ui-styling

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

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

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 requires deep knowledge of component libraries, CSS frameworks, and design systems, which slows down frontend development. ## Core Features & Use Cases - Accessible Component Library: Install and compose shadcn/ui components (dialogs, forms, tables, dropdowns) built on Radix UI primitives with keyboard navigation and screen reader support. - Utility-First Styling: Apply Tailwind CSS utilities for layout, spacing, typography, responsive breakpoints, and dark mode theming via CSS variables. - Automation Scripts: Use Python scripts to install shadcn/ui components and generate Tailwind configuration files programmatically. - Use Case: When building a Next.js dashboard, use this Skill to scaffold a responsive card grid with dark mode support, add a validated login form with react-hook-form and Zod, and ensure all interactive elements meet WCAG accessibility standards. ## Quick Start Use the ui-styling skill to create a responsive dashboard page with shadcn/ui cards, a dark mode toggle, and an accessible contact form.

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 project?▼

Run npx shadcn@latest add followed by component names, such as button, card, or dialog. Components install 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 the class attribute, and define dark theme CSS variables under a .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 following WAI-ARIA design patterns. They include keyboard navigation, focus management, focus trapping in dialogs, and screen reader announcements out of the box.

How do I customize shadcn/ui component styles?▼

Modify the component source directly since components live in your codebase, pass className overrides for one-off changes, or edit CSS variables in globals.css to change the theme globally. You can also add custom variants using class-variance-authority.

Why are my Tailwind classes not being applied?▼

Classes are missing when the content configuration does not scan your files or when class names are constructed dynamically at runtime. Verify your tailwind.config content globs cover all source files and use complete static class strings.

Related Skills

Explore More Software Engineering Skills→
catalinakarstulovic2-aicatalinakarstulovic2-ai

shadcn-ui

Generate copy-paste React UI components styled with Tailwind CSS.

Community
Advanced
aryan083aryan083
1

express-serverless-api

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

Community
Advanced
MolcajeteAIMolcajeteAI
2

react-testing

Guide React component testing with Testing Library, user-event, and Vitest.

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

shadcn-ui

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

Official
Advanced