98.8K+다운로드
사용 가이드로 건너뛰기
shadcn작성자 shadcn

shadcn 스킬.

UI 디자인을 위한 Claude Code 및 Codex 스킬: 프로젝트에서 shadcn 컴포넌트를 추가, 검색, 수정, 스타일링 및 구성합니다.

  • Web & UI
  • UI 코드
OpenDesign 다운로드사용 가이드 보기
shadcn-ui/ui · skills/shadcn/SKILL.mdSKILL.md
--- name: shadcn description: Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset". --- ## Current Project Context ## Principles ## Critical Rules ## Key Patterns ## Component Selection ## Key Fields
2026-09-14에 업스트림 파일에서 읽은 전면 메타데이터 및 섹션 제목 · 전체 19,427자

01 기능

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

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

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

스킬 자체의 표현으로

이 스킬은 컴포넌트를 추가, 검색, 수정, 조합하여 shadcn/ui 프로젝트를 관리합니다. components.json에서 실시간 프로젝트 컨텍스트를 주입하고, 폼, 스타일링, 조합, 아이콘, 채팅 UI에 대해 프레임워크별 규칙을 적용하며, 모든 작업에 shadcn CLI를 사용합니다. 컴포넌트는 npx shadcn@latest(또는 프로젝트의 패키지 러너)를 통해 소스 코드로 설치됩니다.

이 스킬은 shadcn/ui, 컴포넌트 레지스트리, 프리셋 코드 또는 components.json 파일이 있는 모든 프로젝트에서 작업할 때 적용됩니다. RSC 지시문, Tailwind v3/v4, Base UI 대 Radix 프리미티브, 아이콘 라이브러리 감지, 모노레포 레이아웃을 다룹니다. 모든 명령어는 프로젝트의 실제 별칭, 패키지 매니저, 해석된 경로를 참조합니다.

산출물

  • 프로젝트의 해석된 ui 경로에 추가된 shadcn 컴포넌트의 소스 코드 파일
  • 업데이트 시 병합된 컴포넌트 파일로, 로컬 변경 사항을 유지하면서 업스트림 업데이트를 적용합니다
예시 프롬프트 보기 ↗

작동 방식

  1. 01
    프로젝트 컨텍스트 주입

    npx shadcn@latest info --json을 실행하여 프로젝트 설정, 설치된 컴포넌트, 별칭, RSC 플래그, Tailwind 버전, 아이콘 라이브러리, 베이스(radix 또는 base), 해석된 경로를 가져옵니다.

  2. 02
    커스텀 UI를 작성하기 전에 레지스트리 검색하기

    npx shadcn@latest search를 사용하여 shadcn 레지스트리와 커뮤니티 레지스트리에서 필요에 맞는 기존 컴포넌트를 확인합니다.

  3. 03
    컴포넌트 문서 및 예제 가져오기

    npx shadcn@latest docs <component>를 실행하여 문서와 예제 URL을 가져온 다음, 컴포넌트를 생성하거나 수정하기 전에 이를 확인하여 올바른 API 사용법을 검증합니다.

  4. 04
    CLI로 컴포넌트 추가 또는 업데이트하기

    npx shadcn@latest add를 사용하여 컴포넌트를 설치합니다.

  5. 05
    타사 컴포넌트의 임포트 수정하기

    커뮤니티 레지스트리에서 컴포넌트를 추가한 후, UI가 아닌 파일에서 @/components/ui/...와 같은 하드코딩된 경로를 확인합니다.

  6. 06
    추가된 컴포넌트 검토 및 확인하기

    추가된 모든 파일을 읽어 하위 컴포넌트 누락, 잘못된 구성, 핵심 규칙 위반, 아이콘 import 불일치를 확인합니다.

02 적합성 확인

shadcn Skill을 사용하는 경우

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

적합한 경우

  • components.json 파일이 있는 기존 프로젝트에서 shadcn/ui 컴포넌트로 UI를 구축하는 경우
  • nova나 vega 같은 프리셋 코드 또는 named preset으로 새 shadcn 프로젝트를 초기화하는 경우
  • MessageScroller, Message, Bubble, Attachment, Marker를 사용해 채팅 또는 대화 인터페이스를 구축하는 경우

한계 인지하기

  • CLI를 사용하지 않고 GitHub에서 컴포넌트 파일을 수동으로 가져오는 경우
  • 사용자가 어떤 레지스트리를 사용할지 지정하지 않았을 때 기본값으로 설정하는 경우
  • 사용자의 명시적 승인 없이 --overwrite로 컴포넌트를 업데이트하는 경우
  • 프로젝트 컨텍스트에 없는 기능, 통합, 파일 이름을 지어내는 경우

