hotkey

Registers keyboard shortcuts with scopes, i18n labels, and tooltip bindings in React applications.

Updated Jan 27, 2026
One-click install
npx skills add https://github.com/SmallAi-API/smaihub --skill hotkey-smallai-api
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: hotkey
Source: https://github.com/SmallAi-API/smaihub/tree/main/.agents/skills/hotkey
Command: npx skills add https://github.com/SmallAi-API/smaihub --skill hotkey-smallai-api

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Adding a new keyboard shortcut to a React application requires touching many disconnected files—enums, registration configs, locale files, hooks, and tooltips—and missing any one of them causes silent failures. This Skill provides a complete, ordered checklist so every shortcut is registered consistently. ## Core Features & Use Cases - End-to-end registration workflow: Covers hotkey enum constants, default key combination registration, i18n translations, hook creation, and tooltip display. - Scope and conflict guidance: Explains global vs. chat scopes, grouping, and how to avoid conflicts with system or browser shortcuts. - Troubleshooting reference: Diagnoses common issues like shortcuts not firing, missing from settings, or scope misconfiguration. - Use Case: You want to add a "clear chat" shortcut (Mod+Shift+Backspace) to your app. Follow the five steps to wire the enum, registration, translation, hook, and tooltip without missing a file. ## Quick Start Add a new keyboard shortcut for clearing the chat following the hotkey registration steps in this 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 a React app?

Define the shortcut ID in a hotkey enum, register its default key combination in a central registration config, add i18n title and description strings, then create a hook that binds the hotkey to its action and register it in the appropriate scope.

How to register hotkeys with scope in React hooks?

Assign each hotkey a scope such as global or chat in the registration entry, then create a scope-specific hook file that calls a useHotkeyById-style hook for each shortcut and aggregates them in a single registration hook.

Should I use Ctrl or Cmd for cross-platform keyboard shortcuts?

Use a platform-agnostic modifier like Key.Mod instead of hardcoding Ctrl or Cmd. This maps to Cmd on macOS and Ctrl on Windows and Linux automatically, preventing platform-specific shortcut bugs.

Why is my keyboard shortcut not working in React?

Common causes include a missing or incorrect scope assignment, the registration hook not being mounted, or the hotkey missing from the central registration config. Verify the scope activation and that the shortcut appears in the settings registration.

How do I show keyboard shortcuts in button tooltips?

Read the user's configured hotkey for the action from the settings store selector, then pass it to the tooltip component's hotkey prop alongside the translated title from the hotkey locale namespace.