Hotkey

by lobehub6a3eba96b010No license83K starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated today

Use for keyboard shortcuts, registration, key combinations, scope, conflicts and shortcut tooltips.

Instructions onlySoftware Development

AI-generated overview

Guides adding a keyboard shortcut to a TypeScript app: constants, registration, i18n, hooks and tooltips.

What it does: This skill provides a step-by-step guide for adding a new keyboard shortcut to a TypeScript codebase. It covers updating the hotkey id union, registering the default key combination and scope, adding i18n title and description strings, creating and registering a React hook, and optionally attaching a tooltip. It also lists best practices and troubleshooting notes for scopes, grouping, conflicts and platform keys.
When to use it: Use it when adding, registering or debugging keyboard shortcuts in this codebase. It is also relevant when handling key combinations, shortcut scopes, conflicts or shortcut tooltips.
Requirements: No scripts are shipped; it is instructions only. It assumes a TypeScript project with the referenced packages and files, React hooks, and an i18n locale setup.

Adding Keyboard Shortcuts Guide

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:

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:

typescript

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],  },];

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:

typescript

const hotkey: HotkeyI18nTranslations = {  saveTopic: {    desc: '保存当前话题并新建一个话题',    title: '保存话题',  },};

const hotkey: HotkeyI18nTranslations = {  saveTopic: {    desc: '保存当前话题并新建一个话题',    title: '保存话题',  },};

4. Create and Register Hook

In src/hooks/useHotkeys/chatScope.ts:

typescript

export const useSaveTopicHotkey = () => {  const openNewTopicOrSaveTopic = useChatStore((s) => s.openNewTopicOrSaveTopic);  return useHotkeyById(HotkeyEnum.SaveTopic, openNewTopicOrSaveTopic);};
export const useRegisterChatHotkeys = () => {  useSaveTopicHotkey();  // ...other hotkeys};

export const useSaveTopicHotkey = () => {  const openNewTopicOrSaveTopic = useChatStore((s) => s.openNewTopicOrSaveTopic);  return useHotkeyById(HotkeyEnum.SaveTopic, openNewTopicOrSaveTopic);};
export const useRegisterChatHotkeys = () => {  useSaveTopicHotkey();  // ...other hotkeys};

5. Add Tooltip (Optional)

tsx

const saveTopicHotkey = useUserStore(settingsSelectors.getHotkeyById(HotkeyEnum.SaveTopic));
<Tooltip hotkey={saveTopicHotkey} title={t('saveTopic.title', { ns: 'hotkey' })}>  <Button icon={<SaveOutlined />} onClick={openNewTopicOrSaveTopic} /></Tooltip>;

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.Mod instead of hardcoded Ctrl or Cmd
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

Source and attribution

Source:lobehub/lobehubin.agents/skills/hotkeyat commit6a3eba9

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Hotkey

Adding Keyboard Shortcuts Guide

Steps to Add a New Hotkey

1. Update Hotkey Constant

2. Register Default Hotkey

3. Add i18n Translation

4. Create and Register Hook

5. Add Tooltip (Optional)

Best Practices

Troubleshooting

Source and attribution

More from lobehub/lobehub

Store Data Structures

Typescript

React

Project Overview

Pr

Linear

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices