skills.rest
mr-creative-hmh
mr-creative-hmhCOMMUNITY
Explore all skills by this author →
GitHub

ui-styling

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

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

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 structured guidance for composing production UIs with shadcn/ui components (built on Radix UI primitives) and Tailwind CSS, covering theming, dark mode, responsive layouts, and accessibility patterns. ## Core Features & Use Cases - Component Library Guidance: Complete catalog of shadcn/ui components (forms, dialogs, tables, navigation, toasts) with installation and composition patterns. - Tailwind Styling System: References for utility classes, responsive breakpoints, theme customization via @theme directives, and dark mode configuration. - Accessibility Patterns: ARIA attributes, keyboard navigation, focus management, and screen reader support built on Radix UI primitives. - Automation Scripts: Python helpers to install shadcn/ui components and generate Tailwind configuration files. - Use Case: A developer building a Next.js dashboard can scaffold accessible cards, forms with Zod validation, and a dark-mode toggle, then apply a custom brand color palette using CSS variables. ## Quick Start Ask the AI to build 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 add components with npx shadcn@latest add button card dialog. Components are copied into your components/ui directory with automatic dependency handling, and the included shadcn_add.py script can automate this.

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

Install next-themes, wrap your app in a ThemeProvider with attribute="class", and define dark theme CSS variables under a .dark selector in globals.css. A theme toggle button switches the class on the html element.

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.

How do I customize shadcn/ui theme colors?▼

Edit the HSL CSS variables in globals.css, such as --primary and --primary-foreground, for both :root and .dark selectors. You can also use the theme generator at ui.shadcn.com/themes or define multiple themes with data-theme attributes.

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 add aria-labels to icon-only buttons and verify color contrast.

What are the limitations of utility-first Tailwind styling?▼

Dynamically constructed class names are removed by build-time purging, so use the safelist config for dynamic classes. Highly repeated class strings should be extracted with @apply or component variants rather than duplicated.

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
dallaydallay

building-mcp-server-on-cloudflare

Build and deploy remote MCP servers on Cloudflare Workers with OAuth 2.1.

Official
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