83.3K+다운로드
사용 가이드로 건너뛰기
shadcn-ui작성자 Google Labs

shadcn UI 스킬.

UI 디자인을 위한 Claude Code 및 Codex 스킬: shadcn/ui 컴포넌트 통합 및 커스터마이징: 탐색, 설치, 모범 사례.

  • Web & UI
  • UI 코드
OpenDesign 다운로드사용 가이드 보기
google-labs-code/stitch-skills · plugins/stitch-build/skills/shadcn-ui/SKILL.mdSKILL.md
--- name: shadcn-ui description: Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices. --- ## Core Principles ## Component Discovery and Installation ## Project Setup ## Component Architecture ## Customization Best Practices ## Blocks and Complex Components
2026-09-14에 업스트림 파일에서 읽은 전면 메타데이터 및 섹션 제목 · 전체 9,117자

01 기능

Claude Code와 Codex에서 shadcn-ui 스킬이 하는 일

요약, 워크플로, 산출물을 모두 해당 스킬의 SKILL.md에서 그대로 읽어 정리한 내용입니다.

SKILL.md에서2026-09-14 읽음 · 실행 기록 아님

스킬 자체의 표현으로

이 스킬은 Radix UI 또는 Base UI와 Tailwind CSS로 제작된 접근 가능하고 커스터마이징 가능한 컴포넌트 모음인 shadcn/ui로 애플리케이션을 구축하는 데 전문적인 지침을 에이전트에게 제공합니다. shadcn MCP 도구를 통한 컴포넌트 탐색, CLI를 이용한 설치 또는 수동 통합, create 및 init 명령을 통한 프로젝트 설정, style, baseColor, cssVariables, rsc, rtl과 같은 components.json 옵션을 다룹니다.

이어서 components/ui/ 파일 구조와 cn() 헬퍼를 설명하고, app/globals.css의 CSS 변수, class-variance-authority 변형, 래퍼 컴포넌트를 통한 커스터마이징을 다룹니다. 블록은 카테고리별로 정리되며, 접근성 규칙, 일반적인 폼·다이얼로그·테이블 패턴, 문제 해결, 5단계 검증 목록이 이어집니다.

산출물

  • components/ui/에 작성되어 임포트에 연결되는 컴포넌트 소스 파일입니다.
  • 설정과 추가된 컴포넌트를 반영하여 업데이트된 components.json입니다.
  • 대시보드나 로그인 흐름과 같은 다중 파일 인터페이스를 위해 가져온 블록 소스 코드입니다.
  • 예를 들어 components/custom-button.tsx와 같은 사용자 자신의 래퍼 컴포넌트 파일입니다.
예시 프롬프트 보기 ↗

작동 방식

  1. 01
    먼저 카탈로그 살펴보기

    이름을 추측하지 말고 list_components, get_component_metadata, get_component_demo 등 shadcn MCP 도구로 사용 가능한 컴포넌트를 살펴봅니다.

  2. 02
    CLI로 컴포넌트 추가하기

    권장하는 방법은 add 명령어를 사용하는 것으로, 설정에 맞게 조정된 소스를 다운로드하고 의존성을 설치한 뒤 components/ui/에 파일을 배치합니다.

  3. 03
    또는 소스를 직접 통합하기

    직접 통합하려면 get_component로 코드를 가져와 파일을 직접 생성하고, 피어 의존성을 설치하고, import 문을 조정합니다.

  4. 04
    프로젝트 설정 초기화하기

    신규 프로젝트는 create로 스타일, 폰트, 컴포넌트 라이브러리를 미리 선택하고, 기존 프로젝트는 init을 실행하여 components.json을 작성합니다.

  5. 05
    CSS 변수로 테마 설정하기

    색상은 Tailwind 설정과 CSS 변수에 정의되며, .dark 블록이 다크 모드 오버라이드를 제공합니다.

  6. 06
    커밋 전에 검증하기

    타입 체크, 린트, 접근성 테스트를 수행하고 라이트/다크 모드와 breakpoint를 확인합니다.

02 적합성 확인

shadcn-ui Skill 사용 시점

이러한 종류의 UI 디자인 작업에는 Claude Code 또는 Codex에서 shadcn-ui skill을 사용하십시오. 적합성과 제한 사항은 skill 자체 파일에서 가져왔습니다.

