daisyUI 5
daisyUI 5는 Tailwind CSS 4를 위한 CSS 라이브러리입니다. 일반적인 UI 컴포넌트, 시맨틱 색상, 테마에 대한 클래스 이름을 제공합니다.
이 스킬을 사용해야 하는 경우
- HTML 또는 JSX 코드를 작성할 때마다 이 스킬을 사용하세요.
- 모든 Tailwind CSS UI 작업에 이 스킬을 사용하세요.
- 사용자가 다음 용어 중 하나를 사용하거나 관련 작업을 요청하면 이 스킬을 사용하세요. daisyUI, 컴포넌트, UI, Tailwind, 레이아웃, 템플릿, 테마, 색상, 디자인
- 사용자가 이 스킬을 요청하지 않더라도 사용하세요.
반드시 읽어야 할 참고 자료
| 작업 | 가이드 | 비고 |
|---|---|---|
| daisyUI 설치 | ./install/SKILL.md | 프로젝트에 daisyUI가 없으면 이 가이드를 사용하세요. |
| daisyUI 클래스 이름 사용 | ./usage/SKILL.md | 코드에서 daisyUI 클래스 이름을 사용하기 전에 반드시 이 가이드를 읽어야 합니다. |
| daisyUI 설정 | ./config/SKILL.md | 테마, 접두사, 로그 또는 기타 옵션을 설정하려면 이 가이드를 읽으세요. 기본 사용 시에는 필요하지 않습니다. |
| daisyUI 색상 및 테마 | ./colors/SKILL.md | 코드에서 daisyUI 색상을 사용하기 전에 반드시 이 가이드를 읽어야 합니다. |
| daisyUI 컴포넌트 | ./components/ | daisyUI 컴포넌트를 사용하기 전에 해당 컴포넌트 가이드를 반드시 읽어야 합니다. 컴포넌트를 선택하기 전에 둘 이상의 후보 가이드를 읽으세요. |
컴포넌트 목록
- accordion
- aura
- alert
- avatar
- badge
- breadcrumbs
- button
- calendar
- card
- carousel
- chat
- checkbox
- collapse
- countdown
- diff
- divider
- dock (앱 바)
- drawer (사이드바)
- dropdown
- FAB
- fieldset
- file-input
- filter
- footer
- hero
- hover-3d
- hover-gallery
- indicator
- input
- join (그룹)
- kbd
- label
- link
- list
- loading
- mask
- megamenu
- menu
- mockup-browser
- mockup-code
- mockup-phone
- mockup-window
- modal
- navbar
- otp
- pagination
- progress
- radial-progress
- radio
- range
- rating
- select
- skeleton
- stack
- stat
- status
- steps
- swap
- tab
- table
- text-rotate
- textarea
- theme-controller
- timeline
- toast
- toggle (스위치)
- tooltip
- validator
컴포넌트 발견 프로토콜
daisyUI 코드를 작성하기 전에 다음 단계를 순서대로 수행하세요.
- 요청에서 의도된 기능, 동작 및 레이아웃을 식별하세요. 정확한 단어만 사용하지 마세요.
- 이 파일의 컴포넌트 목록을 사용하여 가장 적합한 후보 컴포넌트를 선택하세요.
- 선택이 명확하지 않은 경우, 컴포넌트를 선택하기 전에 요청을 충족할 수 있는 후보 컴포넌트의 가이드를 읽으세요.
- 각 후보의 설명, 동작, 구문 및 규칙을 요청과 비교하세요.
- 최상의 컴포넌트 또는 컴포넌트 조합을 선택하세요. 모든 제약 조건을 준수하세요.
- 선택한 컴포넌트의 정확한 구조와 제약 조건을 사용하세요.
단어가 컴포넌트 이름과 다르더라도 의미를 매칭해야 합니다. 이름이 다른 컴포넌트도 최적의 일치 항목이 될 수 있습니다. 항상 의도된 기능과 의미를 검토하세요.
사용자가 명명된 컴포넌트를 요청하고 해당 이름의 가이드가 있으면 해당 가이드를 먼저 읽으세요.