Stats
Actions
Tags
Provides guidance on using SmartHR UI's TabBar component for switching between views with horizontal tabs, including props, layout rules, and accessibility considerations.
How this skill is triggered — by the user, by Claude, or both
Slash command
/smarthr-design-system:smarthr-ui-tab-barThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
異なるオブジェクトやビューを横方向のタブで切り替えるためのコンポーネントです。同一画面内で並列関係にあるビューを切り替えるとき、影響範囲を下線で明確にしながらタブを並べるときに使います。
異なるオブジェクトやビューを横方向のタブで切り替えるためのコンポーネントです。同一画面内で並列関係にあるビューを切り替えるとき、影響範囲を下線で明確にしながらタブを並べるときに使います。
import { TabItem, TabBar } from 'smarthr-ui'
| Props 名 | 型 | デフォルト値 | 必須 | 説明 |
|---|---|---|---|---|
| suffix | ReactNode | - | - | ボタン内の末尾に表示する内容 |
| selected | boolean | false | - | true のとき、タブが選択状態のスタイルになる |
| disabled | boolean | - | - | true のとき、タブを無効状態にしてクリック不能にする |
| disabledReason | { icon?: ReactNode; message: ReactNode; } | - | - | 無効な理由 |
| onClick | (tabId: string) => void | - | ✓ | タブをクリックした時に発火するコールバック関数 |
| Props 名 | 型 | デフォルト値 | 必須 | 説明 |
|---|---|---|---|---|
| bordered | boolean | - | - | true のとき、TabBar に下線を表示する |
TabBar に直接関連する eslint-plugin-smarthr のルールは現時点ではありません。
npx claudepluginhub kufu/smarthr-design-system --plugin smarthr-design-systemGuides selection of smarthr-ui components for UI requirements like forms, tables, buttons, dialogs, and notifications. Acts as an index before reading individual component skills.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.