smarthr-design-system

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.

smarthr-design-system のコンポーネントページ向けのアクセシビリティコンテンツを作成・更新する。 対象コンポーネントの用途、実装例、デザインパターン、既存のアクセシビリティコンテンツを確認し、 一貫した構成と記述スタイルでアクセシビリティセクションを生成する。 「アクセシビリティコンテンツを追加して」「a11yセクションを作成して」 「コンポーネントページにアクセシビリティ情報を追加して」等の依頼に対応する。

smarthr-design-system のコンポーネントページ向けのアクセシビリティコンテンツを作成・更新する。 対象コンポーネントの用途、実装例、デザインパターン、既存のアクセシビリティコンテンツを確認し、 一貫した構成と記述スタイルでアクセシビリティセクションを生成する。 「アクセシビリティコンテンツを追加して」「a11yセクションを作成して」 「コンポーネントページにアクセシビリティ情報を追加して」等の依頼に対応する。

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.