implementing-command-palettes

Implement Cmd+K command palettes in React with keyboard navigation and filtering.

790|60|Updated Dec 17, 2025

Search Tags:#typescript #accessibility #react #javascript #ux #keyboard #command-palette

One-click install

npx skills add https://github.com/AgentWorkforce/relay --skill implementing-command-palettes

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: implementing-command-palettes
Source: https://github.com/AgentWorkforce/relay/tree/main/.claude/skills/implementing-command-palettes
Command: npx skills add https://github.com/AgentWorkforce/relay --skill implementing-command-palettes

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill codifies patterns for building Cmd+K command palettes in React, including keyboard navigation, visibility management, focus handling, and preventing re-render loops.

Core Features & Use Cases

Keyboard Navigation: Arrow keys, selection state, and focus management.
Visibility & Scroll: Keep the selected item in view with smooth scrolling.
Filtering & Shortcuts: Filter commands by label and shortcut text.
Use Case: Build a Cmd+K palette for a developer tool with responsive, accessible UX.

Quick Start

Ask Claude to implement a minimal Cmd+K palette in React with arrow navigation, filtering by label, and a visible selection.