skills.rest
compozy
compozyOFFICIAL
Explore all skills by this author →
Website𝕏@compozyaiGitHub

shadcn

Guide shadcn/ui component development with design tokens and Radix UI accessibility.

2.5k|134|Updated Mar 28, 2026
Search Tags:#theming#accessibility#shadcn#ui-components#design-tokens#radix-ui
One-click install
npx skills add https://github.com/compozy/compozy --skill shadcn-compozy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/compozy/compozy/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/compozy/compozy --skill shadcn-compozy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Shadcn/ui guidelines provide a cohesive, reusable set of patterns to build accessible, design-token-driven UI components across a codebase, reducing divergence and maintenance overhead.

Core Features & Use Cases

  • Design-token driven theming and color system aligned with Radix UI primitives.
  • Correct compound component exports and modular extension patterns.
  • Accessibility guarantees, keyboard navigation guidance, and semantic markup recommendations.

Quick Start

Follow the reference patterns in references/patterns.md to apply the core shadcn/ui guidelines when implementing components.

Frequently Asked Questions about shadcn

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

FAQPage Schema
How do I use design tokens for theming shadcn/ui components in React?▼

Design tokens drive theming in shadcn/ui by aligning color systems with Radix UI primitives. You apply these tokens to ensure consistent visual styles across your React components, reducing divergence and maintenance overhead in your codebase.

What is the best way to structure compound component exports for shadcn/ui?▼

The best way to structure compound component exports is through modular extension patterns. Separating exports for compound components ensures reusability and maintainability when building complex UI elements in your React project.

How do I add accessibility and keyboard navigation to Radix UI components?▼

Accessibility in Radix UI components is achieved by following semantic markup recommendations and keyboard navigation guidance. Applying these patterns guarantees proper interaction and compliance with accessibility standards across your shadcn/ui implementation.

Can I use shadcn/ui guidelines for existing React projects?▼

You can apply shadcn/ui guidelines to existing React projects by referencing established patterns. These guidelines provide a cohesive set of reusable patterns to build accessible, design-token-driven components without requiring external dependencies.

Why should I use shadcn/ui instead of other React UI component libraries?▼

You should use shadcn/ui guidelines to reduce divergence and maintenance overhead across your codebase. It provides cohesive patterns for building accessible, design-token-driven components, unlike other category-level alternatives that may lack integrated Radix UI accessibility considerations.

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
wpgauravwpgaurav
14

ckm:ui-styling

Generate accessible React UIs with shadcn/ui, Radix UI, and Tailwind CSS.

Community
Intermediate
bykoleksii-hardobykoleksii-hardo

ckm:ui-styling

Create and style user interfaces with shadcn/ui components and Tailwind CSS.

Community
Advanced
jikimejikime
5

jikime-library-shadcn

Implement shadcn/ui components with Tailwind CSS and Radix UI in React applications.

Community
Advanced