Adding Keyboard Shortcuts Guide
SkillDev toolsGuides your agent through adding keyboard shortcuts to the LobeHub codebase, from registering keys to tooltips.
Use Adding Keyboard Shortcuts Guide in Claude, ChatGPT or Ahel Desktop
Free. Sign in, add Adding Keyboard Shortcuts Guide and connect your AI. About a minute.
Also: Claude Code · Cursor · Codex
Then ask your AI: use the Adding Keyboard Shortcuts Guide skill
Details
Instructions available. Your AI can read the instructions. Execution depends on the setup they require.
Account requirements not reviewed. Check the skill instructions before use; ahel provides instructions and does not run this skill.
No other account needed.
Add ahel to your AI once: Claude, ChatGPT, Cursor, Claude Code or Codex. Then ask it to use this.
About this skill
Use for keyboard shortcuts, registration, key combinations, scope, conflicts and shortcut tooltips.
What this skill tells your AI
The instructions your AI receives, as published by lobehub/lobehub in .agents/skills/hotkey/SKILL.md and read by ahel’s review.
Steps to Add a New Hotkey
1. Update Hotkey Constant
In packages/types/src/hotkey.ts, add the new id to the HotkeyId union — it's the source of truth HotkeyEnum is typed against:
export type HotkeyId =
| 'addUserMessage'
// existing...
| 'saveTopic';
2. Register Default Hotkey
In packages/const/src/hotkeys.ts, KeyEnum and combineKeys are already defined locally in this file, so no import is needed — add the entry to HotkeyEnum and to HOTKEYS_REGISTRATION:
export const HotkeyEnum = {
// existing...
SaveTopic: 'saveTopic',
} as const satisfies Record<string, HotkeyId>;
export const HOTKEYS_REGISTRATION: HotkeyRegistration = [
// existing...
{
group: HotkeyGroupEnum.Conversation,
id: HotkeyEnum.SaveTopic,
keys: combineKeys([KeyEnum.Alt, 'n']),
scopes: [HotkeyScopeEnum.Chat],
},
];
3. Add i18n Translation
In packages/locales/src/default/hotkey.ts:
const hotkey: HotkeyI18nTranslations = {
saveTopic: {
desc: '保存当前话题并新建一个话题',
title: '保存话题',
},
};
4. Create and Register Hook
In src/hooks/useHotkeys/chatScope.ts:
export const useSaveTopicHotkey = () => {
const openNewTopicOrSaveTopic = useChatStore((s) => s.openNewTopicOrSaveTopic);
return useHotkeyById(HotkeyEnum.SaveTopic, openNewTopicOrSaveTopic);
};
export const useRegisterChatHotkeys = () => {
useSaveTopicHotkey();
// ...other hotkeys
};
5. Add Tooltip (Optional)
const saveTopicHotkey = useUserStore(settingsSelectors.getHotkeyById(HotkeyEnum.SaveTopic));
<Tooltip hotkey={saveTopicHotkey} title={t('saveTopic.title', { ns: 'hotkey' })}>
<Button icon={<SaveOutlined />} onClick={openNewTopicOrSaveTopic} />
</Tooltip>;
Best Practices
- Scope: Choose global or chat scope based on functionality
- Grouping: Place in appropriate group (System/Layout/Conversation)
- Conflict check: Ensure no conflict with system/browser shortcuts
- Platform: Use
KeyEnum.Modinstead of hardcodedCtrlorCmd - 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
Signals
- Hacker News mentions
- 15
Advanced
- Item type
- skill
- Key
hotkey-lobehub- Source
- github.com/lobehub/lobehub
Related picks
Skill · mattpocock
The pick for TypeScripttypescript-pro
Skill · jeffallan
The pick for TypeScriptreact-component-performance
Skill · davila7
The pick for Reactreact-doctor
Skill · millionco
The pick for Reactteach
Skill · mattpocock
More in Dev toolsponytail
Skill · dietrichgebert
More in Dev tools