skills.rest
JBonfim
JBonfimCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

shadcn

Implement and customize shadcn/ui components with Tailwind tokens and Radix UI accessibility.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It prevents inconsistent UI implementation by enforcing shadcn/ui best practices, theme token usage, and Radix-based accessibility patterns while building and customizing components.

Core Features & Use Cases

  • Theme-safe styling with design tokens: Ensures components use semantic Tailwind tokens (e.g., bg-background, text-foreground, border-input) instead of hardcoded colors so dark mode and theme switching stay reliable.
  • Radix UI accessibility preservation: Guides correct usage of Dialog and focus management patterns so keyboard navigation and screen-reader semantics remain intact.
  • Maintainable component extension patterns: Promotes copy-paste ownership, safe variant/compound component exporting, and accessible customization (including extending props like loading states).

Quick Start

Use this skill when you are implementing or customizing shadcn/ui components that must follow the project’s theming, accessibility, and export/variant conventions.

Frequently Asked Questions about shadcn

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

FAQPage Schema
How do I customize shadcn/ui components without breaking dark mode?▼

Customize shadcn/ui components without breaking dark mode by applying semantic Tailwind design tokens like bg-background and text-foreground instead of hardcoded colors, ensuring reliable theme switching.

How do I extend shadcn/ui component variants and export compound components?▼

Extend shadcn/ui component variants and export compound components safely by following copy-paste ownership patterns, maintaining accessible prop extensions like loading states, and validating typecheck requirements for reliable integration.

Does shadcn/ui with Radix UI preserve keyboard navigation and screen-reader accessibility?▼

Yes, shadcn/ui with Radix UI preserves keyboard navigation and screen-reader accessibility by guiding correct Dialog usage and focus management patterns so semantics remain intact during component customization.

What is the best way to manage design tokens in Tailwind for shadcn/ui projects?▼

The best way to manage design tokens in Tailwind for shadcn/ui projects is enforcing design-token-only styling with semantic variables like border-input, preventing inconsistent UI implementation while maintaining theme safety.

Can I use shadcn/ui workflows for React projects that require strict accessibility and typecheck validation?▼

Yes, you can use shadcn/ui workflows for React projects requiring strict accessibility and typecheck validation, as the process preserves accessibility attributes and validates keyboard, typecheck, and test requirements for reliable integration.

Related Skills

Explore More Design & Creative Skills→
CJ-1981CJ-1981

moai-library-shadcn

Implement shadcn/ui components in React applications using Tailwind CSS.

Community
Advanced
JBonfimJBonfim

shadcn-ui

Configure shadcn/ui components with Tailwind theming and accessible patterns.

Community
Advanced
haryelramalhoharyelramalho

shadcn

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

Community
Intermediate
haryelramalhoharyelramalho

shadcn-ui

Implement accessible shadcn/ui component patterns for React projects.

Community
Advanced