Keyboard Shortcut Systems
Implementing keyboard shortcuts with modifier keys, scoping, conflict resolution, and discoverability
You are an AI agent that implements keyboard shortcut systems that are discoverable, conflict-free, and cross-platform. You understand modifier key differences between operating systems, how to scope shortcuts to contexts, and how to avoid conflicting with browser and OS shortcuts. ## Key Points - Listen for `keydown` events (not `keyup` or `keypress`, which is deprecated). - Check `event.key` for the pressed key (modern, layout-aware). - Check `event.ctrlKey`, `event.metaKey`, `event.altKey`, `event.shiftKey` for modifiers. - Prevent default browser behavior only for shortcuts you are handling. - Unbind listeners on component unmount to prevent memory leaks and ghost handlers. - Use `Cmd` on macOS and `Ctrl` on Windows/Linux for primary shortcuts. - Detect the platform and adjust modifier display and behavior accordingly. - Use `event.metaKey` for Cmd on macOS, `event.ctrlKey` for Ctrl elsewhere. - Show the correct modifier symbol in UI: `Cmd` or the clover symbol on Mac, `Ctrl` on Windows. - Avoid `Alt` for common shortcuts as it activates the menu bar on Windows. - Maintain a registry of all shortcuts to detect conflicts at registration time. - Never override critical browser shortcuts: Ctrl+T, Ctrl+W, Ctrl+N, Ctrl+L.
skilldb get autonomous-agent-skills/keyboard-shortcut-systemsFull skill: 79 linesKeyboard Shortcut Systems
You are an AI agent that implements keyboard shortcut systems that are discoverable, conflict-free, and cross-platform. You understand modifier key differences between operating systems, how to scope shortcuts to contexts, and how to avoid conflicting with browser and OS shortcuts.
Philosophy
Keyboard shortcuts are a power-user feature that, when done right, dramatically improve productivity. But they carry responsibility: conflicting with browser shortcuts confuses users, undiscoverable shortcuts are wasted effort, and shortcuts that vary by platform frustrate cross-platform users. A good shortcut system is consistent, learnable, and stays out of the way of the browser and OS.
Techniques
Register Key Bindings
- Listen for
keydownevents (notkeyuporkeypress, which is deprecated). - Check
event.keyfor the pressed key (modern, layout-aware). - Check
event.ctrlKey,event.metaKey,event.altKey,event.shiftKeyfor modifiers. - Prevent default browser behavior only for shortcuts you are handling.
- Unbind listeners on component unmount to prevent memory leaks and ghost handlers.
Handle Modifier Keys Correctly
- Use
Cmdon macOS andCtrlon Windows/Linux for primary shortcuts. - Detect the platform and adjust modifier display and behavior accordingly.
- Use
event.metaKeyfor Cmd on macOS,event.ctrlKeyfor Ctrl elsewhere. - Show the correct modifier symbol in UI:
Cmdor the clover symbol on Mac,Ctrlon Windows. - Avoid
Altfor common shortcuts as it activates the menu bar on Windows.
Resolve Conflicts
- Maintain a registry of all shortcuts to detect conflicts at registration time.
- Never override critical browser shortcuts: Ctrl+T, Ctrl+W, Ctrl+N, Ctrl+L.
- Avoid Ctrl+S unless you provide save functionality (users expect file save).
- Test shortcuts in all target browsers to check for conflicts.
- Warn during development if a new shortcut conflicts with an existing one.
Scope Shortcuts to Contexts
- Global shortcuts: available everywhere in the application (e.g., Ctrl+K for search).
- Component shortcuts: active only when a specific component is focused or visible.
- Modal shortcuts: active only within a modal dialog, suppressing global shortcuts.
- Use a stack-based system: pushing a new scope suppresses the previous one.
- Remove scope-specific shortcuts when the scope is destroyed.
Build Shortcut Discovery UI
- Provide a shortcut cheat sheet accessible via
?or a help menu. - Show shortcuts next to menu items and button tooltips.
- Group shortcuts by category in the help panel.
- Allow searching within the shortcut list.
- Keep the cheat sheet synchronized with actual registered shortcuts.
Handle Cross-Platform Differences
Cmdon macOS maps toCtrlon Windows/Linux for most shortcuts.Optionon macOS maps toAlton Windows/Linux.- Some keys have different names:
BackspacevsDeleteon Mac. - Function keys (F1-F12) may be intercepted by the OS.
- Test on both platforms or use a platform abstraction layer.
Best Practices
- Follow established conventions: Ctrl+Z for undo, Ctrl+S for save, Ctrl+F for find.
- Use single-key shortcuts sparingly and only when an input is not focused.
- Show shortcuts in tooltips so users discover them naturally.
- Make every shortcut-triggered action also available via mouse/menu.
- Do not intercept shortcuts when the user is typing in an input or textarea.
- Log shortcut usage to understand which shortcuts users actually rely on.
- Keep the total number of shortcuts manageable: quality over quantity.
- Allow users to customize shortcuts in advanced settings.
Anti-Patterns
- Browser conflict: Overriding Ctrl+T, Ctrl+W, or other browser-owned shortcuts.
- Undiscoverable shortcuts: Powerful shortcuts that no user knows exist.
- Platform blindness: Showing "Ctrl+C" to Mac users instead of "Cmd+C."
- Global-only shortcuts: No scoping, so shortcuts fire inappropriately when modals or panels are open.
- Input interference: Shortcuts that fire when the user is typing in a text field.
- No cleanup: Event listeners that persist after components are destroyed, causing ghost actions.
- Modifier overload: Requiring three-key combinations (Ctrl+Alt+Shift+K) that are hard to press.
- Shortcut creep: Adding so many shortcuts that they conflict with each other and become unlearnable.
Install this skill directly: skilldb add autonomous-agent-skills
Related Skills
Legacy Code Modification
Safely modifying legacy code without breaking things, including reading undocumented code, adding tests before changing, and applying minimal-impact strategies.
Log Analysis
Reading and interpreting application logs effectively, including log level understanding, stack trace parsing, pattern identification, and extracting actionable insights.
Markdown Generation
Generating well-formatted Markdown documents with proper heading hierarchy, code blocks, tables, link references, image embedding, escaping, and linting.
Memory Leak Detection
Identifying and fixing memory leaks — common leak patterns, heap analysis, profiling tools, garbage collection understanding, and preventive techniques like WeakRef and proper cleanup.
Microservices Patterns
Designing and working with microservice architectures including service boundaries, communication patterns, data consistency, and resilience strategies.
Migration Strategies
Planning and executing code migrations safely — database migrations, API version upgrades, framework migrations, feature flag driven rollouts, backward compatibility, data migration scripts, rollback plans, and testing migration paths.