skills.rest
MinhHoangDono
MinhHoangDonoCOMMUNITY
Explore all skills by this author →
GitHub

ui-styling

Style React interfaces with shadcn/ui and Tailwind CSS using token-driven theming.

Updated Mar 7, 2026
Search Tags:#accessibility#design tokens#shadcn/ui#tailwind css#dark mode#react components#ui styling
One-click install
npx skills add https://github.com/MinhHoangDono/antigravity-kit --skill ui-styling-minhhoangdono
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-styling
Source: https://github.com/MinhHoangDono/antigravity-kit/tree/main/.agent/skills/ui-styling
Command: npx skills add https://github.com/MinhHoangDono/antigravity-kit --skill ui-styling-minhhoangdono

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you build consistent, accessible, and themeable UI styling using shadcn/ui with Tailwind CSS, so you avoid ad-hoc markup, broken focus states, and inconsistent design tokens.

Core Features & Use Cases

  • Accessible shadcn/ui Composition: Use Radix-based primitives (dialogs, forms, tables, navigation) with correct component APIs for keyboard and screen-reader friendly behavior.
  • Tailwind-First, Tokenized Theming: Apply responsive, mobile-first utility patterns while using CSS variables for color and typography consistency, including dark mode via the .dark class.
  • Design-System Consistency: Standardize spacing and styling (avoid arbitrary values), extract repeated utility groups into reusable components, and keep globals.css as the single source of truth for theme tokens.

Use case example: You are developing a Next.js dashboard and need a dark-mode modal + form workflow with consistent spacing, proper focus rings, and tokenized colors across the app.

Quick Start

Initialize shadcn/ui, add the needed components (such as button and dialog), then compose them in React using the provided shadcn/ui component patterns with Tailwind classes that rely on the design tokens in globals.css.

Frequently Asked Questions about ui-styling

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I style accessible React components with Tailwind CSS and shadcn/ui?▼

To style accessible React components, use shadcn/ui composition patterns with Tailwind CSS utilities and token-driven CSS variables. This ensures keyboard focus, proper aria-labels, and theme consistency across dialogs, forms, and tables without fighting component APIs.

What is the best way to implement dark mode in a Next.js dashboard using shadcn/ui?▼

The best way to implement dark mode in Next.js is by applying the .dark class to toggle theme tokens. You manage these token-driven CSS variables in your globals.css file, allowing Tailwind CSS and shadcn/ui components to switch themes consistently across your application.

Can I use shadcn/ui components with Vite or Remix instead of Next.js?▼

Yes, you can use shadcn/ui components with Vite, Remix, or other React-based frameworks. The styling approach relies on Tailwind CSS and token-driven CSS variables rather than framework-specific features, ensuring your UI styling remains accessible and themeable across different React environments.

How do I maintain design system consistency when building UI with Tailwind CSS?▼

Maintain design system consistency by standardizing spacing and styling to avoid arbitrary Tailwind values. Extract repeated utility groups into reusable components and keep your globals.css as the single source of truth for theme tokens, ensuring consistent typography and color application throughout your React application.

Why do my shadcn/ui dialog forms have broken focus states and inconsistent styling?▼

Broken focus states and inconsistent styling often occur when fighting component APIs or using ad-hoc markup. Use correct shadcn/ui compositional patterns for Radix-based primitives, apply token-driven CSS variables, and ensure proper label associations and keyboard focus requirements are met for accessible behavior.

Related Skills

Explore More Design & Creative Skills→
EdgeHuntEdgeHunt

ck:ui-styling

Streamline React UI styling with shadcn/ui and Tailwind CSS design systems.

Official
Advanced
marcioaltoemarcioaltoe
14

ui-designer

Design and implement accessible React UI components with shadcn/ui and Tailwind CSS.

Community
Intermediate
CenredJunCenredJun

shadcn-ui

Scaffold accessible React UI components with shadcn CLI in Next.js projects.

Community
Advanced
ChenYCLChenYCL

web-artifacts-builder

Generate HTML artifacts with React, Tailwind CSS, and shadcn/ui components.

Community
Intermediate