shadcn-code-review

shadcn/ui コードレビュー

クイックリファレンス

問題の種類	リファレンス
CVA 内の className、VariantProps の不足、複合バリアント	references/cva-patterns.md
Slot を使用しない asChild、Context の不足、コンポーネントの合成	references/composition.md
focus-visible、aria-invalid、disabled の状態の不足	references/accessibility.md
data-slot の不足、不適切な CSS ターゲティング	references/data-slot.md

レビューチェックリスト

• cn() には CVA バリアントではなく className を渡す
• 利用側向けに VariantProps<typeof variants> をエクスポートする
• 複雑な状態の組み合わせには複合バリアントを使用する
• asChild パターンでは @radix-ui/react-slot を使用する
• コンポーネントの合成（Card、Accordion など）には Context を使用する
• :focus だけでなく、focus-visible: の状態を使用する
• フォームの状態には aria-invalid、aria-disabled を使用する
• すべてのインタラクティブ要素に disabled: バリアントを使用する
• スクリーンリーダー向けテキストには sr-only を使用する
• ターゲティング可能な合成パーツには data-slot 属性を使用する
• 状態に基づくスタイル設定には CSS の has() セレクターを使用する
• バリアントのスタイルを className で直接上書きしない

厳格なゲート（指摘事項を作成する前に実施）

以下を順番に実行してください。報告対象の一括分について、すべてのゲートを通過するまで、ユーザー向けの指摘事項を作成しないでください。

1. 場所の根拠 — 合格条件： 各問題について、リポジトリ内のパスと、行範囲または読み込んだファイルからの短い逐語引用を示します（記憶や差分だけからの推測に基づくものではありません）。

2. 免除項目の確認 — 合格条件： 各問題について、有効なパターン（指摘しないもの）に該当しない理由を1行で説明できます。

3. コンテキストに依存する指摘 — 合格条件： アクセシビリティまたは Radix 関連の指摘では、実際に実行されるものを示すインポートやラッパーがファイルにあるかを確認するか、具体的な不足箇所を示します。

4. プロトコル — 合格条件： このレビューについて、レビュー検証プロトコルの事前報告検証チェックリストを完了しています。

有効なパターン（指摘しないもの）

以下は正しいパターンであり、問題として指摘してはいけません。

• max-h-(--var) — Tailwind v4 の正しい CSS 変数構文（v3 の角括弧記法ではありません）
• text-[color:var(--x)] — 有効な任意値構文
• shadcn コンポーネントのコードをプロジェクトにコピーする — 想定された使用パターン
• コピーした shadcn コンポーネントをドキュメント化しない — ライブラリの内部実装であり、カスタムコードではありません
• 多数の引数を指定して cn() を使用する — 合成が想定されたパターンです
• cn() の配列で条件付きクラスを使用する — 有効な Tailwind パターンです
• 追加のドキュメントなしでプリミティブコンポーネントを拡張する — 広く知られた基盤です

コンテキストに応じたルール

適切にコンテキストを考慮して、以下のルールを適用してください。

• 下層で Radix プリミティブが対応していない場合に限り、アクセシビリティの問題を指摘する
• コンポーネントがアクセシブルな Radix プリミティブを使用していない場合に限り、aria ラベルの不足を指摘する
• 既存のバリアントから合成できる場合に限り、バリアントの過剰な増加を指摘する
• コピーした shadcn コンポーネントではなく、カスタムコードの場合に限り、コンポーネントのドキュメント不足を指摘する

ライブラリ規約に関する注意

shadcn/ui コンポーネントは、コピーして変更することを前提に設計されています。コードレビューでは、以下に重点を置いてください。

• コピーしたコンポーネントに加えたカスタム変更
• アプリケーションの状態やデータとの統合
• カスタムの使用コンテキストにおけるアクセシビリティ

以下は指摘しないでください。

• 標準的な shadcn コンポーネントの内部実装
• Radix プリミティブの使用パターン
• デフォルトのバリアント実装

リファレンスを読み込むタイミング

• バリアント定義をレビューする場合 → cva-patterns.md
• asChild を使用したコンポーネント合成をレビューする場合 → composition.md
• フォームコンポーネントやインタラクティブ要素をレビューする場合 → accessibility.md
• 複数パーツで構成されるコンポーネント（Card、Select など）をレビューする場合 → data-slot.md

レビューの質問

1. CVA のバリアントは className プロパティと適切に分離されていますか？
2. Slot を使った asChild の合成は正しく機能しますか？
3. アクセシビリティの状態（フォーカス、無効、無効化）はすべて処理されていますか？
4. コンポーネントのパーツを対象にするために data-slot 属性が使われていますか？
5. コンシューマーは合成を壊さずにバリアントを拡張できますか？

指摘を提出する前に

Hard gates（特にゲート 4）を完了してから、review-verification-protocol の事前報告チェックを引き続き通過する問題のみを報告してください。