learning_ai_common_plat/dashboards/ux-lab/bolt-command-palette-kit/PROMPT.md

Bolt — Command Palette + Keyboard Shortcuts Kit (Micro-App)

Before you start: read and follow DESIGN_SYSTEM_BRIEF.md, UX_TOKEN_CONTRACT.md, REPO_SCOPING_RULES.md, and ACCEPTANCE_CHECKLIST.md.

Mission

Build a production-grade command palette + keyboard shortcuts kit micro-app (Next.js App Router) that we can copy into:

• dashboards/admin-web
• dashboards/tracker-web
• product web apps

This is implementation-heavy: correctness, a11y, and clean component boundaries matter.

Constraints

• Only modify files in this repository.
• pnpm only.
• Next.js 16 App Router, React 19, TypeScript strict.
• TailwindCSS v4.
• No network calls.
• No console.log.
• No hardcoded colors — use --ux-* CSS variables from UX_TOKEN_CONTRACT.md.
• Avoid unnecessary dependencies. If you add a dependency, justify why it is required.

Must-have routes

• / overview landing
• /palette command palette demo
• /shortcuts shortcuts reference + editor demo
• /integration copy/paste integration guide page (UI-only)

Core deliverable: Command palette

Build CommandPalette with:

• Open via Cmd+K (and Ctrl+K fallback)
• Search box
• Grouped actions (e.g., Navigation, Actions, Settings)
• Optional action keywords (alias terms)
• Recent actions (persist to localStorage)
• Favorites/pinned actions (localStorage)
• Keyboard navigation:
  • Up/Down
  • Enter to execute
  • Esc to close
• Mouse support

Accessibility requirements:

• Proper dialog semantics
• Focus trap while open
• Focus returns to opener on close
• ARIA labels for listbox/options

Shortcuts registry

Create a small shortcuts registry system:

• registerShortcut({ id, keys, description, scope })
• Scopes: global vs page-specific (simple; no complex routing coupling)
• A /shortcuts page that lists all registered shortcuts
• A UI to remap a shortcut (client-side only) and persist to localStorage
• Collision detection (warn if two actions use the same key combo)

Demo content

Include 20–30 demo actions:

• Navigation actions to pages
• Theme toggle
• “Copy JSON” demo action
• “Clear local data” demo action with confirm dialog

Deliverables

• Full Next.js app with scripts:
  • dev
  • check (must run tsc --noEmit + eslint)
  • build (must run next build --webpack)

Verification

From repo root:

• pnpm install
• pnpm run check
• pnpm run build

Output expectation

Open a PR that only changes files in this repo.