Criar uma command palette com Claude Code

Defina primeiro o limite do problema

Criar uma command palette com Claude Code não é pedir ao Claude Code uma UI bonita e solta. O objetivo é melhorar interação, layout, acessibilidade, mobile e conversão na mesma checklist. Em produção, textos longos, blocos de código, anúncios, CTA, teclado, erros e estados vazios importam.

Leia também claude code keyboard shortcuts, claude code accessibility, claude code search functionality. Referências oficiais: React useDeferredValue, React useMemo, WAI-ARIA practices. O pedido precisa conter objetivo, escopo proibido, regras visuais, use case e pitfall.

Prompt recomendado

Implemente esta melhoria UI com a menor mudança segura.
Mantenha rotas, componentes, design tokens e CTA principal.
Retorne código copiável, use case, pitfall, revisão mobile e rollback.
Finalize com review checklist para humanos.

Use case checklist

1. Conteúdo: busca, artigos relacionados, consulta e download fáceis de encontrar.
2. SaaS: menos passos sem perder teclado, mobile e estados de erro.
3. Produto: preço, compra, anúncios e formulários continuam prioritários.
4. Time: Claude Code entrega código e checklist de revisão.

Código de implementação

import { useDeferredValue, useMemo, useState } from "react";

type Command = {
  id: string;
  label: string;
  keywords: string[];
  run: () => void;
};

export function CommandPalette({ commands }: { commands: Command[] }) {
  const [open, setOpen] = useState(false);
  const [query, setQuery] = useState("");
  const deferredQuery = useDeferredValue(query);

  const results = useMemo(() => {
    const text = deferredQuery.trim().toLowerCase();
    if (!text) return commands.slice(0, 8);
    return commands
      .filter((command) =>
        [command.label, ...command.keywords].some((value) => value.toLowerCase().includes(text)),
      )
      .slice(0, 8);
  }, [commands, deferredQuery]);

  function onKeyDown(event: React.KeyboardEvent) {
    if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
      event.preventDefault();
      setOpen((value) => !value);
    }
    if (event.key === "Escape") setOpen(false);
  }

  return (
    <div onKeyDown={onKeyDown}>
      <button type="button" aria-haspopup="dialog" aria-expanded={open} onClick={() => setOpen(true)}>
        Open commands
      </button>
      {open ? (
        <div role="dialog" aria-modal="true" aria-label="Command palette" className="palette">
          <input
            autoFocus
            value={query}
            onChange={(event) => setQuery(event.target.value)}
            aria-label="Search commands"
            placeholder="Search actions..."
          />
          <ul role="listbox" aria-label="Available commands">
            {results.map((command) => (
              <li key={command.id}>
                <button type="button" onClick={() => { command.run(); setOpen(false); }}>
                  {command.label}
                </button>
              </li>
            ))}
          </ul>
        </div>
      ) : null}
    </div>
  );
}

.palette {
  position: fixed;
  inset: 1rem;
  max-width: 40rem;
  margin: auto;
  padding: 1rem;
  background: canvas;
  color: canvastext;
  border: 1px solid color-mix(in srgb, canvastext 20%, transparent);
}

Pitfall checklist

• Não otimize só para screenshot.
• Verifique textos longos, code blocks e tabelas no mobile.
• Não comunique estado apenas por cor.
• Evite mudanças em arquivos sem relação.
• Teste 375px, teclado, rede lenta e erros.

Verificação

Rode build e revise mobile. Confirme ausência de overflow, rolagem de code block, CTA, formulários e anúncios visíveis. Peça uma segunda review a Claude Code com arquivos alterados, riscos, código removível e rollback.

Monetização

Esse tema afeta anúncios, consulta, cards de produto, preços e formulários. Para transformar em processo, use treinamento e consultoria Claude Code.

Nota prática

Testei separando implementação e review. O diff ficou menor e problemas de layout apareceram antes do deploy.

Revisão adicional

Antes de publicar, reúna screenshots, teclado, largura mobile, rede lenta, erros e CTA em uma checklist. Assim Claude Code gera uma melhoria conectada ao negócio, não apenas código. Complexidade que pode ser removida também é ganho.

Revisão adicional

Antes de publicar, reúna screenshots, teclado, largura mobile, rede lenta, erros e CTA em uma checklist. Assim Claude Code gera uma melhoria conectada ao negócio, não apenas código. Complexidade que pode ser removida também é ganho.

Revisão adicional

Antes de publicar, reúna screenshots, teclado, largura mobile, rede lenta, erros e CTA em uma checklist. Assim Claude Code gera uma melhoria conectada ao negócio, não apenas código. Complexidade que pode ser removida também é ganho.

Revisão adicional

Antes de publicar, reúna screenshots, teclado, largura mobile, rede lenta, erros e CTA em uma checklist. Assim Claude Code gera uma melhoria conectada ao negócio, não apenas código. Complexidade que pode ser removida também é ganho.

Revisão adicional

Antes de publicar, reúna screenshots, teclado, largura mobile, rede lenta, erros e CTA em uma checklist. Assim Claude Code gera uma melhoria conectada ao negócio, não apenas código. Complexidade que pode ser removida também é ganho.

Revisão adicional

Antes de publicar, reúna screenshots, teclado, largura mobile, rede lenta, erros e CTA em uma checklist. Assim Claude Code gera uma melhoria conectada ao negócio, não apenas código. Complexidade que pode ser removida também é ganho.

Revisão adicional

Antes de publicar, reúna screenshots, teclado, largura mobile, rede lenta, erros e CTA em uma checklist. Assim Claude Code gera uma melhoria conectada ao negócio, não apenas código. Complexidade que pode ser removida também é ganho.