#601

Globales Ranking · von 601 Skills

tanstack-hotkeys AI Agent Skill

Quellcode ansehen: oakoss/agent-skills

Safe

Installation

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

55

Installationen

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

Installationen

Installationen 55
Globales Ranking #601 von 601

Sicherheitsprüfung

ath Safe
socket Safe
Warnungen: 0 Bewertung: 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

So verwenden Sie diesen Skill

1

Install tanstack-hotkeys by running npx skills add oakoss/agent-skills --skill tanstack-hotkeys in your project directory. Führen Sie den obigen Installationsbefehl in Ihrem Projektverzeichnis aus. Die Skill-Datei wird von GitHub heruntergeladen und in Ihrem Projekt platziert.

2

Keine Konfiguration erforderlich. Ihr KI-Agent (Claude Code, Cursor, Windsurf usw.) erkennt installierte Skills automatisch und nutzt sie als Kontext bei der Code-Generierung.

3

Der Skill verbessert das Verständnis Ihres Agenten für tanstack-hotkeys, und hilft ihm, etablierte Muster zu befolgen, häufige Fehler zu vermeiden und produktionsreifen Code zu erzeugen.

Was Sie erhalten

Skills sind Klartext-Anweisungsdateien — kein ausführbarer Code. Sie kodieren Expertenwissen über Frameworks, Sprachen oder Tools, das Ihr KI-Agent liest, um seine Ausgabe zu verbessern. Das bedeutet null Laufzeit-Overhead, keine Abhängigkeitskonflikte und volle Transparenz: Sie können jede Anweisung vor der Installation lesen und prüfen.

Kompatibilität

Dieser Skill funktioniert mit jedem KI-Coding-Agenten, der das skills.sh-Format unterstützt, einschließlich Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider und anderen Tools, die projektbezogene Kontextdateien lesen. Skills sind auf Transportebene framework-agnostisch — der Inhalt bestimmt, für welche Sprache oder welches Framework er gilt.

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
Kundensupport