
Hotkey
Add or change LobeHub keyboard shortcuts across HotkeyEnum, registration, hooks, i18n, scopes, and Cmd/Ctrl combos.
Overview
hotkey is an agent skill for the Build phase that adds or edits LobeHub keyboard shortcuts through enum, registration, i18n, hooks, and scopes.
Install
npx skills add https://github.com/lobehub/lobehub --skill hotkeyWhat is this skill?
- 5-step checklist: HotkeyEnum, HOTKEYS_REGISTRATION, i18n, hook, optional tooltip
- combineKeys with Mod/Shift/Backspace and HotkeyScopeEnum.Chat scoping
- useHotkeyById plus useRegisterChatHotkeys registration pattern
- Conflict and scope guidance via HotkeyGroupEnum.Conversation
- Paths anchored to src/types/hotkey.ts, src/const/hotkeys.ts, src/hooks/useHotkeys/chatScope.ts
- 5-step guide to add a new hotkey (enum, registration, i18n, hook, optional tooltip)
Adoption & trust: 1.1k installs on skills.sh; 78.4k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need a new LobeHub shortcut but the steps span HotkeyEnum, const registration, locales, and chat-scope hooks.
Who is it for?
Solo devs patching LobeHub or lobehub-ui-based chat clients with new conversation or UI hotkeys.
Skip if: Greenfield apps using unrelated hotkey libraries, or backend-only services with no LobeHub fork.
When should I use this skill?
User asks to add or edit LobeHub keyboard shortcuts involving HotkeyEnum, HOTKEYS_REGISTRATION, combineKeys, useHotkeyById, tooltip hotkeys, shortcut scope, conflicts, or Cmd/Ctrl key combos.
What do I get? / Deliverables
You ship a registered hotkey with translation, scoped handler, and optional UI tooltip wiring consistent with LobeHub patterns.
- HotkeyEnum entry and HOTKEYS_REGISTRATION row with keys and scopes
- Hook registration in chatScope and matching locale strings
Recommended Skills
Journey fit
How it compares
LobeHub repo playbook—not a generic global shortcut tutorial for any React app.
Common Questions / FAQ
Who is hotkey for?
Frontend contributors on LobeHub who want agent-guided steps for HotkeyEnum, HOTKEYS_REGISTRATION, i18n, and useHotkeyById hooks.
When should I use hotkey?
Use it in Build frontend when adding HotkeyEnum entries, fixing shortcut conflicts, wiring tooltip hotkeys, or defining Cmd/Ctrl Mod combos with proper HotkeyScopeEnum scopes.
Is hotkey safe to install?
It only documents local code edits; review the Security Audits panel on this Prism page for the lobehub skill source.
SKILL.md
READMESKILL.md - Hotkey
# Adding Keyboard Shortcuts Guide ## Steps to Add a New Hotkey ### 1. Update Hotkey Constant In `src/types/hotkey.ts`: ```typescript export const HotkeyEnum = { // existing... ClearChat: 'clearChat', // Add new } as const; ``` ### 2. Register Default Hotkey In `src/const/hotkeys.ts`: ```typescript import { KeyMapEnum as Key, combineKeys } from '@lobehub/ui'; export const HOTKEYS_REGISTRATION: HotkeyRegistration = [ { group: HotkeyGroupEnum.Conversation, id: HotkeyEnum.ClearChat, keys: combineKeys([Key.Mod, Key.Shift, Key.Backspace]), scopes: [HotkeyScopeEnum.Chat], }, ]; ``` ### 3. Add i18n Translation In `src/locales/default/hotkey.ts`: ```typescript const hotkey: HotkeyI18nTranslations = { clearChat: { desc: '清空当前会话的所有消息记录', title: '清空聊天记录', }, }; ``` ### 4. Create and Register Hook In `src/hooks/useHotkeys/chatScope.ts`: ```typescript export const useClearChatHotkey = () => { const clearMessages = useChatStore((s) => s.clearMessages); return useHotkeyById(HotkeyEnum.ClearChat, clearMessages); }; export const useRegisterChatHotkeys = () => { useClearChatHotkey(); // ...other hotkeys }; ``` ### 5. Add Tooltip (Optional) ```tsx const clearChatHotkey = useUserStore(settingsSelectors.getHotkeyById(HotkeyEnum.ClearChat)); <Tooltip hotkey={clearChatHotkey} title={t('clearChat.title', { ns: 'hotkey' })}> <Button icon={<DeleteOutlined />} onClick={clearMessages} /> </Tooltip>; ``` ## Best Practices 1. **Scope**: Choose global or chat scope based on functionality 2. **Grouping**: Place in appropriate group (System/Layout/Conversation) 3. **Conflict check**: Ensure no conflict with system/browser shortcuts 4. **Platform**: Use `Key.Mod` instead of hardcoded `Ctrl` or `Cmd` 5. **Clear description**: Provide title and description for users ## Troubleshooting - **Not working**: Check scope and RegisterHotkeys hook - **Not in settings**: Verify HOTKEYS_REGISTRATION config - **Conflict**: HotkeyInput component shows warnings - **Page-specific**: Ensure correct scope activation