Provides a primitive dropdown UI component (DropdownTrigger + DropdownContent) for custom dropdowns not covered by DropdownMenuButton/FilterDropdown/SortDropdown in smarthr-ui.
How this skill is triggered — by the user, by Claude, or both
Slash command
/smarthr-design-system:smarthr-ui-dropdownThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
ボタンを押すとパネルが開く動作を提供するプリミティブコンポーネントです。DropdownMenuButton/FilterDropdown/SortDropdownで実現できない独自のドロップダウンUIを提供するときに使います。
ボタンを押すとパネルが開く動作を提供するプリミティブコンポーネントです。DropdownMenuButton/FilterDropdown/SortDropdownで実現できない独自のドロップダウンUIを提供するときに使います。
大きく分けるとパネルを開くための引き金となるDropdownTriggerとパネル自体を指すDropdownContentから構成されます。
import { DropdownTrigger, DropdownContent, DropdownCloser, Dropdown } from 'smarthr-ui'
| Props 名 | 型 | デフォルト値 | 必須 | 説明 |
|---|---|---|---|---|
| tooltip | { message: ReactNode; show?: boolean; } | - | - | - |
| Props 名 | 型 | デフォルト値 | 必須 | 説明 |
|---|---|---|---|---|
| controllable | boolean | false | - | true のとき、ドロップダウン内のコンテンツをクリックしてもドロップダウンが閉じなくなる。。 この場合は、 DropdownCloser を用いてドロップダウンを閉じることができる。 |
(固有 Props なし)
| Props 名 | 型 | デフォルト値 | 必須 | 説明 |
|---|---|---|---|---|
| onOpen | () => void | - | - | - |
| onClose | () => void | - | - | - |
DropdownTriggerやDialogTrigger, DisclosureTrigger内にbutton要素を設置することを強制するルールです。
❌ NG:
// Triggerの子はbutton要素である必要がある
<DropdownTrigger>
<Xxx />
</DropdownTrigger>
✅ OK:
<DropdownTrigger>
<Button />
</DropdownTrigger>
詳細は eslint-plugin-smarthr の各ルール README を参照してください。
使い方チェックリスト(Layer 3)は設定されていません。
npx claudepluginhub kufu/smarthr-design-system --plugin smarthr-design-systemDropdownMenuButton は、同一対象に関連する複数の操作をドロップダウン表示するメニューボタンで、編集・複製・削除などのアクションをまとめるときに使います。レイアウトやデザインパターンのルールを含みます。
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.