Menu
Build keyboard-driven command palettes using cmdk + shadcn/ui. Use when: (1) Adding command palette to web apps, (2) Implementing keyboard navigation, (3) Building spotlight-style search, (4) Setting up cmdk with shadcn components.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | web-ux-command-palette |
| description | Build keyboard-driven command palettes using cmdk + shadcn/ui. Use when: (1) Adding command palette to web apps, (2) Implementing keyboard navigation, (3) Building spotlight-style search, (4) Setting up cmdk with shadcn components. |
Build performant, keyboard-first command palettes using cmdk (the industry standard) with shadcn/ui components.
Why cmdk + shadcn:
| Component | Purpose |
|---|---|
CommandDialog | Modal wrapper (Dialog + Command) |
CommandInput | Search input with icon |
CommandList | Scrollable results container |
CommandEmpty | "No results" state |
CommandGroup | Categorized sections with headings |
CommandItem | Individual selectable items |
CommandSeparator | Visual divider between groups |
CommandShortcut | Keyboard shortcut hint display |
<CommandDialog open={open} onOpenChange={setOpen}>
<CommandInput placeholder="Type a command..." />
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup heading="Navigation">
<CommandItem onSelect={() => navigate('/home')}>
<HomeIcon /> Home
</CommandItem>
</CommandGroup>
</CommandList>
</CommandDialog>
Standard bindings:
Cmd+K / Ctrl+K - Open/close (standard convention)/ - Open (when not in input field)Escape - CloseEnter - SelectImplementation:
useEffect(() => {
const handler = (e: KeyboardEvent) => {
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
e.preventDefault();
setOpen(prev => !prev);
}
if (e.key === '/' && !isInputFocused(e.target)) {
e.preventDefault();
setOpen(true);
}
};
document.addEventListener('keydown', handler);
return () => document.removeEventListener('keydown', handler);
}, []);
function isInputFocused(target: EventTarget | null): boolean {
return target instanceof HTMLElement &&
['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName);
}
Static sites:
Dynamic:
Structure:
interface SearchItem {
title: string;
description?: string;
href: string;
type: string; // e.g., "page", "blog", "command"
keywords?: string[];
}
cmdk search:
value prop on CommandItemvalue={title + ' ' + keywords?.join(' ')}Height:
<CommandList className="max-h-[300px]">
Dialog position:
DialogContentItem states:
<CommandItem className="data-[selected=true]:bg-accent">
Built-in:
Ensure:
Manage Obsidian vault frontmatter with rematter — validate schemas, sync to external destinations (Astro, etc.) with media options, rename fields, manage filenames. Load whenever performing bulk operations in Obsidian vaults (or other collections of markdown with frontmatter).
Use when asked to automate an action for OpenCode, for example run a formatter after edits, or running a script right before git commits, those are hooks and you should use this skill to implement them.
Guide the learner through a structured goal-setting exercise grounded in research on Mental Contrasting with Implementation Intentions (MCII). The exercise helps developers set concrete learning goals, visualize meaningful outcomes, anticipate realistic obstacles, and build if-then plans to overcome them.
Facilitates deliberate skill development during AI-assisted coding. Offers interactive learning exercises after architectural work (new files, schema changes, refactors). Use when completing features, making design decisions, or when user asks to understand code better. Supports the user's stated goal of understanding design choices as learning opportunities.
Generates a repo-specific orientation.md resource for the learning-opportunities skill. Only invoke via slash command (/orient:orient). Do not trigger automatically.
Use when asked to add or modify hooks for Claude Code specifically. Or, if the user is asking to automate an action, for example run a formatter after edits, or running a script right before git commits, those are hooks and you should use this skill to implement them.