#601

Global Rank · of 601 Skills

tanstack-hotkeys AI Agent Skill

View Source: oakoss/agent-skills

Safe

Installation

npx skills add oakoss/agent-skills --skill tanstack-hotkeys

55

Installs

TanStack Hotkeys

Overview

TanStack Hotkeys is a type-safe keyboard shortcuts library for React with template-string bindings, cross-platform Mod key abstraction (Cmd on macOS, Ctrl on Windows/Linux), and SSR-friendly utilities. It provides hooks for single hotkeys, multi-key sequences, shortcut recording, and real-time key state tracking, plus platform-aware display formatting.

When to use: Adding keyboard shortcuts to React apps, recording user-defined hotkeys, detecting held modifier keys, displaying platform-specific shortcut labels, implementing Vim-style key sequences.

When NOT to use: Non-React apps without a wrapper (core package exists but React is the primary target), complex input handling that needs full keymap management (consider a dedicated keymap library).

Quick Reference

Pattern API Key Points
Single hotkey useHotkey Mod abstracts Cmd/Ctrl; auto-prevents default on combos
Multi-key sequence useHotkeySequence Vim-style sequences like g g; configurable timeout
Record shortcuts useHotkeyRecorder User-defined shortcuts; start/stop/cancel recording
Detect key held useKeyHold Boolean for specific key; optimized re-renders
Track all held keys useHeldKeys Array of currently pressed key names
Track held key codes useHeldKeyCodes Map of key names to physical event.code values
Global defaults HotkeysProvider Set default options for all hooks; per-hook overrides apply
Format for display formatForDisplay Platform-aware: macOS symbols vs Windows/Linux text
Scope to element target option + ref Requires tabIndex on target element for focus
Conditional hotkeys enabled option Dynamically enable/disable without unmounting

Common Mistakes

Mistake Correct Pattern
Missing tabIndex on scoped target element Add tabIndex={-1} (or 0) to elements using target ref for focus
Using Ctrl instead of Mod Use Mod for cross-platform; it maps to Cmd (Mac) or Ctrl (Win/Linux)
Assuming hotkeys fire inside inputs ignoreInputs defaults to smart detection; set false to force firing
Duplicate hotkey registrations without config Set conflictBehavior: 'replace' to override, or 'error' to catch
Forgetting preventDefault is auto-enabled Modifier combos auto-prevent; set preventDefault: false to allow default
Using keyup without requireReset Combine eventType: 'keyup' with requireReset: true to fire once

Delegation

If the tanstack-pacer skill is available, delegate throttling and debouncing tasks to it. TanStack Pacer is useful for rate-limiting hotkey callbacks.
Otherwise, recommend: pnpm dlx skills add oakoss/agent-skills -s tanstack-pacer -a claude-code -y

If the tanstack-devtools skill is available, delegate devtools setup to it.
Otherwise, recommend: pnpm dlx skills add oakoss/agent-skills -s tanstack-devtools -a claude-code -y

  • Keyboard shortcuts and hotkeys: Use this skill
  • Throttling/debouncing hotkey callbacks: Delegate to tanstack-pacer
  • DevTools integration: Delegate to tanstack-devtools

References

Installs

Installs 55
Global Rank #601 of 601

Security Audit

ath Safe
socket Safe
Alerts: 0 Score: 90
snyk Low
EU EU-Hosted Inference API

Power your AI Agents with the best open-source models.

Drop-in OpenAI-compatible API. No data leaves Europe.

Explore Inference API

GLM

GLM 5

$1.00 / $3.20

per M tokens

Kimi

Kimi K2.5

$0.60 / $2.80

per M tokens

MiniMax

MiniMax M2.5

$0.30 / $1.20

per M tokens

Qwen

Qwen3.5 122B

$0.40 / $3.00

per M tokens

How to use this skill

1

Install tanstack-hotkeys by running npx skills add oakoss/agent-skills --skill tanstack-hotkeys in your project directory. Run the install command above in your project directory. The skill file will be downloaded from GitHub and placed in your project.

2

No configuration needed. Your AI agent (Claude Code, Cursor, Windsurf, etc.) automatically detects installed skills and uses them as context when generating code.

3

The skill enhances your agent's understanding of tanstack-hotkeys, helping it follow established patterns, avoid common mistakes, and produce production-ready output.

What you get

Skills are plain-text instruction files — not executable code. They encode expert knowledge about frameworks, languages, or tools that your AI agent reads to improve its output. This means zero runtime overhead, no dependency conflicts, and full transparency: you can read and review every instruction before installing.

Compatibility

This skill works with any AI coding agent that supports the skills.sh format, including Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider, and other tools that read project-level context files. Skills are framework-agnostic at the transport level — the content inside determines which language or framework it applies to.

Data sourced from the skills.sh registry and GitHub. Install counts and security audits are updated regularly.

EU Made in Europe

Chat with 100+ AI Models in one App.

Use Claude, ChatGPT, Gemini alongside with EU-Hosted Models like Deepseek, GLM-5, Kimi K2.5 and many more.

Start for free View pricing
Customer Support