skills.rest
JewelsHovan
JewelsHovanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

shadcn-ui-best-practices

Enforce shadcn-ui best practices for React and TypeScript projects.

Updated Nov 1, 2025
One-click install
npx skills add https://github.com/JewelsHovan/pain-plus-site --skill shadcn-ui-best-practices-jewelshovan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn-ui-best-practices
Source: https://github.com/JewelsHovan/pain-plus-site/tree/main/frontend/.claude/skills/shadcn-ui-best-practices
Command: npx skills add https://github.com/JewelsHovan/pain-plus-site --skill shadcn-ui-best-practices-jewelshovan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide helps teams consistently apply shadcn-ui best practices in React + TypeScript projects, preventing fragile edits to base components and promoting clean composition.

Core Features & Use Cases

  • Emphasizes composing UI from base shadcn-ui primitives rather than editing src/components/ui directly.
  • Encourages creating app-specific components in src/components/shared to encapsulate patterns.
  • Provides patterns for Card usage, semantic structure, and accessibility-friendly composition using CVA and Radix primitives.

Quick Start

Open shadcn-ui best-practices SKILL.md and incorporate the recommended composition and usage patterns into your codebase, then refactor existing components to align with the guidance.

Frequently Asked Questions about shadcn-ui-best-practices

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

FAQPage Schema
What is the best way to customize shadcn-ui components in a React project?▼

The best way to customize shadcn-ui components is by composing them into app-specific components in a shared directory, rather than directly editing the base primitives in your src/components/ui folder.

How do I structure shadcn-ui components to avoid fragile code updates?▼

To avoid fragile code, create app-specific components in src/components/shared. This encapsulates your patterns and keeps base shadcn-ui primitives untouched, ensuring cleaner composition and easier maintenance.

Do I need to use forwardRef when composing shadcn-ui components?▼

Yes, you need to use forwardRef for composed components. This requirement ensures proper ref forwarding when building encapsulated patterns on top of base shadcn-ui primitives in React.

How does CVA work with Radix primitives in shadcn-ui?▼

CVA manages variant styling while Radix primitives provide accessible, unstyled functionality. Leveraging both ensures accessibility-friendly composition and consistent visual patterns across your React application.

When should I create shared components for shadcn-ui Card usage?▼

You should create shared components for shadcn-ui Card usage when you need to establish semantic structure and reusable patterns, encapsulating them to promote clean composition and accessibility.

Can I edit base shadcn-ui primitives directly in src/components/ui?▼

You should not edit base shadcn-ui primitives directly in src/components/ui. Doing so creates fragile edits; instead, compose new UI elements from these base primitives to maintain stability.

Related Skills

netprtonynetprtony

shadcn-ui

Automate shadcn/ui component setup and usage in React and Next.js projects.

Community
Advanced
paialexpaialex
1

vercel-composition-patterns

Refactor React components by replacing boolean props with composition patterns.

Community
Intermediate
noodelskunnoodelskun

diagrammer-tailwind-style

Style React 18 web UIs with Tailwind CSS v4 and design tokens.

Community
Intermediate
MajesteitBartMajesteitBart
2

shadcn-ui-expert

Build accessible React UI components with shadcn-ui, Tailwind CSS, and Radix UI.

Community
Intermediate