Agent skill · software engineering · aiskillstore
implementing-command-palettes
Use when building Cmd+K command palettes in React - covers keyboard navigation with arrow keys, keeping selected items in view with scrollIntoView, filtering with shortcut matching, and preventing infinite re-renders from reference instability
Why this skill is useful
Provides specific implementation patterns and React hooks for building responsive command palettes that the AI wouldn't reliably generate on its own.
What it needs
About 6k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Implementing Command Palettes Overview Command palettes (Cmd+K / Ctrl+K) need precise keyboard navigation, scroll behavior, and stable references to avoid re-render loops. This skill covers the mechanical patterns that make command palettes feel responsive. When to Use Building a Cmd+K command palette in React Implementing arrow key navigation with visual selection Keeping selected items visible during keyboard navigation Filtering commands by label text AND keyboard shortcuts Experiencing infinite re-renders when commands update Quick Reference Feature Implementation ----------------- ---------------------------------------------------------- Arrow navigation Track selectedIndex, clamp with Math.min/max Keep in view scrollIntoView({ block: 'nearest', behavior: 'smooth' }) Shortcut matching Strip spaces from shortcuts, match against query Stable icons Define icon elements outside component Stable handlers useCallback + noop constant for disabled states Keyboard Navigation Critical: Wrapper Pattern for Conditional Rendering This is the most common source of bugs. The keyboard effect must ONLY run when the palette is open. Use a wrapper component: Why this matters: If you put if (!isOpen) return null AFTER useEffect hooks, the effects still run when closed This causes keyboard listeners to be registered even when palette is invisible The wrapper pattern ensures effects only run when the component actually renders Input Focus + Window Listener Pattern The input MUST be focused (for typing to work), and keyboard navigation MUST use window.addEventListener. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/implementing-command-palettes