shadcn
Frontend
설치
$ npx skills add https://github.com/shadcn/ui --skill shadcn요약
shadcn/ui가 이미 들어간 프로젝트에서 기존 패턴을 유지하며 UI를 확장할 때 좋습니다.
- shadcn/ui 기반 프로젝트에서 컴포넌트 선택, 설치, 조합, 스타일 일관성을 유지하는 데 도움을 주는 프론트엔드 스킬입니다.
- 한국어 큐레이션 기준으로 이 스킬의 핵심을 먼저 정리했습니다.
- 설치는 개별 스킬 페이지의 명령을 그대로 사용합니다.
- 아래 해설 섹션에서 사용 맥락과 주의점을 한국어로 길게 풀어 읽을 수 있습니다.
해설
어떤 스킬인가
shadcn은 shadcn/ui를 사용하는 프로젝트에서 컴포넌트를 고르고 조합하는 데 초점을 둔 스킬입니다. shadcn/ui는 설치형 컴포넌트 구조라 프로젝트 안의 코드와 디자인 토큰에 맞춰 수정하는 일이 중요합니다.
이 스킬은 단순히 컴포넌트를 추가하는 것보다 "이미 있는 방식"을 유지하는 데 도움이 됩니다. 버튼, 셀렉트, 다이얼로그, 폼, 테이블 같은 컴포넌트가 이미 프로젝트에 있다면 새 UI도 같은 primitive와 스타일 규칙을 따라야 합니다.
언제 쓰면 좋은가
shadcn/ui 기반 관리자, SaaS, 설정 화면, 폼 중심 UI를 만들 때 좋습니다. 특히 네이티브 <select>나 임의 스타일 버튼을 추가하기보다 기존 컴포넌트를 재사용해야 하는 코드베이스에서 유용합니다.
주의할 점은 shadcn/ui 자체가 디자인 시스템의 완성품은 아니라는 점입니다. 프로젝트별 토큰, radius, spacing, dark mode 규칙을 함께 확인해야 일관된 결과를 얻을 수 있습니다.
설치
npx skills add https://github.com/shadcn/ui --skill shadcn
요청할 때는 현재 프로젝트의 컴포넌트 위치와 이미 쓰는 shadcn primitive를 먼저 읽으라고 지시하는 편이 좋습니다.