hotkey

Name: hotkey
Availability: InStock
Author: LobeHub

Standardize keyboard shortcut creation and registration across a codebase.

81.4k|15.8k|Updated May 21, 2023

Search Tags:#frontend #UI #hooks #i18n #keyboard shortcuts #registration #hotkeys

Ready to run

npx skills add https://github.com/lobehub/lobehub --skill hotkey-lobehub

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: hotkey
Source: https://github.com/lobehub/lobehub/tree/main/.agents/skills/hotkey
Command: npx skills add https://github.com/lobehub/lobehub --skill hotkey-lobehub

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide helps teams implement and standardize keyboard shortcuts across applications, reducing repetitive actions and improving UX consistency.

Core Features & Use Cases

Define and register new hotkeys: Create a centralized workflow for introducing keyboard shortcuts that work consistently across components.
Hook and register: Wire up hotkeys through a dedicated hook to ensure responsive actions within the appropriate UI scope.
Internationalization and accessibility: Add translations for shortcut labels and provide tooltip support to explain actions to users.
Use Case: When building an editor, add a global save shortcut and per-panel shortcuts that map to common actions like search or command palette.

Quick Start

Define a new hotkey constant in your hotkey constants file.
Register the hotkey in the hotkeys registry with the desired key combination.
Provide an i18n entry for the shortcut description.
Create or update a hook to trigger the action when the shortcut is pressed.
Optionally add a tooltip to explain the shortcut in the UI.

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 frontend application?▼

To add keyboard shortcuts to a frontend application, define hotkey constants, register them in a central registry, and wire them through dedicated hooks to trigger responsive actions within specific UI scopes.

What is the best way to standardize hotkeys across different UI components?▼

Standardizing hotkeys across UI components involves creating a centralized registration workflow with consistent constants, ensuring keyboard shortcuts behave uniformly across different panels and platforms.

How do I add internationalization to keyboard shortcut labels?▼

To add internationalization to keyboard shortcut labels, provide i18n entries for each shortcut description during the registration process to ensure actions are correctly translated for users.

Can I add UI tooltips for registered keyboard shortcuts?▼

Yes, you can optionally add UI tooltips for registered keyboard shortcuts to explain their actions to users, improving overall UX consistency and accessibility within the application.

How do I wire a hook to trigger an action when a shortcut is pressed?▼

To wire a hook to trigger an action, create or update a dedicated hook that listens for registered hotkey combinations, ensuring responsive behavior when the specific keyboard shortcut is pressed.

Do I need to register global and per-panel shortcuts separately?▼

You can register both global and per-panel shortcuts separately to map common actions like search or command palette, ensuring responsive actions are scoped to the appropriate UI context.