intentui

Intent UI — コンポーネントとスタイルの規約適用

Intent UI コンポーネントライブラリのコード品質を管理します。React/TSX コードを記述またはレビューする際は、rules/ ディレクトリに定義されたすべてのルールに必ず従ってください。

ルール

次のファイルに記載されたすべてのルールを読み込み、適用してください。

• スタイリングルール — セマンティックカラーのトークン、className ユーティリティ、バリアントの規約
• フォームルール — フォームコンポーネントのパターン、TextField、Select、Checkbox など
• コンポーネントルール — 素の HTML 要素ではなく、必ず Intent UI コンポーネントを使用する
• オーバーレイルール — Modal、Sheet、Drawer、Popover、Menu、Tooltip の組み合わせ方
• コレクションルール — Table、ListBox、GridList、Tree、TagGroup：items とレンダー関数、選択用 props
• CLI ルール — レジストリから不足しているコンポーネントを検索してインストールする方法

コードのレビューまたは記述時

1. 素の HTML 要素を探す — Intent UI コンポーネントに置き換えてください（components ルールを参照）
2. 素の Tailwind カラーを探す — セマンティックトークンに置き換えてください（styling ルールを参照）
3. フォームのパターンを確認する — Intent UI のフォームコンポーネントを正しく使用してください（forms ルールを参照）
4. オーバーレイの組み合わせ方を確認する — Modal/Sheet/Drawer/Popover/Menu は、それぞれのサブコンポーネントと組み合わせる必要があります（overlays ルールを参照）
5. コレクションのパターンを確認する — Table/ListBox/GridList/Tree/TagGroup では items とレンダー関数を使用する必要があります（.map() は使用しないでください）。選択には selectedKeys/onSelectionChange を使用してください（collections ルールを参照）
6. インポートを確認する — コンポーネントのインポート元が @/components/ui/ であることを確認してください
7. className ユーティリティを確認する — react-aria コンポーネントには @/lib/primitive の cx を、通常の HTML には twMerge/twJoin を使用してください。cn や clsx は使用しないでください（styling ルールを参照）
8. intent prop を確認する — カラーのバリアントには intent を使用し、variant や color は使用しないでください
9. コンポーネントが不足している場合 — 必要なコンポーネントが src/components/ui/ に存在しない場合は、CLI ルールに従ってレジストリから検索してインストールしてください

違反が見つかった場合は修正し、変更内容とその理由を説明してください。