제공할 사항

  • 컴포넌트 또는 블록 이름추가하거나 검색할 shadcn 컴포넌트 이름(button, dialog, select) 또는 레지스트리 항목(@magicui/shimmer-button, owner/repo/item).
  • 프리셋 코드 또는 named presetui.shadcn.com에서 가져온 버전 접두사가 붙은 base62 문자열(예: a2r6bw), 또는 init이나 apply용 named preset(nova, vega, maia, lyra, mira, luma).

03 스킬 내부

shadcn Skill이 Claude Code와 Codex에 부여하는 규칙

SKILL.md가 에이전트에게 설정하는 8가지 구체적인 지시, 기본값, 제한 — 결과를 바꾸는 파일의 부분입니다.

  1. gap-*를 사용하고, space-x-*나 space-y-*는 절대 사용하지 않습니다

    flex 자식 요소 사이의 간격에는 gap-*를 사용합니다. 세로 스택에는 flex flex-col gap-*를 사용합니다. space-x-*와 space-y-*는 절대 허용되지 않습니다.

  2. 폼은 FieldGroup + Field를 사용합니다

    폼 레이아웃은 FieldGroup과 Field 컴포넌트를 사용해야 합니다. 폼 레이아웃에 space-y-*나 grid gap-*가 있는 원시 div를 절대 사용하지 마십시오.

  3. 버튼 안의 아이콘은 data-icon을 사용합니다

    Button 내부의 아이콘에는 data-icon="inline-start" 또는 data-icon="inline-end"가 있어야 합니다. 컴포넌트 내부 아이콘에 size-4나 w-4 h-4 같은 크기 클래스는 사용하지 않습니다.

  4. 항목은 항상 해당 그룹 안에 있어야 합니다

    SelectItem은 SelectGroup 안에, DropdownMenuItem은 DropdownMenuGroup 안에, CommandItem은 CommandGroup 안에 위치합니다. 항목을 직접 렌더링하지 않습니다.

  5. 원시 값이 아닌 시맨틱 색상 토큰을 사용합니다

    bg-primary, text-muted-foreground 등을 사용합니다. bg-blue-500이나 text-emerald-600 같은 원시 Tailwind 색상은 절대 사용하지 않습니다. 수동으로 dark: 색상을 재정의하지 않습니다.

  6. Dialog, Sheet, Drawer에는 항상 제목이 필요합니다

    접근성을 위해 DialogTitle, SheetTitle, DrawerTitle이 필수입니다. 제목을 시각적으로 숨겨야 하는 경우 className="sr-only"를 사용합니다.

  7. 프리셋 코드를 수동으로 디코딩하지 않습니다

    npx shadcn@latest preset decode <code>, preset url <code>, 또는 preset open <code>를 사용합니다. 프로젝트 인식 preset 감지에는 preset resolve를 사용합니다. preset URL을 직접 만들지 마십시오.

  8. 프로젝트의 패키지 러너로 모든 CLI 명령 실행

    프로젝트의 packageManager 필드에 따라 npx shadcn@latest, pnpm dlx shadcn@latest, 또는 bunx --bun shadcn@latest를 사용합니다. 프로젝트가 pnpm이나 bun을 사용하는 경우 npx를 하드코딩하지 마십시오.

04 활용하기

Claude Code 또는 Codex에 shadcn 설치

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

Claude Code, Codex 또는 사용 중인 에이전트에 shadcn 추가

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

Terminal
npx skills add https://github.com/shadcn-ui/ui --skill shadcn

skills/shadcn/SKILL.md에 대한 일반적인 skills CLI 형식이며, 저장소는 자체 경로를 문서화할 수 있습니다.

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

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

Starter prompt
I need a settings page with tabs for profile, account, and notifications. Each tab should have form fields grouped by section, with a save button at the bottom. Use the project's existing shadcn components and follow the FieldGroup pattern. The profile tab needs an avatar upload, the account tab needs email and password inputs with inline buttons to change them, and the notifications tab needs toggle groups for frequency (daily, weekly, monthly) and a set of checkboxes for notification types. Make sure all validation states use data-invalid and aria-invalid correctly.

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

첫 번째 결과 확인

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

  • npx shadcn@latest info를 실행하여 컴포넌트가 설치된 컴포넌트 목록에 추가되었는지 확인합니다
  • 아이콘 임포트가 프로젝트의 iconLibrary 필드(lucide-react, @tabler/icons-react 등)와 일치하는지 확인합니다

OpenDesign에서 shadcn을 SKILL.md 링크에서 가져옵니다: Plugins → Add → Skill → Import from link, 그런 다음 상단 바에서 선택합니다.

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

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

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

