skills.rest
kingheu0818-sketch
kingheu0818-sketchCOMMUNITY
Explore all skills by this author →
GitHub

hotkey

Register LobeHub keyboard shortcuts with scopes, i18n, and tooltips.

Updated Aug 23, 2026
Search Tags:#i18n#event handling#keyboard shortcuts#react hooks#hotkeys#ui tooltip#scoped actions
One-click install
npx skills add https://github.com/kingheu0818-sketch/lobehub_yu --skill hotkey-kingheu0818-sketch
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hotkey
Source: https://github.com/kingheu0818-sketch/lobehub_yu/tree/main/.agents/skills/hotkey
Command: npx skills add https://github.com/kingheu0818-sketch/lobehub_yu --skill hotkey-kingheu0818-sketch

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide helps you reliably add, edit, and troubleshoot keyboard shortcuts so they work consistently across chat scope and global scope without guesswork.

Core Features & Use Cases

  • Hotkey definition & registration: Add a new hotkey to the hotkey enum and wire it into the central HOTKEYS_REGISTRATION with the correct key combo and scope.
  • User-facing i18n: Provide localized title and description so the shortcut appears correctly in settings and tooltips.
  • Hook + tooltip integration: Expose the hotkey through useHotkeyById and render a Tooltip so users understand what the shortcut does.

Quick Start

Ask the AI to walk you through adding a new scoped hotkey in LobeHub for “Clear Chat” and include the enum entry, registration keys, i18n strings, and the hook wiring.

Frequently Asked Questions about hotkey

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

FAQPage Schema
How do I add and register keyboard shortcuts in a React application?▼

Yes, you can scope keyboard shortcuts to chat or global levels. By attaching scopes during hotkey registration, you prevent conflicts and ensure actions like clearing messages or displaying tooltips trigger only in the intended context.

How do I display UI tooltips for registered hotkeys?▼

You display UI tooltips by rendering a Tooltip component with Key.Mod-based combos. This visual affordance helps users understand what the registered keyboard shortcut does directly within the interface.

Do I need i18n translations for custom keyboard shortcuts?▼

Yes, you need i18n translations for custom keyboard shortcuts. Providing localized title and description strings ensures the shortcut labels and tooltips appear correctly for users in the settings menu.

What is the best way to troubleshoot hotkeys not working in LobeHub?▼

Troubleshooting hotkeys involves verifying the hotkey ID in HotkeyEnum, checking the central HOTKEYS_REGISTRATION for correct key combos, and ensuring the useHotkeyById hook is properly wired to prevent conflicts using Key.Mod-based combos.

Can I use react hooks to manage global and chat-level keyboard shortcuts?▼

Yes, you use react hooks like useHotkeyById to manage global and chat-level keyboard shortcuts. This approach binds scoped actions to defined key combinations, ensuring reliable workflow execution across different application contexts.

Related Skills

Explore More Software Engineering Skills→
duwenjiduwenji

hotkey

Register keyboard shortcuts in LobeHub via HotkeyEnum and HOTKEYS_REGISTRATION.

Community
Intermediate
kingmacthkingmacth

hotkey

Organize keyboard shortcuts by declaring constants, registering bindings, and wiring UI hooks.

Community
Intermediate
Italo520Italo520

react-ui-patterns

Standardize React UI loading, error, empty, and data states with reusable patterns.

Community
Intermediate
Dzakiamriz22Dzakiamriz22
1

command-palette

Implement keyboard-accessible command palettes with the shadcn/ui Command component.

Community
Intermediate