
Hotkey
Ship new LobeHub chat keyboard shortcuts with correct enum registration, i18n, hooks, and optional tooltips without breaking scope or conflicts.
Overview
hotkey is an agent skill for the Build phase that documents how to add or edit LobeHub keyboard shortcuts using HotkeyEnum, HOTKEYS_REGISTRATION, and useHotkeyById hooks.
Install
npx skills add https://github.com/lobehub/lobe-chat --skill hotkeyWhat is this skill?
- 5-step checklist: HotkeyEnum → HOTKEYS_REGISTRATION → locales → useHotkeyById hooks → optional tooltips
- Uses `combineKeys`, `HotkeyScopeEnum`, and `useRegisterChatHotkeys` patterns from LobeHub
- Documents Cmd/Ctrl modifier handling and shortcut scope to avoid conflicts
- Maps actions via `useChatStore` / `useUserStore` selectors in chat scope
- Contributor-focused: `user-invocable: false`—invoke when editing LobeHub source, not end-user chat
- 5 documented steps to add a new hotkey
Adoption & trust: 809 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 are unsure which files to change for enums, defaults, translations, hooks, and scopes.
Who is it for?
Developers patching LobeHub or a LobeHub fork who already run the TypeScript/React codebase locally.
Skip if: Builders who only use LobeHub as end users or who want app-agnostic global hotkey libraries outside this repo.
When should I use this skill?
Adding or editing LobeHub keyboard shortcuts involving HotkeyEnum, HOTKEYS_REGISTRATION, combineKeys, useHotkeyById, tooltip hotkeys, shortcut scope, or Cmd/Ctrl combos.
What do I get? / Deliverables
After following the skill, a new hotkey is registered with keys, scope, i18n, and an optional tooltip—ready to wire into chat actions.
- New or updated HotkeyEnum entry and HOTKEYS_REGISTRATION row
- i18n hotkey title/desc and registered scope hook (optional tooltip)
Recommended Skills
Journey fit
How it compares
Repo-specific implementation guide, not a standalone hotkey MCP or npm package.
Common Questions / FAQ
Who is hotkey for?
LobeHub contributors and fork maintainers adding conversation or UI keyboard shortcuts in the official codebase structure.
When should I use hotkey?
During Build → frontend when defining HotkeyEnum entries, updating HOTKEYS_REGISTRATION, writing chat-scope hooks, or fixing Cmd/Ctrl combo and scope conflicts.
Is hotkey safe to install?
It is documentation-only for local agent use; review the Security Audits panel on this Prism page before installing any skill from the registry.
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