Stats
Actions
Tags
Implements app-level navigation using SmartHR UI's AppNavi component, with buttons, dropdowns, anchors, and custom tags for switching between major application features.
How this skill is triggered — by the user, by Claude, or both
Slash command
/smarthr-design-system:smarthr-ui-app-naviThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
アプリケーション内の主要機能を切り替えるグローバルナビゲーションコンポーネントです。機能間を行き来するとき、機能切替以外でアプリ全体に関わる頻繁な操作を常設するときに使います。
アプリケーション内の主要機能を切り替えるグローバルナビゲーションコンポーネントです。機能間を行き来するとき、機能切替以外でアプリ全体に関わる頻繁な操作を常設するときに使います。
レイアウトなどはAppHeaderを参照してください。
import { AppNaviDropdownMenuButton, AppNaviDropdown, AppNaviCustomTag, AppNaviButton, AppNaviAnchor, AppNavi } from 'smarthr-ui'
| Props 名 | 型 | デフォルト値 | 必須 | 説明 |
|---|---|---|---|---|
| label | ReactNode | - | ✓ | 引き金となるボタンラベル |
| onOpen | () => void | - | - | - |
| onClose | () => void | - | - | - |
| Props 名 | 型 | デフォルト値 | 必須 | 説明 |
|---|---|---|---|---|
| dropdownContent | ReactNode | - | ✓ | ドロップダウンのコンテンツ |
| icon | ComponentType | - | - | 表示するアイコンタイプ |
| current | boolean | - | - | アクティブ状態であるかどうか |
| displayCaret | boolean | - | - | - |
| Props 名 | 型 | デフォルト値 | 必須 | 説明 |
|---|---|---|---|---|
| tag | ComponentType | - | ✓ | このボタンのカスタムタグ |
| icon | ComponentType | - | - | 表示するアイコンタイプ |
| current | boolean | - | - | アクティブ状態であるかどうか |
| Props 名 | 型 | デフォルト値 | 必須 | 説明 |
|---|---|---|---|---|
| icon | ComponentType | - | - | 表示するアイコンタイプ |
| current | boolean | - | - | アクティブ状態であるかどうか |
| onClick | (e: MouseEvent<HTMLButtonElement, MouseEvent>) => void | - | - | クリックイベントのハンドラ |
| Props 名 | 型 | デフォルト値 | 必須 | 説明 |
|---|---|---|---|---|
| href | string | - | - | アンカーの href |
| icon | ComponentType | - | - | 表示するアイコンタイプ |
| current | boolean | - | - | アクティブ状態であるかどうか |
| elementAs | ElementType | - | - | next/link などのカスタムコンポーネントを指定します。指定がない場合はデフォルトで a タグが使用されます。 |
| ref | any | - | - | - |
| Props 名 | 型 | デフォルト値 | 必須 | 説明 |
|---|---|---|---|---|
| label | ReactNode | - | - | ラベルのテキスト |
| buttons | (AppNaviDropdownProps | AppNaviCustomTagProps | AppNaviButtonProps | AppNaviAnchorProps)[] | - | - | 表示するボタンの Props の配列 @deprecated AppNaviButton などのコンポーネントを組み合わせて組み上げてください |
| displayDropdownCaret | boolean | - | - | ドロップダウンにキャレットを表示するかどうか @deprecated キャレットの省略は非推奨です |
| additionalArea | ReactNode | - | - | 追加の領域 |
AppNavi に直接関連する eslint-plugin-smarthr のルールは現時点ではありません。
使い方チェックリスト（Layer 3）は設定されていません。
npx claudepluginhub kufu/smarthr-design-system --plugin smarthr-design-systemNavigates between SmartHR applications via a launcher in the header. Deprecated — use AppHeader's app launcher instead.
Guides building and reviewing SaaS navigation: sidebar primary nav, command palette (Cmd+K), breadcrumbs, multi-tenancy/org switching, top bar layouts. Includes patterns and checklists.
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.