Command Palette Power Patterns

Product outcome

A command palette should feel instant, trustworthy, and keyboard-native under real user load.

Core contract

Every command has:

• stable id
• label and description
• category
• optional shortcut prefix
• execute handler with controlled side effects

Ranking strategy

Use weighted scoring:

• exact id or name match: 100
• prefix shortcut match: 95
• startsWith: 80
• includes: 50
• recent usage boost: +10

Safety patterns

• prevent duplicate execute on key repeat
• debounce heavy search operations
• isolate async command failures and show toast
• keep parser pure for unit tests

Keyboard contract

• Cmd or Ctrl + K opens
• Cmd or Ctrl + Shift + P opens
• Arrow keys cycle
• Enter executes highlighted item
• Escape clears query, then closes

Reference parser

export function parseShortcutQuery(input: string): { shortcut: string; payload: string } | null {
  const trimmed = input.trim();
  const match = trimmed.match(/^(\\w+)\\s+(.+)$/);
  if (!match) return null;
  return { shortcut: match[1].toLowerCase(), payload: match[2] };
}

Observability

Capture:

• palette_opened
• command_ranked
• command_executed
• command_failed
• command_latency_ms

Performance targets

• input to first ranked result under 50ms
• arrow navigation no jank
• open animation under 150ms

Anti-patterns

• hardcoded commands inside component template
• no ownership model for command providers
• hidden keyboard shortcuts without discoverability hints