TechnicalCommand palette with Cmd or Ctrl+K and fuzzy search
Act as a senior front-end engineer. Add a command palette to {{business_name}}'s app in my {{tech_stack}} project, covering pages, actions and records for {{features}}. If cmdk or a shadcn/ui Command component is already installed, use it.
Opening: Cmd+K on macOS, Ctrl+K elsewhere, plus a visible header button showing the right hint for the platform. Don't steal the shortcut inside rich text editors that use it.
Pattern: a modal dialog containing a combobox input that controls a listbox; aria-activedescendant tracks the active option; focus is trapped and returns to where it came from.
Keyboard: Up and Down move (wrapping), Enter runs, Escape clears the text first and closes second, Backspace on an empty input leaves a nested level, Cmd or Ctrl+Enter opens in a new tab where that makes sense. Show kbd hints right-aligned on each row.
Search:
- fuzzy, scored by exact prefix, then word starts, then acronyms, then loose matches; highlight matched characters with mark
- local commands filter instantly; records come from the server, debounced 150ms, with the previous request aborted
- the active item doesn't jump when async results arrive
Groups: Recent (last 5 per user), Suggested for the current page, Navigation, Actions, Records. Nested commands such as "Change status" open a second level with a breadcrumb in the input.
States: loading row inside the list, never a full-screen spinner; "No results for" the query, with a suggestion; errors with Retry; commands you can't run for your role are hidden, and the server still checks.
Layout: 1280: 640px wide, 12vh from the top, max 420px of results; 768: 560px wide; 360: full-width sheet from the top, input 16px. Rows 40px, 14 to 15px text, group labels 12px.
Motion: 120 to 150ms fade and 4px scale; instant under prefers-reduced-motion. Opens in under 50ms; load the index lazily.
Avoid: making the palette the only way to do something, fuzzy results that reorder while I'm arrowing, slow entrance animations.