Author
shadcn
Repository
github.com/shadcn-ui/ui 브랜치 main
스킬 파일
skills/shadcn/SKILL.md 검증 시 콘텐츠 체크섬 기록됨; 커밋 2b3e6d4
License
MIT LICENSE.md에서 확인
리포지토리 스타
123,708 shadcn-ui/ui 리포지토리 전체에 대한 GitHub 스냅샷(2026-09-14 기준). shadcn의 평가나 사용 횟수가 아닙니다.
OpenDesign에서 검증됨
2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 스타 수가 확인되었습니다. OpenDesign 메인에 번들로 포함되지 않음(2026-08-28 확인); 이 페이지에 실제 실행 기록이 없습니다.

SKILL.md 내부

  1. 현재 프로젝트 컨텍스트npx shadcn@latest info --json에서 실시간 프로젝트 설정과 설치된 컴포넌트를 주입합니다
  2. 원칙기존 컴포넌트를 먼저 사용하고, 새로 만들기보다 조합하고, 내장 variant를 사용하고, semantic 색상을 사용합니다
  3. 핵심 규칙스타일링, 폼, 구성, 아이콘, 채팅, CLI에 대해 항상 적용되는 규칙과 세부 파일 링크
  4. 주요 패턴가장 흔한 코드 패턴: 폼 레이아웃, 검증, 버튼 내 아이콘, 간격, 동일 크기, 상태 색상
  5. 컴포넌트 선택UI 요구 사항을 올바른 shadcn 컴포넌트(버튼, 폼, 오버레이, 피드백, 내비게이션, 채팅)에 매핑하는 표
  6. 주요 필드프로젝트 컨텍스트에서 aliases, isRSC, tailwindVersion, base, iconLibrary, resolvedPaths, framework, packageManager, preset를 설명합니다
  7. 컴포넌트 문서, 예제, 사용법npx shadcn@latest docs를 실행하여 URL을 얻고, 올바른 API 및 사용 패턴을 위해 이를 가져옵니다
  8. 워크플로9단계 프로세스: 컨텍스트 확보, 설치 여부 확인, 검색, 문서 확인, 설치, 임포트 수정, 검토, 레지스트리 처리, 프리셋 전환
  9. 컴포넌트 업데이트로컬 수정 사항을 유지하면서 upstream 변경을 병합하려면 --dry-run과 --diff를 사용하고, 승인 없이 --overwrite를 사용하지 마십시오
  10. 빠른 참조init, apply, add, search, docs, view, preset 작업에 대한 플래그 및 레지스트리 구문이 포함된 CLI 명령 예시
  11. 세부 참조폼, 구성, 채팅, 아이콘, 스타일링, base-vs-radix, CLI, 레지스트리, 커스터마이징에 대한 별도 규칙 파일 링크
스킬 자체 설명
"shadcn 컴포넌트와 프로젝트를 관리합니다. 추가, 검색, 수정, 디버깅, 스타일링, UI 구성(채팅 인터페이스 포함)을 처리합니다. 프로젝트 컨텍스트, 컴포넌트 문서, 사용 예시를 제공합니다. shadcn/ui, 컴포넌트 레지스트리, 프리셋, --preset 코드 또는 components.json 파일이 있는 모든 프로젝트에 적용됩니다. "shadcn init", "create an app with --preset" 또는 "switch to --preset" 명령에도 실행됩니다."

SKILL.md의 프론트매터 설명입니다. 전체 파일은 약 19,427자입니다. GitHub에서 전체 파일 읽기

shadcn

실제 UI 디자인 작업에서 shadcn을 실행하십시오.

OpenDesign를 다운로드하고 SKILL.md 링크에서 shadcn을 임포트한 후 위 프롬프트를 붙여넣고 결과 전에 계획을 읽으십시오.

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

OpenDesign 데스크톱

하나의 디자인 시스템으로 모든 결과물에 브랜드 일관성을

완전한 Vibe Design Workspace에서 하나의 브랜드 규칙을 웹사이트, 슬라이드, 인터랙티브 프로토타입, 대시보드, 이미지, HTML 영상에 적용하세요. 로컬 Codex, Claude Code, Cursor 등을 연결해 무료로 제작할 수 있습니다.

  • 웹, 슬라이드, 프로토타입, 대시보드, 이미지, 영상
  • 140개+ 디자인 시스템과 전체 템플릿·스킬 라이브러리
  • 로컬 Codex 및 21개+ 코딩 에이전트 연결 · 무료
무료 다운로드

macOS, Windows 지원