skills.rest
duwenji
duwenjiCOMMUNITY
Explore all skills by this author →
GitHub

hotkey

Register keyboard shortcuts in LobeHub via HotkeyEnum and HOTKEYS_REGISTRATION.

1|Updated May 9, 2026
Search Tags:#i18n#keyboard shortcuts#react hooks#tooltip#hotkey scope#type-safe enums#shortcut registration
One-click install
npx skills add https://github.com/duwenji/generative-ai-oss-tutorials --skill hotkey-duwenji
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hotkey
Source: https://github.com/duwenji/generative-ai-oss-tutorials/tree/main/sandbox/lobe-chat/.agents/skills/hotkey
Command: npx skills add https://github.com/duwenji/generative-ai-oss-tutorials --skill hotkey-duwenji

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the friction of adding, editing, and validating keyboard shortcuts in LobeHub so users can trigger actions reliably without shortcut conflicts.

Core Features & Use Cases

  • Hotkey registration workflow: Add new hotkeys by extending the HotkeyEnum and registering them in HOTKEYS_REGISTRATION with correct key combos and scopes.
  • Internationalization support: Provide user-facing titles and descriptions via i18n entries in src/locales/default/hotkey.ts.
  • Hook-based activation: Expose shortcuts through useHotkeyById via hotkey hooks so chat-scoped actions work as expected.
  • UI tooltip integration: Render a <Tooltip> that communicates the assigned shortcut to users.

Quick Start

Use the hotkey skill to add a new chat-scoped shortcut by extending HotkeyEnum, registering it with combineKeys([Key.Mod, ...]) in HOTKEYS_REGISTRATION, adding i18n for its title/description, and wiring it through the appropriate useHotkeyById hook before rendering it via a Tooltip.

Frequently Asked Questions about hotkey

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add keyboard shortcuts to a React application without conflicts?▼

To add keyboard shortcuts without conflicts, register them by extending the HotkeyEnum and adding entries to HOTKEYS_REGISTRATION using combineKeys. This ensures combinations are tracked globally to prevent overlapping assignments.

How do I scope keyboard shortcuts to a specific chat context?▼

Scope keyboard shortcuts to a chat context by registering them in HOTKEYS_REGISTRATION with a defined scope, then exposing the shortcut through the useHotkeyById hook so the action triggers only within that chat context.

What is the best way to display keyboard shortcut hints in a tooltip?▼

Display keyboard shortcut hints by rendering a <Tooltip> component bound to the specific hotkey. This requires registering the shortcut and wiring it through the useHotkeyById hook before rendering the Tooltip UI element.

Do I need to add i18n translations when registering new keyboard shortcuts?▼

Yes, you need to add i18n translations for new keyboard shortcuts. Provide user-facing titles and descriptions by adding entries into the src/locales/default/hotkey.ts file so the shortcut hints display correctly across locales.

How does combineKeys work with Key.Mod modifiers for shortcut registration?▼

combineKeys works by assembling key combinations using Key.Mod modifiers for shortcut registration. You use it within HOTKEYS_REGISTRATION to define the exact modifier and key sequence needed to trigger the action reliably.

Related Skills

Explore More Software Engineering Skills→
lobehublobehub
81.4k

hotkey

Standardize keyboard shortcut creation and registration across a codebase.

Official
Advanced
KorCaptainKorCaptain
1

cst-producer-display

Automate producer enchant and blessing tooltip display in Valheim CaptainSkillTree mods.

Community
Advanced
vishirivishiri
401

fantasia-i18n

Organize Vue i18n locale modules and TypeScript message schemas.

Community
Intermediate
ihj04982ihj04982

deduplicate-global-event-listeners

Deduplicate global event listeners across React components using useSWRSubscription.

Community
Intermediate