hotkey_skill

Overview

This skill guides developers through adding and managing keyboard shortcuts (hotkeys) in a TypeScript app. It explains where to declare new hotkey constants, how to register defaults, add translations, create hooks, and optionally show tooltips. The goal is reliable, conflict-free hotkeys that respect scope and platform conventions.

How this skill works

The skill inspects the hotkey lifecycle: enum declaration, registration in the default config, i18n entry, and hook registration for activation. It also shows how to bind a handler using a helper hook and surface the shortcut in the UI with an optional tooltip. It enforces scope-aware behavior and recommends using modifier abstractions for cross-platform consistency.

When to use it

• Implementing a new keyboard shortcut or modifying an existing one
• Registering default hotkeys so they appear in settings and work by default
• Binding handlers that respond to shortcut activation in specific scopes
• Ensuring shortcuts are localized and visible in the UI
• Troubleshooting shortcuts that fail to trigger or conflict with others

Best practices

• Declare the hotkey identifier in the hotkey enum to keep keys centralized
• Register defaults in the hotkey registration list so settings and UI reflect the shortcut
• Use scope-aware hooks to activate shortcuts only where appropriate (global vs chat)
• Prefer Key.Mod (modifier abstraction) for cross-platform Ctrl/Cmd behavior
• Provide clear title and description translations for user-facing settings
• Check for conflicts with browser/system shortcuts before choosing a combination

Example use cases

• Add ClearChat: declare enum, register Hotkey with Mod+Shift+Backspace, add i18n, implement a useClearChatHotkey hook
• Create a SaveDraft shortcut scoped to the editor group and register it under the editor scope
• Expose a frequently used action in the toolbar with a Tooltip that shows the registered hotkey
• Migrate hardcoded modifiers to Key.Mod across the codebase to avoid platform-specific bugs
• Debug a page-specific hotkey by verifying the scope and that the register hook runs on that page