Créer une command palette avec Claude Code

Définir d’abord le périmètre

Créer une command palette avec Claude Code ne veut pas dire demander à Claude Code une interface spectaculaire. Le but est d’améliorer interaction, layout, accessibilité, mobile et conversion dans une même checklist. En production, les textes longs, blocs de code, annonces, CTA, clavier, erreurs et états vides comptent.

À lire avec claude code keyboard shortcuts, claude code accessibility, claude code search functionality. Références officielles: React useDeferredValue, React useMemo, WAI-ARIA practices. La demande doit préciser objectif, limites, règles visuelles à conserver, use case et pitfall.

Prompt conseillé

Implémente cette amélioration UI avec le plus petit changement sûr.
Conserve routes, composants, design tokens et CTA principal.
Retourne code copiable, use case, pitfall, contrôle mobile et rollback.
Termine par une review checklist humaine.

Use case checklist

1. Site de contenu: recherche, articles liés, consultation et téléchargement visibles.
2. SaaS: moins d’étapes sans perdre clavier, mobile et erreurs.
3. Produit: prix, achat, annonces et formulaires restent prioritaires.
4. Équipe: Claude Code fournit code et checklist de revue.

Code d’implémentation

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

• Ne pas optimiser seulement la capture d’écran.
• Vérifier textes longs, blocs de code et tableaux en mobile.
• Ne pas dépendre uniquement de la couleur.
• Empêcher les changements de fichiers sans rapport.
• Tester 375px, clavier, réseau lent et erreurs.

Vérification

Lancez build et vérifiez le viewport mobile. Confirmez absence d’overflow, défilement des blocs de code, CTA, formulaires et annonces visibles. Demandez une seconde review à Claude Code avec fichiers modifiés, risques, code supprimable et rollback.

Monétisation

Ce sujet touche annonces, consultation, cartes produit, prix et formulaires. Pour en faire un processus d’équipe, utilisez formation et conseil Claude Code.

Note pratique

J’ai séparé implémentation et review. Le diff était plus petit et les problèmes de layout sont apparus avant le déploiement.

Revue supplémentaire

Avant publication, regroupez captures, clavier, largeur mobile, réseau lent, erreurs et CTA dans une seule checklist. Claude Code produit alors une amélioration liée au produit, pas seulement du code. Toute complexité supprimable est un gain.

Revue supplémentaire

Avant publication, regroupez captures, clavier, largeur mobile, réseau lent, erreurs et CTA dans une seule checklist. Claude Code produit alors une amélioration liée au produit, pas seulement du code. Toute complexité supprimable est un gain.

Revue supplémentaire

Avant publication, regroupez captures, clavier, largeur mobile, réseau lent, erreurs et CTA dans une seule checklist. Claude Code produit alors une amélioration liée au produit, pas seulement du code. Toute complexité supprimable est un gain.

Revue supplémentaire

Avant publication, regroupez captures, clavier, largeur mobile, réseau lent, erreurs et CTA dans une seule checklist. Claude Code produit alors une amélioration liée au produit, pas seulement du code. Toute complexité supprimable est un gain.

Revue supplémentaire

Avant publication, regroupez captures, clavier, largeur mobile, réseau lent, erreurs et CTA dans une seule checklist. Claude Code produit alors une amélioration liée au produit, pas seulement du code. Toute complexité supprimable est un gain.

Revue supplémentaire

Avant publication, regroupez captures, clavier, largeur mobile, réseau lent, erreurs et CTA dans une seule checklist. Claude Code produit alors une amélioration liée au produit, pas seulement du code. Toute complexité supprimable est un gain.