compound-ui

Compound UI

このスキルを使うと、shadcn/ui のように組み合わせられる、ソースコード管理の React コンポーネントを作成できます。小さく名前の付いたパーツ、明示的な子要素、アクセシブルなプリミティブ、クラスのマージ、安定したスタイル用フックを備えます。

ワークフロー

1. コードを書く前に、ローカルの UI スタックを確認します。
   • 近くにあるプロジェクトのガイダンス、既存のコンポーネントファイル、パッケージのバージョン、スタイルユーティリティ、プリミティブライブラリ、テストやストーリーの規約を読みます。
   • プロジェクトですでに使われているエクスポート、ファイル、スタイル、アイコン、アクセシビリティのパターンを優先します。
2. 正確な API が重要な場合は、ドキュメントを最新の状態にします。
   • 最新のソースリンクと記録済みのガイダンスについては、references/source-map.md を使います。
   • フレームワークに依存するコードを変更する前に、最新の React、shadcn/ui、ローカルのプリミティブのドキュメント（Radix UI、Base UI、React Aria）を優先して確認します。
   • まずプロジェクトのプリミティブの基盤を特定します。components.json の style、または radix-ui、@base-ui/react、react-aria-components のインポートを確認します。基盤を混在させず、その合成 API に合わせます。
3. 実装前に公開 API を設計します。
   • references/component-contract.md を読みます。
   • ルートコンポーネント、名前付きサブコンポーネント、許可されるネスト、制御／非制御状態、必須のアクセシビリティパーツを定義します。
4. shadcn スタイルで実装します。
   • references/authoring-patterns.md を読みます。
   • data-slot、className のマージ、props／ref の引き継ぎ、最小限の動作 props を備えた、ソースコード管理の名前付きパーツをエクスポートします。
5. 完了前にレビューします。
   • references/review-checklist.md を使います。
   • 該当する場合は、型チェック、lint、ストーリー／ブラウザーでの動作、キーボード操作、フォーカス、アクセシブルな名前、レスポンシブ状態を検証します。

適用ルール

• props が多いラッパー API より、複合パーツと children を優先します。名前付きサブコンポーネントで同じ構造をより適切に表現できる場合は、title、description、actions、icon、isLoading、レイアウト用 props を作成しないでください。
• 許容する props は必要最小限にします。DOM props、className、children、プロジェクトのプリミティブ基盤の要素差し替え用 props（Radix では asChild、Base UI では render）、制御状態、イベントハンドラー、アクセシビリティ props、variant や size など意図的なバリアントを使います。
• ダイアログ、メニュー、ポップオーバー、タブ、セレクト、ツールチップ、コンボボックス、アコーディオン、ロービングフォーカスなど、複雑な動作には既存のアクセシブルなプリミティブを使います。
• プリミティブの契約を守ります。カスタムのスロット付き子要素は受け取った props をすべて展開し、プロジェクトの React のバージョンに応じて ref をサポートする必要があります。
• エクスポートするすべてのパーツに data-slot を追加し、スタイルやテストに役立つ場合は状態／バリアントのデータ属性も追加します。
• パーツ間の連携が必要な場合を除き、状態はローカルに保ちます。複合パーツの連携に限ってスコープ付きコンテキストを使い、必要なパーツがルートの外で使われた場合は明確にエラーにします。
• コンポーネントでフック、イベント、ブラウザー API、またはクライアント専用プリミティブを使う場合に限り、"use client" を追加します。
• 呼び出し側が確認も上書きもできない便利なデフォルト設定によって、必須のアクセシビリティ要件を隠さないでください。