skills.rest
aaronbassett
aaronbassettCOMMUNITY
Explore all skills by this author →
GitHub

Command Palette Developer

Generate customizable command palettes for React web apps with TypeScript and cmdk.

1|Updated Jan 20, 2026
Search Tags:#Zustand#React#TypeScript#tailwind#generator#command palette#cmdk
One-click install
npx skills add https://github.com/aaronbassett/paneful --skill command-palette-developer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Command Palette Developer
Source: https://github.com/aaronbassett/paneful/tree/main/.claude/skills/creating-command-palettes
Command: npx skills add https://github.com/aaronbassett/paneful --skill command-palette-developer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires cmdk, @floating-ui/react, zustand, @tanstack/react-query, @tanstack/react-virtual.

What problem does it solve?

This Skill provides comprehensive guidance and tooling patterns for building professional, keyboard-first command palettes for web apps, enabling rapid creation, customization, and extensibility.

Core Features & Use Cases

  • Generator-driven scaffolding: Create complete command palettes with modal, embedded, or drawer layouts including type-safe commands and result components.
  • Theming, accessibility, and UX best practices: Guidance on theming, keyboard navigation, focus management, and ARIA recommendations to craft accessible experiences.
  • Extensibility & plugins: Patterns for plugin providers and external command sources to unify all actions under a single palette interface.
  • Usage patterns & examples: Real-world scenarios and sample implementations (Raycast-style, Notion-style, etc.) to accelerate adoption.

Quick Start

Install the palette scaffolding, run the generator scripts to produce components, then wrap your app with ThemeProvider and CommandProvider to begin building and testing palettes.

Frequently Asked Questions about Command Palette Developer

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

FAQPage Schema
How do I build a command palette in React with TypeScript?▼

This approach uses cmdk for the core palette interface and Zustand for state management, providing type-safe component generation and standardized workflows to scaffold complete command palettes with modal, embedded, or drawer layouts.

How do I add keyboard navigation and ARIA accessibility to a command palette?▼

The skill provides specific guidance on theming, keyboard navigation, focus management, and ARIA recommendations to ensure your command palette is accessible and delivers a polished keyboard-first UX.

Can I create different command palette layouts like Notion or Raycast?▼

Yes, you can create various layouts including Raycast-style and Notion-style palettes. The generator supports scaffolding modal, embedded, and drawer layouts with type-safe commands to accelerate adoption.

How do I extend a cmdk command palette with external plugins?▼

You can extend a cmdk command palette with external plugins by implementing plugin provider patterns and external command sources, allowing you to unify all actions from various domains under a single palette interface.

Does this command palette generator work with Zustand and Tailwind?▼

Yes, the command palette generator is built for projects using Zustand for state management and Tailwind for styling, utilizing cmdk alongside Floating UI and TanStack libraries for virtualization and queries.

Related Skills

Explore More Software Engineering Skills→
daveiodaveio

tailwind-theme-builder

Configure Tailwind v4 and shadcn/ui theming with CSS variables and dark mode.

Community
Advanced
OpenCovenOpenCoven
20

command-palette-keyboard-ux

Design keyboard-driven command palettes in React using cmdk.

Official
Intermediate
gileckgileck

state-management-guidelines

Standardize state management with React Query, Zustand, and useState.

Community
Advanced
Dzakiamriz22Dzakiamriz22
1

command-palette

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

Community
Intermediate