mcpField
D
daisy-ui

daisy-ui

github.com/dejanvasic85デザイン・UI154 回インストール3 日前に更新
リポジトリ

daisy-ui について

daisy-uiは、Williamstown SCのサイト開発に向けて、コーディングエージェントにDaisyUIコンポーネントの使い方を案内するスキルです。テーマ設定、コンポーネント選択、レスポンシブレイアウト、アクセシビリティとTailwindのカスタムスタイルを扱います。

主な機能

  1. 01Williamstown SCのブランドテーマ設定
  2. 02用途に応じたDaisyUIコンポーネント選択
  3. 03カスタムTailwindスタイルのガイド
  4. 04アクセシビリティとレスポンシブ設計
  5. 05コンポーネント構成と性能上の注意

活用シーン

  1. 01チームのニュースや試合日程ページの構築
  2. 02ナビゲーション、フォーム、フィードバックUIの作成
  3. 03モバイル向けページレイアウトの調整

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/dejanvasic85/williamstownsc --skill daisy-ui

インストール後、Claude Code で/daisy-uiを入力して読み込まれたか確認します。

同梱ファイルllms.txt

詳細

daisy-ui

手順

./llms.txt のドキュメントに従い、メインの CLAUDE.md ファイルに記載されているプロジェクトの技術スタックとコーディング規約に沿って、DaisyUI のコンポーネントとテーマを使用するコードを作成してください。

テーマのカスタマイズ

Williamstown SC のブランドアイデンティティに合わせて、tailwind.config.js で DaisyUI のテーマを設定します。

プライマリーカラー
  • primary：#062174（クラブブルー — 伝統と信頼）
  • secondary：#DEB100（クラブイエロー／ゴールド — 活力と視認性）
  • accent：#10B981（グリーン — サッカー場をイメージ）
  • neutral：#1F2937（テキスト用のダークグレー）
  • base-100：#FFFFFF（白い背景）
  • base-200：#F3F4F6（ライトグレーの背景）
  • base-300：#E5E7EB（ミディアムグレーの枠線）
タイポグラフィのガイドライン
  • システムフォントまたは Inter を使い、font-sans を指定します。
  • アクセシビリティのため、基本フォントサイズは 16px 以上にします。
  • 適切な行の高さを設定します（本文では 1.5 以上）。
  • フォントの太さは 400（レギュラー）、500（ミディアム）、600（セミボールド）、700（ボールド）を使い分けます。
テーマ設定の例
// tailwind.config.js
module.exports = {
	plugins: [require('daisyui')],
	daisyui: {
		themes: [
			{
				williamstown: {
					primary: '#062174', // Club blue
					'primary-content': '#FFFFFF',
					secondary: '#DEB100', // Club gold
					'secondary-content': '#000000',
					accent: '#10B981', // Soccer green
					'accent-content': '#FFFFFF',
					neutral: '#1F2937',
					'neutral-content': '#FFFFFF',
					'base-100': '#FFFFFF', // White
					'base-200': '#F3F4F6', // Light gray
					'base-300': '#E5E7EB', // Medium gray
					'base-content': '#1F2937',
					info: '#3ABFF8',
					'info-content': '#000000',
					success: '#36D399',
					'success-content': '#000000',
					warning: '#FBBD23',
					'warning-content': '#000000',
					error: '#F87272',
					'error-content': '#000000'
				}
			}
		]
	}
};

コンポーネントの選択

DaisyUI コンポーネントを使う場面

ナビゲーションとメニュー：

  • navbar - 上部ナビゲーションバー
  • menu - 縦型／横型のメニューリスト
  • dropdown - ドロップダウンメニュー
  • drawer - モバイル用のスライド式ナビゲーション
  • breadcrumbs - ページのナビゲーション履歴

アクション：

  • btn - バリエーション付きボタン（btn-primary、btn-secondary、btn-ghost、btn-outline）
  • btn-group - ボタンのグループ
  • swap - アイコンの切り替え／入れ替え（ハンバーガーメニュー）
  • link - スタイル付きリンク

データ表示：

  • card - ニュース、試合日程、選手情報用のコンテンツカード
  • badge - ラベルとタグ
  • avatar - プロフィール画像
  • stat - 統計情報の表示（ゴール数、勝利数など）
  • table - 試合日程／結果用のデータテーブル
  • timeline - 試合履歴のタイムライン

フォーム：

  • input - バリデーション状態に対応したテキスト入力
  • textarea - 複数行テキスト入力
  • select - ドロップダウン選択
  • checkbox - チェックボックス
  • radio - ラジオボタン
  • toggle - トグルスイッチ
  • range - 範囲スライダー
  • file-input - ファイルアップロード

フィードバック：

  • alert - 通知とメッセージ
  • modal - モーダルダイアログ
  • toast - トースト通知
  • loading - 読み込み中のスピナー
  • skeleton - 読み込み中のスケルトン
  • progress - プログレスバー

