skills.rest
Holymir
HolymirCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

command-palette

Implement a keyboard-driven command palette with React Query cache search and role-based access control.

Updated Mar 6, 2026
Search Tags:#react#search#navigation#keyboard shortcuts#react query#command palette
One-click install
npx skills add https://github.com/Holymir/liquid-arc --skill command-palette-holymir
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: command-palette
Source: https://github.com/Holymir/liquid-arc/tree/main/.claude/skills/frontend-skills/command-palette
Command: npx skills add https://github.com/Holymir/liquid-arc --skill command-palette-holymir

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a fast, keyboard-driven interface for navigating applications, searching for information, and triggering actions, significantly improving user efficiency and discoverability.

Core Features & Use Cases

  • Global Command Palette: Accessible via Ctrl+K or ⌘K for quick access from anywhere in the app.
  • Cache-Driven Search: Leverages React Query cache to instantly surface relevant data like repositories or user profiles.
  • Role-Gated Navigation: Dynamically filters navigation items based on user roles, ensuring only accessible routes are shown.
  • Dynamic Fallback Search: Offers search actions for patterns (e.g., Jira keys) even when no direct cache match exists.
  • Discoverability: Includes a navbar search pill and a one-time toast to guide users to the feature.

Quick Start

Press Ctrl+K or ⌘K to open the command palette and start typing to search or navigate.

Frequently Asked Questions about command-palette

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

FAQPage Schema
How do I add a command palette to my React application for keyboard navigation?▼

A command palette in React provides a fast, keyboard-driven interface for navigating applications and triggering actions. It significantly improves user efficiency by allowing quick access via keyboard shortcuts instead of manual clicks.

How does a React command palette use React Query cache for search?▼

A React command palette uses React Query cache to instantly surface relevant data like repositories or user profiles during search. This allows the palette to provide immediate results without requiring additional network requests for user input.

Can I filter command palette navigation items based on user roles?▼

Yes, you can filter command palette navigation items based on user roles. The command palette supports role-gated navigation, which dynamically filters the displayed routes to ensure users only see accessible items.

What happens when command palette search finds no direct cache match?▼

When a command palette search finds no direct cache match, it offers dynamic fallback search actions for specific patterns like Jira keys. This ensures users can still trigger relevant searches even without existing local data.

Do I need React Query to implement keyboard shortcuts for app navigation?▼

React Query is not strictly required for keyboard shortcuts, but it is used here to power cache-driven search within the command palette. The palette itself handles the global Ctrl+K shortcut and role-based navigation filtering.

Related Skills

Explore More Software Engineering Skills→
ankitsharma495ankitsharma495

rbac-authorization-patterns

Implement RBAC and multi-tenant authorization in Go/Echo with PostgreSQL RLS policies.

Community
Advanced
toddmoytoddmoy
1

pillbox pattern

Implement inline pill nodes with at-mention insertion in TipTap editors.

Community
Advanced
OpenCovenOpenCoven
20

command-palette-keyboard-ux

Design keyboard-driven command palettes in React using cmdk.

Official
Intermediate
nabinkhair42nabinkhair42

command-palette

Surface navigation and actions through a keyboard-driven palette in Next.js apps.

Community
Advanced