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 のコードを記述する前に、次の手順を順番に実行してください：
- リクエスト内の意図された機能、動作、レイアウトを特定してください。正確な単語だけを使用しないでください。
- このファイル内のコンポーネント一覧を使用して、最適な候補コンポーネントを選択してください。
- 選択が明確でない場合は、リクエストを満たすことができる候補コンポーネントのガイドを、1つを選択する前に読んでください。
- 各候補の説明、動作、構文、ルールをリクエストと比較してください。
- 最適なコンポーネントまたはコンポーネントの組み合わせを選択してください。そのすべての制約に従ってください。
- 選択したコンポーネントの正確な構造と制約を使用してください。
単語がコンポーネント名と異なっていても、意味を一致させる必要があります。異なる名前のコンポーネントでも最適な一致となる可能性があります。常に意図された機能と意味を検討してください。
ユーザーが名前付きコンポーネントを要求し、その名前のガイドが存在する場合は、最初にそのガイドを読んでください。