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
npx skills add AgentWorkforce/relay --skill implementing-command-palettes --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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 whe
- Overview
- When to Use
- Quick Reference
- Keyboard Navigation
- Critical: Wrapper Pattern for Conditional Rendering
- Input Focus + Window Listener Pattern
- Index Management
- Keeping Selected Item in View
- Using Refs Array
- Alternative: Single Ref for Selected Item
- Filtering with Shortcut Matching
- Preventing Re-Render Loops
- Problem: Unstable References
- Solution: Stable References
What does the implementing-command-palettes skill do?
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
How do I install it?
Run `npx skills add AgentWorkforce/relay --skill implementing-command-palettes --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From AgentWorkforce/relay, a repository with 784 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.