Provides a Browser component for selecting hierarchical data (categories, organizations, folders) via drill-down navigation in React apps using smarthr-ui.
How this skill is triggered — by the user, by Claude, or both
Slash command
/smarthr-design-system:smarthr-ui-browserThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
階層構造を持つデータを選択するためのコンポーネントです。カテゴリや組織、フォルダなどのツリー状のデータをドリルダウンで選択するときに使います。
階層構造を持つデータを選択するためのコンポーネントです。カテゴリや組織、フォルダなどのツリー状のデータをドリルダウンで選択するときに使います。
import { Browser } from 'smarthr-ui'
| Props 名 | 型 | デフォルト値 | 必須 | 説明 |
|---|---|---|---|---|
| items | ItemNodeLike[] | - | ✓ | 表示する item の配列 |
| value | string | - | - | 選択中の item の値 |
| onSelectItem | (value: string) => void | - | - | 選択された際に呼び出されるコールバック。第一引数に item の value を取る。 |
Browser に直接関連する eslint-plugin-smarthr のルールは現時点ではありません。
使い方チェックリスト(Layer 3)は設定されていません。
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.
Builds queryable YAML decision trees mapping user intents to component selections via narrowing questions for choosing between alternatives.
Builds Atomic Design organisms—complex UI sections like headers, footers, product cards from atoms/molecules—with React/TypeScript examples.