Crear una command palette con Claude Code

Define primero el límite del problema

Una command palette es esa ventana pequeña que se abre con Cmd+K o Ctrl+K y permite buscar y ejecutar acciones sin recorrer menús con el ratón. Aparece en productos como VS Code, Linear, Slack o Notion, y acelera el trabajo de los usuarios que ya conocen la aplicación. Crear una command palette con Claude Code no consiste en pedir a Claude Code una pieza de UI vistosa. El objetivo es mejorar interacción, layout, accesibilidad, móvil y conversión dentro de una misma checklist. En producción importan textos largos, bloques de código, anuncios, CTA, teclado, errores y estados vacíos.

Copiar solo el aspecto visual falla. Un modal que solo busca no basta: una command palette de verdad necesita navegación con teclado, control de foco, semántica ARIA (dialog, combobox, listbox, option), un diseño que no se congele cuando la búsqueda es pesada y una guarda para no ejecutar acciones destructivas por error. Dos detalles que se olvidan a menudo: durante la composición del IME, Enter no debe disparar la primera opción, y con cero resultados la interfaz no debe intentar seleccionar un elemento inexistente. Si no quieres mantener tú mismo esas reglas, existen alternativas como cmdk o Radix UI, pero conviene entender primero qué responsabilidades necesita tu producto antes de delegarlas en una librería o en Claude Code.

Lee también claude code keyboard shortcuts, claude code accessibility, claude code search functionality. Referencias oficiales: React useDeferredValue, React useMemo, WAI-ARIA practices. La instrucción debe incluir objetivo, alcance prohibido, reglas visuales que se conservan, use case y pitfall.

Prompt recomendado

Implementa esta mejora UI con el cambio seguro más pequeño.
Mantén rutas, componentes, design tokens y CTA principal.
Devuelve código copiable, use case, pitfall, revisión móvil y rollback.
Termina con una review checklist para humanos.

Use case checklist

1. Sitios de contenido: búsqueda, artículos relacionados, consulta y descarga deben encontrarse rápido.
2. SaaS: reducir pasos sin perder teclado, móvil ni estados de error.
3. Producto: no ocultar precio, compra, anuncios ni formularios.
4. Equipo: Claude Code debe entregar código y checklist de revisión.

Código de implementación

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

• No optimices solo para una captura bonita.
• Revisa textos largos, code blocks y tablas en móvil.
• No comuniques estado solo con color.
• Evita que Claude Code cambie archivos no relacionados.
• Prueba 375px, teclado, red lenta y errores.

Verificación

Ejecuta build y revisa el viewport móvil. Confirma que no hay overflow, que el code block se desplaza, que CTA, formularios y anuncios siguen visibles. Pide una segunda review a Claude Code con archivos modificados, riesgos, código eliminable y rollback.

Monetización

Este tema afecta anuncios, consulta, tarjetas de producto, precios y formularios. Para convertirlo en proceso de equipo, usa formación y consultoría Claude Code.

Revisión adicional

Antes de publicar, junta capturas, teclado, ancho móvil, red lenta, errores y CTA en una sola checklist. Así Claude Code no solo genera código, sino una mejora conectada al negocio. La complejidad que se puede eliminar también es una ganancia. En una command palette concreta, revisa el foco al abrir y cerrar el diálogo, que Escape lo cierre, que la lista sea navegable con teclado y que el resultado vacío muestre un texto claro en lugar de una caja en blanco.

Nota práctica

Probé el flujo separando implementación y review. El diff fue más pequeño y los problemas de layout aparecieron antes del deploy. La parte más delicada fue la accesibilidad: una paleta que solo responde al ratón deja fuera a quien navega con teclado, así que confirmé el rol dialog, el aria-modal, el listbox y el foco automático en el campo de búsqueda antes de dar el cambio por terminado.