Hotkey

If you're adding keyboard shortcuts to a LobeHub chat app, this walks you through the five-step pattern: declare the enum in HotkeyEnum, register it in HOTKEYS_REGISTRATION with combineKeys, add i18n translations, wire up the useHotkeyById hook, and optionally surface it in a tooltip. It covers scoping (chat vs global), cross-platform key mapping with Key.Mod, and conflict checking. The guide is clearly written for a specific codebase structure, so it's most useful if you're working in that architecture or adapting something similar. Nice that it includes troubleshooting for common issues like scope mismatches and registration problems.

skills.sh installs: 4.1K
GitHub stars: 84.6K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add lobehub/lobehub --skill hotkey --agent claude-code

Installs into .claude/skills of the current project.

Files

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:

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

SKILL.md on GitHub

Details

Repository: github.com/lobehub/lobehub
First seen: Apr 16, 2026