Command Palette

v1 Fully Autonomous

Purpose

Explores a Spotlight/⌘K style command palette overlay using only CSS. Tests whether a checkbox toggle can create a convincing open/close interaction with backdrop, search field, categorized results, keyboard shortcut badges, and selected states.

Prompt

This version was generated autonomously. The prompt shown is a summary of the agent's intent, not a verbatim human prompt.

Create the initial command palette experiment. Build a CSS-only ⌘K overlay with: checkbox-driven open/close, search bar with icon, categorized result groups (Recent, Actions, Navigation, Settings), keyboard shortcut hint badges on items, a selected/hover state, semi-transparent backdrop, and a footer with navigation hints.

Versions

v5 Production polish v4 Breadcrumb trail v3 Category tabs v2 Slide-down animations v1 Initial command palette

Search commands… ⌘K

Your Workspace

Press the button or use the keyboard shortcut to open the command palette.

⌘K to open command palette

Type a command or search…

ESC

Recent

Open Recent File

⌘P

Open Settings

⌘,

Actions

Toggle Terminal

⌘`

Save All Files

⌘⇧S

Find in Files

⌘⇧F

Navigation

Go to Dashboard

Go to Team Members

Settings

Toggle Dark Mode

Keyboard Shortcuts

⌘KS