レイアウト：

  • divider - セクションの区切り
  • stack - 縦方向の積み重ね
  • join - 要素の結合
  • indicator - 通知インジケーター
カスタム Tailwind を使う場面
  • グラスモーフィズム効果を使ったヒーローセクション
  • 複雑な非対称レイアウト
  • カスタムアニメーションとトランジション
  • frontend-design スキルによるグリッドを崩したデザイン
  • 独自のスペーシングパターン
  • 高度な視覚効果（backdrop-blur、グラデーション）

アクセシビリティのパターン

WCAG AA 準拠

  1. 色のコントラスト：

    • DaisyUI は、テキストと背景の組み合わせに対するコントラストを自動的に確保します。
    • カスタムカラーが通常のテキストで 4.5:1 の比率を満たすことを確認します。
    • カスタムカラーが大きなテキスト（18px 以上）で 3:1 の比率を満たすことを確認します。

  2. タッチターゲット：

    • メインの CTA には btn-lg を使います（最小 44x44px を確保します）。
    • デフォルトの btn は高さ 48px で、要件を満たしています。
    • btn-sm の使用は控え、副次的なアクションに限ります。

  3. フォームのアクセシビリティ：

    <label className="form-control w-full">
	<div className="label">
		<span className="label-text">Email address</span>
	</div>
	<input
		type="email"
		placeholder="[email protected]"
		className="input input-bordered w-full"
		aria-required="true"
	/>
	<div className="label">
		<span className="label-text-alt">We'll never share your email</span>
	</div>
</label>

  4. フォーカス状態：

    • DaisyUI には、デフォルトで視認可能なフォーカスインジケーターが含まれています。
    • すべてのインタラクティブ要素をキーボード操作でテストします。
    • カスタムスタイルには focus: バリアントを使います。

  5. セマンティック HTML：

    • DaisyUI コンポーネントは、適切なセマンティック HTML を使用します。
    • 必要に応じて aria-label や aria-describedby などの ARIA ラベルを追加します。
    • カスタムコンポーネントには role 属性を使います。

スポーツクラブでよく使うパターン

試合／日程カード
<div className="card bg-base-100 shadow-xl">
	<div className="card-body">
		<div className="flex items-center justify-between">
			<h3 className="card-title text-lg">Round 5</h3>
			<div className="badge badge-primary">Home</div>
		</div>
		<div className="my-4 flex items-center justify-between">
			<div className="flex-1 text-center">
				<p className="text-xl font-bold">Williamstown SC</p>
			</div>
			<div className="px-4 text-center">
				<p className="text-3xl font-bold">2 - 1</p>
			</div>
			<div className="flex-1 text-center">
				<p className="text-xl font-bold">Opposition FC</p>
			</div>
		</div>
		<div className="card-actions justify-end">
			<button className="btn btn-ghost">Match Report</button>
		</div>
	</div>
</div>
ニュースカード
<div className="card bg-base-100 shadow-xl">
	<figure>
		<img src="/news-image.jpg" alt="News headline" />
	</figure>
	<div className="card-body">
		<div className="flex gap-2">
			<div className="badge badge-secondary">News</div>
			<div className="badge badge-outline">Senior Men</div>
		</div>
		<h2 className="card-title">2026 Senior Men's Coaching Team</h2>
		<p>Exciting announcement about our coaching lineup for the upcoming season...</p>
		<div className="card-actions mt-4 items-center justify-between">
			<span className="text-base-content/70 text-sm">2 days ago</span>
			<button className="btn btn-primary">Read More</button>
		</div>
	</div>
</div>
ナビゲーションヘッダー
<div className="navbar bg-primary text-primary-content">
	<div className="navbar-start">
		<div className="dropdown">
			<button tabIndex={0} className="btn btn-ghost lg:hidden">
				<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
					<path
						strokeLinecap="round"
						strokeLinejoin="round"
						strokeWidth={2}
						d="M4 6h16M4 12h8m-8 6h16"
					/>
				</svg>
			</button>
			<ul
				tabIndex={0}
				className="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow"
			>
				<li>
					<a>HOME</a>
				</li>
				<li>
					<a>ABOUT</a>
				</li>
				<li>
					<a>FIXTURES</a>
				</li>
			</ul>
		</div>
		<a className="btn btn-ghost text-xl">WILLIAMSTOWN SC</a>
	</div>
	<div className="navbar-center hidden lg:flex">
		<ul className="menu menu-horizontal px-1">
			<li>
				<a>HOME</a>
			</li>
			<li>
				<a>ABOUT</a>
			</li>
			<li>
				<a>MEMBER INFO</a>
			</li>
			<li>
				<a>FIXTURES</a>
			</li>
			<li>
				<a>CALENDAR</a>
			</li>
			<li>
				<a>CONTACT</a>
			</li>
			<li>
				<a>SHOP</a>
			</li>
		</ul>
	</div>
	<div className="navbar-end">
		<button className="btn btn-ghost btn-circle">
			<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
				<path
					strokeLinecap="round"
					strokeLinejoin="round"
					strokeWidth={2}
					d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
				/>
			</svg>
		</button>
	</div>
</div>
選手カード
<div className="card card-compact bg-base-100 shadow-xl">
	<figure>
		<img src="/player-photo.jpg" alt="Player name" className="h-64 w-full object-cover" />
	</figure>
	<div className="card-body">
		<div className="flex items-start justify-between">
			<div>
				<h3 className="card-title">John Smith</h3>
				<p className="text-base-content/70 text-sm">Midfielder</p>
			</div>
			<div className="badge badge-lg badge-primary">15</div>
		</div>
		<div className="stats stats-vertical mt-2 shadow">
			<div className="stat p-2">
				<div className="stat-title text-xs">Appearances</div>
				<div className="stat-value text-lg">24</div>
			</div>
			<div className="stat p-2">
				<div className="stat-title text-xs">Goals</div>
				<div className="stat-value text-lg">8</div>
			</div>
		</div>
	</div>
</div>
イベントカード
<div className="card bg-base-100 shadow-xl">
	<div className="card-body">
		<div className="flex items-start gap-4">
			<div className="text-center">
				<div className="text-primary text-4xl font-bold">15</div>
				<div className="text-base-content/70 text-sm">NOV</div>
			</div>
			<div className="flex-1">
				<h3 className="card-title">Season Launch Event</h3>
				<p className="text-base-content/70 mb-2 text-sm">6:00 PM - 9:00 PM</p>
				<p>Join us for the official 2026 season launch with the new coaching team...</p>
				<div className="card-actions mt-4 justify-end">
					<button className="btn btn-primary">RSVP</button>
				</div>
			</div>
		</div>
	</div>
</div>

レスポンシブユーティリティ

ブレークポイントクラス

Tailwind のブレークポイントを使い、DaisyUI のレスポンシブ修飾子を適用します。

// Button sizes
<button className="btn btn-sm md:btn-md lg:btn-lg">
  Responsive Button
</button>

// Card layout
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  {/* Cards adapt to screen size */}
</div>

// Navigation drawer (mobile)
<div className="drawer lg:drawer-open">
  <input id="drawer" type="checkbox" className="drawer-toggle" />
  <div className="drawer-content">
    {/* Page content */}
  </div>
  <div className="drawer-side">
    {/* Sidebar menu */}
  </div>
</div>
モバイルファーストのパターン
// Hide on mobile, show on desktop
<div className="hidden lg:block">Desktop Menu</div>

// Show on mobile, hide on desktop
<div className="lg:hidden">Mobile Menu</div>

// Collapse for accordion on mobile
<div className="collapse lg:collapse-open">
  <input type="checkbox" />
  <div className="collapse-title">Click to expand</div>
  <div className="collapse-content">Content</div>
</div>

フォームのバリデーション状態

// Success state
<input
  type="text"
  className="input input-bordered input-success w-full"
  defaultValue="[email protected]"
/>

// Error state
<input
  type="text"
  className="input input-bordered input-error w-full"
  aria-invalid="true"
  aria-describedby="email-error"
/>
<span id="email-error" className="text-error text-sm">
  Please enter a valid email address
</span>

// Warning state
<input
  type="text"
  className="input input-bordered input-warning w-full"
/>

// Disabled state
<input
  type="text"
  className="input input-bordered w-full"
  disabled
/>

読み込み状態

// Button loading
<button className="btn btn-primary">
  <span className="loading loading-spinner"></span>
  Loading...
</button>

// Skeleton loader
<div className="flex flex-col gap-4">
  <div className="skeleton h-32 w-full"></div>
  <div className="skeleton h-4 w-28"></div>
  <div className="skeleton h-4 w-full"></div>
  <div className="skeleton h-4 w-full"></div>
</div>

// Card skeleton
<div className="card bg-base-100 shadow-xl">
  <div className="skeleton h-48 w-full"></div>
  <div className="card-body">
    <div className="skeleton h-4 w-3/4"></div>
    <div className="skeleton h-4 w-1/2"></div>
  </div>
</div>

モーダルのパターン

// Basic modal
<dialog id="my_modal" className="modal">
  <div className="modal-box">
    <h3 className="font-bold text-lg">Match Report</h3>
    <p className="py-4">Detailed match information goes here...</p>
    <div className="modal-action">
      <form method="dialog">
        <button className="btn">Close</button>
      </form>
    </div>
  </div>
</dialog>

