skills.rest
rakibulism
rakibulismCOMMUNITY
Explore all skills by this author →
Website𝕏@rakibulismGitHub

shadcn-ui

Implement shadcn/ui components with Radix primitives, Tailwind styling, and CVA variants.

2|1|Updated May 17, 2026
Search Tags:#accessibility#react#components#shadcn/ui#tailwind#cva#radix
One-click install
npx skills add https://github.com/rakibulism/agent-skills-os --skill shadcn-ui-rakibulism
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn-ui
Source: https://github.com/rakibulism/agent-skills-os/tree/main/skills/shadcn-ui
Command: npx skills add https://github.com/rakibulism/agent-skills-os --skill shadcn-ui-rakibulism

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you create and adapt shadcn/ui components correctly, with consistent styling, accessibility-friendly patterns, and the right component architecture for React applications.

Core Features & Use Cases

  • Component Construction: Build buttons, cards, dialogs, inputs, and other UI pieces using Radix primitives, Tailwind classes, and data-slot conventions.
  • Variant Management: Define and type CVA-based variants for size, intent, and compound states without duplicating component logic.
  • Composition Patterns: Use asChild, compound components, and context when a component needs to render different elements or share state across parts.
  • Styling Guidance: Apply modern Tailwind selectors, semantic tokens, accessibility states, and dark mode-friendly styling in a predictable way.
  • Use Case: A developer can ask for a new dialog or sidebar component and get an implementation that matches shadcn/ui conventions and integrates cleanly with an existing React app.

Quick Start

Ask for a shadcn/ui component implementation or refactor that follows the documented patterns, variants, and accessibility conventions.

Frequently Asked Questions about shadcn-ui

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

FAQPage Schema
How do I build accessible React components using Radix primitives and Tailwind?▼

Build accessible React components by combining Radix primitives for behavior, Tailwind for styling, and data-slot conventions for structure. This approach ensures predictable variant typing and semantic accessibility states across your UI pieces.

What is the best way to define CVA variants for shadcn/ui components?▼

Define CVA variants for shadcn/ui components by typing size, intent, and compound states without duplicating component logic. This variant management ensures consistent styling and predictable behavior across buttons, cards, and dialogs.

Can I use compound component patterns with Radix and Tailwind in React?▼

Yes, you can use compound component patterns, asChild polymorphic rendering, and context sharing with Radix and Tailwind in React. This composition pattern allows components to render different elements while sharing state across parts cleanly.

How do I apply dark mode-friendly styling and semantic tokens in Tailwind for React?▼

Apply dark mode-friendly styling in Tailwind by using modern selectors, semantic tokens, and accessibility states. This method provides predictable, variant-driven styling that adapts cleanly to dark mode within your React application.

Does this approach support refactoring existing React UI components to match shadcn/ui conventions?▼

Yes, this approach supports refactoring existing React UI components to match shadcn/ui conventions. It aligns component architecture using data-slot targeting, predictable variant typing, and accessibility-friendly patterns for consistent design system code.

Why do my custom React dialog components lack consistent accessibility states?▼

Custom React dialog components lack consistent accessibility states when they bypass Radix primitives and data-slot conventions. Implementing shadcn/ui patterns ensures proper accessibility state management and predictable variant typing.

Related Skills

Explore More Software Engineering Skills→
Mischio95Mischio95
1

shadcn-ui

Set up shadcn/ui components and forms with React Hook Form and Zod.

Community
Advanced
anderskevanderskev
75

shadcn-code-review

Review shadcn/ui React components for CVA patterns, asChild composition, accessibility states, and data-slot usage.

Community
Intermediate
haryelramalhoharyelramalho

shadcn

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

Community
Intermediate
tenequmtenequm
32

styling-with-tailwind

Apply Tailwind CSS utility classes and shadcn/ui patterns to style React interfaces.

Community
Intermediate