적합한 경우

  • 스타일, 폰트, 컴포넌트 라이브러리를 사전에 결정해야 하는 신규 프로젝트를 시작하는 경우입니다.
  • components.json 설정이 필요한 기존 코드베이스에 shadcn/ui를 도입하는 경우입니다.
  • components.json에 선언된 비공개 또는 팀 레지스트리를 대상으로 작업하거나, 공개 Registry Directory를 살펴보는 경우입니다.
  • 인증 흐름이나 대시보드 같은 큰 화면을 미리 만들어진 블록으로 구성하는 경우입니다.
  • 키보드 내비게이션, ARIA 속성, 포커스 관리가 타협할 수 없는 요소인 프로젝트입니다.

한계 인지하기

  • 컴포넌트와 프리미티브 버전이 서로 어긋날 수 있어, 업그레이드 시 문제가 생기고 릴리스 노트를 확인해야 합니다.

제공할 사항

  • 프리미티브 라이브러리Radix UI 또는 Base UI 중 선택하며, 다운로드되는 소스는 해당 선택에 맞게 조정됩니다.
  • 레지스트리 이름기본 레지스트리 외에 추가로 설정된 것이 있다면, 항목을 가져오기 전에 사용 가능한 목록을 먼저 확인합니다.
  • 블록 카테고리선택적 카테고리 필터를 사용하면 소스를 가져오기 전에 나열되는 블록 범위를 좁힐 수 있습니다.

03 스킬 내부

shadcn-ui 스킬이 Claude Code와 Codex에 제시하는 규칙

SKILL.md가 에이전트를 위해 설정하는 7가지 구체적 지침, 기본값, 한도 — 결과를 바꾸는 파일의 부분

  1. 컴포넌트 코드를 직접 소유하기

    컴포넌트를 통째로 업그레이드해야 하는 의존성이 아니라, 복사해 온 소스로 취급하고 자유롭게 다시 작성할 수 있다고 여기며, 스타일과 동작, 구조를 자유롭게 변경할 수 있습니다.

  2. Components/ui/에 래퍼를 두지 않기

    조합되거나 확장된 컴포넌트는 components/에 두며, shadcn 컴포넌트 자체를 담는 components/ui/에는 두지 않습니다.

  3. Cn()으로 클래스 병합하기

    모든 shadcn 컴포넌트는 clsx와 tailwind-merge를 결합한 cn() 헬퍼를 사용하므로 오버라이드가 충돌하지 않습니다.

  4. Cva로 변형(Variant) 표현하기

    variant와 size 로직은 class-variance-authority에 속하며, defaultVariants가 아무 값도 전달되지 않았을 때 적용할 variant와 size를 선언합니다.

  5. 커스터마이징 중에도 접근성 유지하기

    ARIA 속성을 유지하고, 키보드 핸들러를 보존하며, 스크린 리더로 테스트하고, 눈에 보이는 포커스 표시를 유지합니다.

  6. 런타임 요구 사항 준수하기

    shadcn/ui v4는 React 18 이상이 필요하며, Next.js 프로젝트에서는 Next.js 13 이상이 필요합니다. 일부 컴포넌트는 특정 Radix UI 버전을 고정하기도 합니다.

  7. 수동 설치 시 피어 의존성은 직접 설치하기

    수동 통합이란 CLI가 대신 처리해 주는 것이 아니라 피어 의존성을 직접 해결하고 임포트를 직접 수정하는 것을 의미합니다.

04 활용하기

Claude Code 또는 Codex에 shadcn-ui 설치

npx skills add 명령 한 번 실행 후, 에이전트에서 첫 번째 작업을 수행하고 결과 체크리스트를 확인합니다.

Claude Code, Codex 또는 사용 중인 Agent에 shadcn-ui 추가

프로젝트에서 실행합니다. 설치 프로그램이 어떤 에이전트에 추가할지 묻습니다.

Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill shadcn-ui

plugins/stitch-build/skills/shadcn-ui/SKILL.md에 대한 일반적인 skills CLI 형식입니다. 저장소마다 자체 경로를 문서화할 수 있습니다.

스킬에 첫 UI 디자인 작업 부여하기

스킬 자체의 용어로 작성되었습니다. 대괄호 부분은 각자의 자료로 교체합니다.

Starter prompt
Set up shadcn/ui in my existing [Next.js app] with the new-york style and zinc base color, then add Button, Card and Dialog. Use the login block for the sign-in page, and wrap Button in a LoadingButton in components/ that shows a spinner while [the form submission] is pending. Keep the ARIA attributes and keyboard handling intact.

출처: 스킬 자체의 용어로 SKILL.md에서 작성했습니다.

