Guides building accessible, customizable UI with shadcn/ui as a code generation platform (not an npm dependency). Components are copied into your project via the CLI and fully owned. Supports Radix UI or Base UI primitives, Tailwind CSS 4 with oklch color tokens, React 19 direct ref patterns, and type-safe form validation with the Field component and Zod.
When to use: Adding shadcn/ui components, theming with CSS variables and oklch colors, building forms with React Hook Form or TanStack Form, creating custom registries, composing accessible component variants, setting up dark mode.
When NOT to use: Non-React frameworks (use shadcn-vue or shadcn-svelte instead), projects using a different component library (MUI, Chakra), projects not using Tailwind CSS.
Radix UI 또는 Base UI, Tailwind CSS 4 및 React 19와 함께 shadcn/ui를 사용하여 액세스 가능하고 사용자 정의 가능한 구성 요소 라이브러리를 구축합니다. 구성 요소 소유권, oklch CSS 테마, Field 및 Zod를 사용한 유형 안전 양식, CLI 워크플로 및 레지스트리 패턴을 다룹니다. shadcn/ui 구성 요소 추가, 테마 구성, Zod로 양식 작성, 사용자 정의 레지스트리 생성 또는 액세스 가능한 구성 요소 변형 구성 시 사용합니다. shadcn CLI, 다크 모드, 구성 요소 변형, 양식 유효성 검사에 사용합니다. 출처: oakoss/agent-skills.