command-palette

Implement keyboard-accessible command palettes with the shadcn/ui Command component.

1|Updated Jul 15, 2026
One-click install
npx skills add https://github.com/Dzakiamriz22/frontend-pack --skill command-palette-dzakiamriz22
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: command-palette
Source: https://github.com/Dzakiamriz22/frontend-pack/tree/main/skills/command-palette
Command: npx skills add https://github.com/Dzakiamriz22/frontend-pack --skill command-palette-dzakiamriz22

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the complexity of implementing high-performance, keyboard-accessible command palettes and search interfaces that feel native to modern power-user applications.

Core Features & Use Cases

  • Command Palette Integration: Provides patterns for global search, navigation, and action execution using the cmdk library.
  • Keyboard-First UX: Implements standard shortcuts like ⌘K for instant access and navigation.
  • Search Optimization: Includes patterns for debounced inputs to ensure smooth performance during real-time filtering.

Quick Start

Use the command-palette skill to generate a global search dialog with navigation and action groups for my dashboard.

Frequently Asked Questions about command-palette

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a command palette with keyboard shortcuts in React?

You build a command palette using the shadcn/ui Command component to implement keyboard-accessible search interfaces, navigation, and action execution. It requires integrating React state management and keyboard event listeners to handle global shortcuts like ⌘K.

What is the best way to implement debounced search inputs for a web application command palette?

The best way to implement debounced search inputs is using the patterns provided by the cmdk library via the shadcn/ui Command component. This ensures smooth performance during real-time filtering of navigation and action groups.

Does the command palette skill work without external dependencies?

The command palette skill lists no external dependencies, but implementation requires the shadcn/ui Command component and the cmdk library. You also need React state management to handle global shortcuts and keyboard event listeners.

Can I use the command palette skill for power-user navigation in a web dashboard?

Yes, you can use this skill for power-user navigation in a web dashboard. It provides patterns to generate a global search dialog with filtered data lists, action groups, and standard keyboard-first UX shortcuts.

How do I handle keyboard event listeners for a global search dialog?

You handle keyboard event listeners by integrating them with React state management to trigger the shadcn/ui Command component. This setup captures global shortcuts like ⌘K to instantly open the command palette interface.