---
name: understanding-design-system
description: Shadcn Compose 기반 디자인 시스템 구조와 사용법. 컴포넌트 사용, 테마 적용, 색상/반경 커스터마이징 시 활성화됨.
version: 1.0.0
---

# Understanding Design System

Shadcn Compose 기반 디자인 시스템의 구조와 사용법을 이해하기 위한 스킬.

---

## 목차

### 1. Theming
- [Color](theming/color.md) — ShadcnColors를 통한 색상 시스템 구성
- [Radius](theming/radius.md) — ShadcnRadius를 통한 모서리 반경 구성
- [Theme Application](theming/theme-application.md) — ShadcnTheme 적용 방법

### 2. Components
- [Accordion](components/accordion.md) — 펼치기/접기 가능한 콘텐츠 섹션
- [Alert](components/alert.md) — 사용자 주의를 끄는 콜아웃
- [Alert Dialog](components/alert-dialog.md) — 응답을 요구하는 모달 다이얼로그
- [Avatar](components/avatar.md) — 사용자 이미지 + 폴백
- [Badge](components/badge.md) — 상태/카테고리 배지
- [Button](components/button.md) — 클릭 가능한 버튼 (8가지 Variant)
- [Calendar](components/calendar.md) — 날짜 선택 필드
- [Card](components/card.md) — 헤더/콘텐츠/푸터 카드
- [Carousel](components/carousel.md) — 모션/스와이프 캐러셀
- [Checkbox](components/checkbox.md) — 체크박스 토글
- [Combobox](components/combobox.md) — 자동완성 + 제안 목록
- [Date Picker](components/date-picker.md) — 범위/프리셋 날짜 선택
- [Dialog](components/dialog.md) — 오버레이 다이얼로그
- [Drawer](components/drawer.md) — 바텀시트
- [Dropdown Menu](components/dropdown-menu.md) — 액션 드롭다운 메뉴
- [Input](components/input.md) — 폼 입력 필드 (7가지 Variant)
- [Popover](components/popover.md) — 포탈 콘텐츠 팝오버
- [Progress](components/progress.md) — 진행률 표시 바
- [Radio Group](components/radio-group.md) — 단일 선택 라디오 버튼
- [Select](components/select.md) — 옵션 목록 선택
- [Sidebar](components/sidebar.md) — 테마 적용 가능한 사이드바
- [Skeleton](components/skeleton.md) — 로딩 플레이스홀더
- [Slider](components/slider.md) — 범위 값 슬라이더
- [Sonner](components/sonner.md) — 토스트 알림
- [Switch](components/switch.md) — 스위치 토글
- [Tabs](components/tabs.md) — 탭 패널 전환