skills.rest
lobehub
lobehubOFFICIAL
Explore all skills by this author →
Website𝕏@lobehubGitHub

hotkey

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
One-click install
npx skills add https://github.com/lobehub/lobehub --skill hotkey-lobehub
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
lobehublobehub
81.4k

hotkey

Standardize keyboard shortcut creation and registration across a codebase.

Official
Advanced
cute-baobaocute-baobao

hotkey

Centralize hotkey definitions with constants, defaults, i18n, and hooks.

Community
Intermediate
sonthanhsonthanh
16

handover

Save unfinished session work to a vault handover document and create a GitHub issue.

Community
Advanced
ihj04982ihj04982

deduplicate-global-event-listeners

Deduplicate global event listeners across React components using useSWRSubscription.

Community
Intermediate