Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →agentworkforce/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
Passed 21 of 22 test cases with the skill, and 16 of 22 without it.
and 8 more in the full report
5 fixed16 passed either way1 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 5 test cases the skill fixed. Same model, same prompt, with and without the skill.
I am building a React command palette dialog and need help writing the keydown listener and auto-scrolling logic. Please write a TypeScript React component that renders a search input and a list of command items. It should track which item is currently highlighted using state and handle ArrowUp, ArrowDown, Enter, and Escape key presses. Whenever the user types a new search query, reset the selection to the top item. Also, include a useEffect hook with refs so that as the user navigates up and down through a long list, the highlighted item automatically scrolls into view without jarring page jumps. Make sure default browser key actions like page scrolling are suppressed when navigating items.
| Checked | Without skill | With skill |
|---|---|---|
| Clamps upper index boundary using Math.min on filtered item count minus one | Missed | Passed |
| Clamps lower index boundary using Math.max at zero | Missed | Passed |
| Configures scrollIntoView with block set to 'nearest' | Passed | Passed |
| Calls preventDefault on keydown navigation events | Passed | Passed |
The instructions your model reads when the skill loads.
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.
| 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 |
const [selectedIndex, setSelectedIndex] = useState(0);
useEffect(() => {
if (!isOpen) return;
const handleKeyDown = (e: KeyboardEvent) => {
switch (e.key) {
case 'ArrowDown':
e.preventDefault();
// Clamp to last item
setSelectedIndex((prev) => Math.min(prev + 1, filteredItems.length - 1));
test cases passed, vs 16 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.