Crear una command palette con Claude Code

Define primero el límite del problema

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.

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.

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.

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.

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.

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.

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.

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.

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.