skills.rest
OpenSourceAGI
OpenSourceAGIOFFICIAL
Explore all skills by this author →
GitHub

hotkey

Implements LobeHub keyboard shortcuts through HotkeyEnum registration, hooks, and i18n translations.

74|11|Updated Jul 4, 2024
Search Tags:#typescript#frontend#i18n#keyboard shortcuts#react hooks#hotkeys#lobehub
One-click install
npx skills add https://github.com/OpenSourceAGI/qwksearch-research-agent --skill hotkey-opensourceagi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hotkey
Source: https://github.com/OpenSourceAGI/qwksearch-research-agent/tree/main/apps/qwk-in-lobe/.agents/skills/hotkey
Command: npx skills add https://github.com/OpenSourceAGI/qwksearch-research-agent --skill hotkey-opensourceagi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Adding keyboard shortcuts in the LobeHub codebase requires coordinated changes across type definitions, registration constants, locale files, and React hooks, which is error-prone without a documented procedure. ## Core Features & Use Cases - Hotkey Registration: Guides updates to HotkeyEnum, HOTKEYS_REGISTRATION, and combineKeys with proper scope and grouping. - Hook Integration: Shows how to create useHotkeyById-based hooks and register them in scope-specific files like chatScope.ts. - i18n and Tooltips: Covers adding hotkey translations and displaying shortcut hints in Tooltip components. - Use Case: When adding a 'clear chat' shortcut, follow the five-step workflow to wire the enum, default key combo (Mod+Shift+Backspace), translations, hook, and tooltip without missing a file. ## Quick Start Add a new keyboard shortcut for clearing the current chat conversation following the hotkey guide.

Frequently Asked Questions about hotkey

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

FAQPage Schema
How do I add a keyboard shortcut in LobeHub?▼

Add the shortcut ID to HotkeyEnum in src/types/hotkey.ts, register default keys in HOTKEYS_REGISTRATION, add i18n translations, then create a hook with useHotkeyById and register it in the appropriate scope file.

How to show keyboard shortcuts in a tooltip in React?▼

Retrieve the hotkey with settingsSelectors.getHotkeyById from the user store, then pass it to the Tooltip component's hotkey prop alongside the translated title from the hotkey namespace.

Should I use Ctrl or Cmd for cross-platform hotkeys?▼

Use Key.Mod from @lobehub/ui instead of hardcoding Ctrl or Cmd. The Mod key automatically maps to Cmd on macOS and Ctrl on other platforms, ensuring consistent cross-platform behavior.

Why is my registered hotkey not working?▼

Check that the scope matches where the shortcut should be active and that the hook is called in the RegisterHotkeys component. Also verify the entry exists in HOTKEYS_REGISTRATION and does not conflict with browser shortcuts.

How do I avoid keyboard shortcut conflicts?▼

Choose key combinations that do not overlap with system or browser defaults, and assign the correct scope (global or chat). The HotkeyInput component in settings displays warnings when conflicts are detected.

Related Skills

Explore More Software Engineering Skills→
alceupassosalceupassos

builtin-tool

Develop and manage built-in tools for the LobeHub AI agent platform.

Community
Advanced
samiabidsamiabid

hotkey

Define and register standardized keyboard shortcuts with conflict detection.

Community
Basic
bbvch-aibbvch-ai
9

i18n

Validate translation coverage across four locales in Nuxt and python-i18n systems.

Official
Intermediate
OpenCovenOpenCoven
20

command-palette-keyboard-ux

Design keyboard-driven command palettes in React using cmdk.

Official
Intermediate