첫 번째 결과 확인

SKILL.md 자체가 올바른 결과의 모습으로 제시하는 내용:

  • 프로젝트 린터를 실행하여 복사한 소스의 스타일 문제를 확인합니다.
  • axe DevTools 같은 도구로 접근성을 확인합니다.
  • 라이트 모드와 다크 모드 모두에서 시각적으로 검토합니다.
  • 여러 브레이크포인트에서 동작을 확인합니다.

OpenDesign에서는 shadcn-ui가 기본 제공됩니다: Plugins → Skills에서 상단 바에서 선택합니다.

OpenDesign 다운로드빠른 시작 가이드 읽기

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

이 페이지의 사실이 어디에서 왔으며 언제 마지막으로 확인되었는지 안내합니다.

Author
Google Labs
Repository
github.com/google-labs-code/stitch-skills 브랜치 main
스킬 파일
plugins/stitch-build/skills/shadcn-ui/SKILL.md 검증 시점에 콘텐츠 체크섬이 기록되었습니다. 커밋 0337446
License
Apache-2.0 LICENSE에서 확인.
리포지토리 스타
8,304 이 카탈로그에 12개의 skill을 포함하는 google-labs-code/stitch-skills 저장소 전체에 대해 2026-09-14에 촬영한 GitHub 스냅샷입니다. shadcn-ui에 대한 평가나 사용 수가 아닙니다.
OpenDesign에서 검증됨
2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 별 개수가 확인되었습니다. OpenDesign 메인에 번들로 포함됨(2026-08-28 확인됨); 이 페이지에 실시간 실행이 기록되지 않았습니다.

SKILL.md 내부

  1. 핵심 원칙직접 소유하는 복사된 코드가 의존성보다 나은 이유.
  2. 컴포넌트 탐색 및 설치MCP 도구, CLI 대 수동 설치, 커스텀 레지스트리.
  3. 프로젝트 설정create와 init의 차이, components.json 옵션, 필수 의존성.
  4. 컴포넌트 아키텍처디렉터리 구조와 cn() 클래스 병합 유틸리티.
  5. 커스터마이징 모범 사례CSS 변수 테마 설정, cva 변형, components/ui/ 외부의 래퍼 컴포넌트.
  6. 블록 및 복합 컴포넌트카테고리별 다중 파일 블록 목록 조회, 가져오기, 설치.
  7. 접근성보존해야 할 Radix 기반 키보드, ARIA, 포커스 및 비활성화 동작입니다.
  8. 일반적인 패턴폼, 다이얼로그, 데이터 테이블을 위한 가져오기 레시피입니다.
  9. 문제 해결가져오기, 스타일 충돌, 의존성 및 버전 문제에 대한 해결책입니다.
  10. 검증 및 품질타입 검사부터 반응형 QA까지 다섯 가지 커밋 전 점검 항목입니다.
  11. 리소스설정, 카탈로그, 커스터마이징 및 마이그레이션 참조 파일입니다.
  12. 예제예제 구현과 폼, 대시보드, 인증, 데이터 테이블 패턴입니다.
스킬 자체 설명
"shadcn/ui 컴포넌트 통합 및 애플리케이션 구축을 위한 전문 가이드: 컴포넌트 검색, 설치, 커스터마이징 및 모범 사례를 포함합니다."

SKILL.md의 front-matter 설명입니다. 전체 파일은 약 9,117자입니다. GitHub에서 전체 파일 읽기.

06 설치하기 전에

shadcn-ui 스킬에 대한 질문

이 답변은 2026-09-14 기준으로 확인한 SKILL.md 내용을 근거로 하며, 실행 기록을 바탕으로 한 것이 아닙니다.

Radix UI인가, Base UI인가?

둘 다 가능합니다. 구성 파일에서 프리미티브를 선택하면 CLI가 다운로드한 소스를 그에 맞게 조정합니다. 설명된 접근성 보장은 Radix UI 프리미티브로 만들어진 컴포넌트에 한정됩니다.

shadcn UI

실제 UI 디자인 작업에서 shadcn-ui를 실행합니다.

shadcn-ui skill은 OpenDesign에 포함되어 있습니다. 앱을 다운로드하고 Plugins → Skills에서 skill을 선택한 다음 위의 프롬프트를 붙여넣고 결과를 확인하기 전에 계획을 읽으십시오.

OpenDesign 다운로드모든 스킬 보기
터미널
npx skills add https://github.com/google-labs-code/stitch-skills --skill shadcn-ui