| name | component-guidelines |
| description | Guides correct usage of smarthr-ui React components. Helps select the right component, verify props and API, and follow design system conventions and eslint-plugin-smarthr rules. Use when writing or reviewing JSX/TSX that imports from smarthr-ui, choosing between similar components, or fixing eslint-plugin-smarthr violations. |
| paths | ["**/*.tsx","**/*.jsx"] |
smarthr-ui コンポーネントガイド
smarthr-ui のコンポーネントを正しく選択・使用するためのガイド。
重要: smarthr-ui に関する回答は、事前知識のみで答えず、必ず下記の該当ドキュメントを実際に読んでから回答すること。Props・実装ルール・使い分けは頻繁に更新されるため、記憶に頼ると古い情報や誤った API を案内する恐れがある。
どのコンポーネントを使うか迷っているとき
使うコンポーネントが未確定なら、まず component-selector.md を読むこと（事前知識でコンポーネントを列挙しない）。UI 要件からコンポーネントを選定するための対応表があり、ここで対象を特定してから次のステップに進む。
対象コンポーネントが分かっているとき
components/<ComponentName>.md を必ず読んでから実装・回答すること。
コード中の import 名がそのままファイル名になっている。
例: import { ActionDialog } from 'smarthr-ui' → components/ActionDialog.md
ガイドの構成
各コンポーネントガイドは 3 層で構成される:
- Props・型情報: smarthr-ui の公開 API（自動生成）
- 実装ルール: eslint-plugin-smarthr のルールに基づく Do/Don't
- 使い分けチェックリスト: デザインシステムの運用知識（一部未整備）
smarthr-ui のバージョンについて
各ガイドの Props・型情報は、ガイド生成時点の smarthr-ui バージョンを基準にしている（基準バージョンは各ガイドの Props セクションと component-selector.md の冒頭に明記）。利用しているプロジェクトの smarthr-ui バージョンが基準と異なる場合、props がずれていることがある（例: 型・必須・デフォルト値・追加/削除された props）。
その場合は 実際の型定義を正とすること:
- エディタの型補完
- プロジェクトの
node_modules/smarthr-ui の .d.ts / metadata.json
ガイドの props と実装が食い違って表示・挙動が崩れるときは、まずバージョン差異を疑う。
