skills.rest
pedronauck
pedronauckCOMMUNITY
Explore all skills by this author →
Website𝕏@pedronauckGitHub

shadcn

Build and customize shadcn/ui components with design tokens and Radix UI accessibility.

567|82|Updated Mar 15, 2026
Search Tags:#accessibility#react#design tokens#shadcn/ui#tailwind css#ui components
One-click install
npx skills add https://github.com/pedronauck/skills --skill shadcn-pedronauck
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/pedronauck/skills/tree/main/skills/shadcn
Command: npx skills add https://github.com/pedronauck/skills --skill shadcn-pedronauck

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the process of building and customizing user interface components using the shadcn/ui library, ensuring consistency, accessibility, and adherence to best practices.

Core Features & Use Cases

  • Component Customization: Modify and extend existing shadcn/ui components to fit project-specific design requirements.
  • Design Token Integration: Ensures all styling uses design tokens for theme compatibility and maintainability.
  • Accessibility Standards: Guides users to preserve Radix UI's accessibility features and implement proper ARIA attributes.
  • Use Case: When you need to add a new button component to your application, this Skill will guide you on how to add it using the shadcn/ui CLI, customize its variants, ensure it uses design tokens for theming, and preserve its accessibility features.

Quick Start

Use the shadcn skill to add a new button component to your project.

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 accessibility?▼

To customize shadcn/ui components without breaking accessibility, you should modify component variants using design tokens while preserving the underlying Radix UI primitives and ARIA attributes. This approach maintains flexible, maintainable, and accessible interfaces during UI component customization.

What are design tokens and how do they work with Tailwind CSS in shadcn/ui?▼

Design tokens in shadcn/ui are styling variables integrated with Tailwind CSS to ensure theme compatibility and maintainability. Using them involves mapping semantic styling decisions to CSS variables, allowing you to manage visual consistency across React UI components seamlessly.

Can I use compound component patterns when building React UI components with shadcn/ui?▼

Yes, you can use compound component patterns when building React UI components with shadcn/ui. This Skill guides developers on implementing these patterns alongside Radix UI primitives to create flexible and maintainable interfaces tailored to your project.

What's the best way to add a new button component using shadcn/ui and ensure it meets accessibility standards?▼

The best way to add a new button component using shadcn/ui is to use the CLI to generate it, customize its variants with design tokens, and ensure it preserves Radix UI's built-in accessibility features and ARIA attributes for full accessibility compliance.

Does shadcn/ui require Radix UI and Tailwind CSS for building accessible interfaces?▼

Yes, building accessible interfaces with shadcn/ui relies on integrating Radix UI primitives for accessibility features and Tailwind CSS for styling. This combination ensures your React components adhere to best practices and maintain design token usage.

Related Skills

Explore More Design & Creative Skills→
Mischio95Mischio95
1

shadcn-ui

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

Community
Advanced
QunnnnQunnnn

flutter-theming-apps

Configure Flutter application theming with Material 3 ThemeData and component APIs.

Community
Intermediate
locnbk2002locnbk2002
1

ui-styling

Style React interfaces with shadcn/ui components and Tailwind CSS.

Community
Intermediate
musujmusuj

phase-5-design-system

Develops platform-independent design systems with React/Next.js and Flutter support.

Community
Advanced