// Modal with backdrop
<dialog id="my_modal_2" className="modal modal-bottom sm:modal-middle">
  <div className="modal-box">
    <h3 className="font-bold text-lg">Confirm Action</h3>
    <p className="py-4">Are you sure you want to proceed?</p>
    <div className="modal-action">
      <form method="dialog">
        <button className="btn btn-ghost">Cancel</button>
        <button className="btn btn-primary">Confirm</button>
      </form>
    </div>
  </div>
  <form method="dialog" className="modal-backdrop">
    <button>close</button>
  </form>
</dialog>

パフォーマンスに関する考慮事項

バンドルサイズ
  • DaisyUI を追加すると、バンドルサイズは gzip 圧縮後で約 25KB 増加します
  • コンポーネントは CSS のみで構成されているため、JavaScript のオーバーヘッドはありません
  • バンドルサイズを最適化するには、Tailwind の JIT モードを使用します
  • 本番環境では、未使用のスタイルを削除します
最適化のヒント
// tailwind.config.js - Limit DaisyUI themes for smaller bundle
daisyui: {
  themes: ['williamstown'], // Only include what you need
  darkTheme: false,          // Disable if not using dark mode
  base: true,
  styled: true,
  utils: true,
}
ツリーシェイキング

使用されていない DaisyUI コンポーネントは、自動的にツリーシェイキングされます。HTML/JSX で実際に参照するコンポーネントのみを含めてください。

DaisyUI とカスタムスタイルの組み合わせ

組み合わせる場合
// DaisyUI component with custom Tailwind
<div className="card bg-base-100 shadow-xl backdrop-blur-xl bg-opacity-80">
  <div className="card-body">
    {/* Glassmorphism effect added to DaisyUI card */}
  </div>
</div>

// DaisyUI with custom animations
<button className="btn btn-primary hover:scale-105 transition-transform duration-200">
  Hover Me
</button>
DaisyUI コンポーネントの拡張
// tailwind.config.js
module.exports = {
	theme: {
		extend: {
			// Add custom animations
			animation: {
				'fade-in': 'fadeIn 0.3s ease-in'
			},
			keyframes: {
				fadeIn: {
					'0%': { opacity: '0', transform: 'translateY(10px)' },
					'100%': { opacity: '1', transform: 'translateY(0)' }
				}
			}
		}
	}
};

コンポーネントの構成

複雑なコンポーネントの構築
// Fixture list with stats
const FixtureList = () => (
	<div className="overflow-x-auto">
		<table className="table-zebra table">
			<thead>
				<tr>
					<th>Date</th>
					<th>Home</th>
					<th>Score</th>
					<th>Away</th>
					<th>Status</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Nov 15</td>
					<td className="font-bold">Williamstown SC</td>
					<td className="text-center">2 - 1</td>
					<td>Opposition FC</td>
					<td>
						<div className="badge badge-success">Win</div>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
);

ベストプラクティス

  1. 常にセマンティック HTML を使用する - DaisyUI は適切なセマンティック要素を基盤としています
  2. キーボード操作をテストする - すべてのインタラクティブ要素がキーボードで操作できることを確認します
  3. 色のコントラストを確認する - ツールを使って WCAG への準拠を確認します
  4. 一貫したスペーシングを使用する - Tailwind のスペーシングスケール（p-4、gap-4 など）を使用します
  5. data-theme を活用する - コンテナ要素にテーマを適用します：<div data-theme="williamstown">
  6. モバイルファーストで設計する - モバイルのスタイルから始め、レスポンシブ修飾子を追加します
  7. !important を避ける - 代わりに Tailwind の詳細度を使用します
  8. カスタムバリアントを文書化する - カスタムコンポーネントの組み合わせを記録します

よくある落とし穴

❌ 避けること：

  • インラインスタイルと DaisyUI クラスを混在させる
  • システムを理解せずに DaisyUI の CSS 変数を上書きする
  • DaisyUI に解決策があるのに、カスタムコンポーネントを作成する
  • コンポーネントに組み込まれたアクセシビリティ機能を無視する

✅ 推奨事項：

  • カスタマイズには DaisyUI のテーマシステムを使用する
  • 必要に応じて Tailwind のユーティリティで拡張する
  • ブレークポイントごとにコンポーネントをテストする
  • 一貫したスペーシングとサイズを維持する
  • 上記のコンポーネント構成パターンに従う

クイックリファレンス

コンポーネントのクラスパターン
Button:     btn btn-{variant} btn-{size}
Card:       card card-{variant}
Input:      input input-{variant} input-{size}
Badge:      badge badge-{variant} badge-{size}
Alert:      alert alert-{variant}
Modal:      modal modal-{position}
色のバリアント
primary, secondary, accent, neutral, info, success, warning, error, ghost
サイズ修飾子
xs, sm, md (default), lg, xl
状態修飾子
disabled, loading, active, focus

コメント

Markdown 対応