How do I handle Mac Cmd vs Windows Ctrl automatically?

Use the 'Mod' keyword in your shortcut strings (e.g., 'Mod+S'). The library automatically resolves this to Meta on macOS and Control on Windows and Linux.

Can I use this skill to build a custom shortcut settings menu?

Yes, the skill covers the useHotkeyRecorder hook, which is specifically designed to capture user keyboard input and convert it into portable strings for storage.

Does it work correctly within text inputs and forms?

Yes, it features 'smart' ignore logic. Mod-based shortcuts and Escape trigger inside inputs, while single-character shortcuts are ignored to prevent typing interference.

What makes TanStack Hotkeys different from other shortcut libraries?

It is type-safe, framework-agnostic at its core, and handles complex scenarios like multi-key sequences, 'Mod' abstraction, and platform-aware formatting natively.

TanStack Hotkeys Guide

Name: TanStack Hotkeys Guide
Author: vcode-sh

byvcode-sh

•

開発者ツール

Implements type-safe, cross-platform keyboard shortcuts and Vim-style sequences in React applications using TanStack Hotkeys.

The TanStack Hotkeys Guide skill provides comprehensive expertise for integrating @tanstack/react-hotkeys into web applications. It streamlines the implementation of complex keyboard interactions, including multi-key sequences, hotkey recording for settings UIs, and platform-aware display formatting. By leveraging type-safe hooks like useHotkey and useHotkeySequence, this skill ensures robust shortcut handling while managing common pitfalls like input focus, stale closures, and macOS-specific keyboard quirks. It is ideal for developers building keyboard-centric productivity tools or professional web interfaces that require deep accessibility and power-user features.

主な機能

01Platform-aware display formatting for UI shortcut badges

02Reactive key-state tracking and real-time held-key monitoring

03Interactive hotkey recording for user-defined shortcut UIs

04Cross-platform shortcut mapping with 'Mod' key abstraction

0516 GitHub stars

06Vim-style multi-key sequence support for complex navigation

ユースケース

01Implementing complex Vim-like navigation sequences in a high-productivity web dashboard

02Adding 'Mod+S' save shortcuts that work seamlessly on both macOS and Windows

03Building a keyboard shortcut customization interface with a dedicated recording hook

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add vcode-sh/vibe-tools tanstack-hotkeys-guide

For use in Claude.ai and ChatGPT

Download Skill