skills.rest
gwenwindflower
gwenwindflowerCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-ux-command-palette

Build keyboard-first command palettes with cmdk and shadcn/ui.

9|Updated Feb 15, 2026
Search Tags:#accessibility#shadcn-ui#web-ui#keyboard-navigation#command-palette#ui-pattern#cmdk
One-click install
npx skills add https://github.com/gwenwindflower/dotfiles --skill web-ux-command-palette
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-ux-command-palette
Source: https://github.com/gwenwindflower/dotfiles/tree/main/dot_agents/exact_skills/web-ux-command-palette
Command: npx skills add https://github.com/gwenwindflower/dotfiles --skill web-ux-command-palette

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides keyboard-first access to app actions via command palettes.

Core Features & Use Cases

  • Cmdk-based: integrates Cmdk with shadcn/ui for a polished, accessible command dialog.
  • Keyboard-first UX: supports Cmd+K, slash to open, arrow navigation, and quick selection.
  • Use Case: add a spotlight-style palette or a command-K menu to a web app to help power users navigate features quickly.

Quick Start

Open the command palette with Cmd+K to search and execute a command.

Frequently Asked Questions about web-ux-command-palette

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

FAQPage Schema
How do I add a command palette with keyboard navigation to my web app?▼

Add a command palette to your web app using cmdk integrated with shadcn/ui for a polished, accessible dialog. It supports Cmd+K to open, arrow key navigation, and quick selection, streamlining navigation for power users.

What is a Cmdk command palette in shadcn/ui?▼

A Cmdk command palette in shadcn/ui is a keyboard-first dialog component that provides spotlight-style search and execution of app actions. It ensures accessible keyboard shortcuts and front-end component integration for modern web interfaces.

How do I implement a spotlight-style menu using shadcn/ui?▼

Implement a spotlight-style menu by integrating cmdk with shadcn/ui components to build a command dialog. This approach provides keyboard-first UX, allowing users to open the palette with Cmd+K or slash and navigate features quickly.

Does the cmdk command palette support accessible keyboard shortcuts?▼

Yes, the cmdk command palette ensures metadata alignment and accessible keyboard shortcuts. It supports Cmd+K, slash to open, arrow navigation, and quick selection to provide keyboard-first access to app actions.

Can I use a command palette for keyboard-nav search in modern web apps?▼

Yes, you can use this command palette to implement keyboard-nav search in modern web apps. It targets spotlight-style palettes and command-K menus, helping power users navigate features quickly via keyboard-driven interactions.

What is the best way to build a Cmd+K menu for web interfaces?▼

The best way to build a Cmd+K menu is using cmdk with shadcn/ui to create an accessible command dialog. This provides a keyboard-first UX with arrow navigation and quick selection, streamlining navigation in web interfaces.

Related Skills

Explore More Design & Creative Skills→
Impertio-StudioImpertio-Studio

shadcn-errors-cmdk-version-drift

Diagnose and fix shadcn ui Command failures caused by cmdk version drift.

Official
Advanced
sgcarstrendssgcarstrends
21

server-actions

Create or update Next.js server actions with Zod validation and cache revalidation.

Official
Advanced
Dzakiamriz22Dzakiamriz22
1

dialogs

Implement accessible modal, sheet, and alert dialogs with shadcn/ui and Tailwind CSS.

Community
Intermediate
RhettArkRhettArk

UI/UX Specialist

Design accessible, responsive UI components with semantic HTML and ARIA labeling.

Community
Basic