Implementing Command Palettes

This covers the mechanical details of building Cmd+K command palettes in React without the infinite re-render headaches. It walks through the wrapper component pattern to prevent keyboard listeners firing when closed, arrow key navigation that clamps indices properly, scrollIntoView with block nearest to avoid jarring jumps, and the crucial bit about defining icon elements outside your component so they don't break reference equality. The shortcut matching strips spaces so "gd" finds "g d" commands. If you've fought with a command palette that feels laggy or re-renders constantly when filtering, the stable references section explains exactly why that happens and how to fix it.

GitHub stars: 719
last updated: Jun 11, 2026

View on GitHub

Install

$ npx -y skills add agentworkforce/relay --skill implementing-command-palettes --agent claude-code

Installs into .claude/skills of the current project.

Files

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