skills.rest
haryelramalho
haryelramalhoCOMMUNITY
Explore all skills by this author →
Website𝕏@haryel_devGitHub

shadcn

Standardize shadcn/ui component development with Tailwind CSS and design tokens.

Updated May 28, 2026
Search Tags:#accessibility#design tokens#tailwind css#ui components#shadcn#compound components#radix ui
One-click install
npx skills add https://github.com/haryelramalho/skills --skill shadcn-haryelramalho
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/haryelramalho/skills/tree/main/skills/community/shadcn
Command: npx skills add https://github.com/haryelramalho/skills --skill shadcn-haryelramalho

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you build and customize shadcn/ui components without breaking theming, accessibility, or maintainability. It gives you a consistent set of rules for styling, composition, and extension across a UI codebase.

Core Features & Use Cases

  • Design Token Enforcement: Use semantic color tokens instead of hardcoded colors so components work correctly in light and dark themes.
  • Accessible Component Patterns: Preserve Radix UI behaviors, dialog titles, focus states, and keyboard navigation.
  • Compound Component Structure: Export subcomponents separately for cleaner composition and better tree-shaking.
  • Real-World Use Case: When adding a new dialog, button, or card variant, follow these patterns to keep the UI consistent, accessible, and easy to maintain.

Quick Start

Use this skill to review your shadcn component code and suggest the theme-safe, accessible changes needed to bring it in line with these guidelines.

Frequently Asked Questions about shadcn

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

FAQPage Schema
How do I build shadcn components without breaking dark mode theming?▼

To build shadcn components without breaking theming, you must use semantic design tokens instead of hardcoded colors. This ensures your UI components adapt correctly to both light and dark themes automatically.

What is the best way to customize Radix UI components with Tailwind CSS?▼

The best way to customize Radix UI components with Tailwind CSS is by using a compound component structure. This approach exports subcomponents separately to maintain accessibility attributes and ensure cleaner composition.

How do I preserve keyboard accessibility when extending shadcn component variants?▼

To preserve keyboard accessibility when extending shadcn component variants, you must maintain the original Radix UI behaviors. This includes keeping focus states, dialog titles, and keyboard navigation attributes intact during styling.

Why use design tokens instead of hardcoded colors in shadcn component development?▼

Using design tokens instead of hardcoded colors in shadcn component development ensures your interfaces are theme-safe. Semantic color tokens allow components to switch seamlessly between light and dark modes without manual style updates.

Can I use compound components to improve tree-shaking in my UI codebase?▼

Yes, you can use a compound component structure to improve tree-shaking in your UI codebase. Exporting subcomponents separately allows for cleaner composition and better maintainability across your application architecture.

Related Skills

Explore More Software Engineering Skills→
djankiesdjankies

using-theme-variables

Define and apply Tailwind v4 design tokens using the @theme directive.

Community
Advanced
djankiesdjankies

composing-components

Design reusable React 19 UI components using composition patterns.

Community
Advanced
pelcherspelchers

using-radix-primitives

Provide ready-to-use Radix primitives for accessible, composable React UI components with keyboard support and ARIA semantics.

Community
Intermediate
HouseGarofaloHouseGarofalo
3

radix-ui

Provide unstyled, accessible React component primitives for custom UI.

Official
Intermediate