| name | design-pattern-guidelines |
| description | Guides correct implementation of SmartHR product page layout patterns. Use when implementing collection (table/list) pages, single-object detail pages, or any page that follows the SmartHR design system layout conventions. Covers spacing, button variants, pagination placement, テーブル操作エリア/一時操作エリアの配置ルール, and DoAndDont avoid-patterns to prevent common mistakes. |
| paths | ["**/*.tsx","**/*.jsx"] |
SmartHR デザインパターン ガイド
SmartHRプロダクトのページレイアウトパターンを正しく実装するためのガイド。
重要: デザインパターンに関する実装は、事前知識のみで答えず、必ず下記の該当ドキュメントを実際に読んでから実装すること。余白トークン・Button variant・ページネーション位置・テーブル操作エリアの構造は頻繁に更新される。また、<DoAndDont type="dont"> に記載されたアンチパターンには、一見正しく見えても誤りのある実装が含まれているため、必ず確認すること。
どのパターンを実装するか迷っているとき
パターンが未確定なら、まず pattern-selector.md を読むこと。UI要件からパターンを特定してから次のステップに進む。
対象パターンが分かっているとき
patterns/<pattern-name>.mdx を必ず読んでから実装すること。
どのファイルを読むべきかは pattern-selector.md を参照すること（ページレイアウト・テーブル/リスト・ダイアログ・フォーム・権限など全パターンの対応表がある）。
コンポーネントの props を必ず確認する
デザインパターンの実装例に登場するコンポーネントを使う際は、component-guidelines スキルを併用して props・型・使用ルールを確認してから実装すること。
パターンドキュメントはレイアウト構造を示すものであり、各コンポーネントの正確な prop 値（型の選択肢・デフォルト値・必須フラグなど）は記載されていない。事前知識で prop 値を推測すると、存在しない値を渡す誤りが生じる（例: StatusLabel の type に 'inactive' や 'success' を渡すなど）。
手順
- デザインパターンドキュメント（
patterns/*.mdx）で実装の全体構造を把握する
- 実装例に含まれる smarthr-ui コンポーネントについて、
component-guidelines スキルの components/<ComponentName>.md を読んで props を確認する
- 確認した props に基づいて実装する
MDXの読み方
各パターンファイルは以下を含む:
- 実装例（
tsx editable コードブロック）: 正しい構造・コンポーネント・propsの組み合わせ。そのまま参考にすること。
<DoAndDont type="dont"> ブロック: やってはいけない実装。Astroコンポーネントの記法だが、内容は必ず読み、避けること。- 散文のルール: 余白・構造・命名に関する制約。
