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.

Ce qu’une command palette doit vraiment faire

Une command palette est cette petite fenêtre que l’on ouvre avec Cmd+K ou Ctrl+K et qui permet, tout en recherchant, de naviguer entre les écrans, de créer, de changer un réglage ou de lancer une action. On la trouve dans VS Code, Linear, Slack ou Notion. Comme l’utilisateur saisit directement « ce qu’il veut faire » sans dérouler des menus à la souris, plus il est habitué, plus il va vite.

Mais copier seulement l’apparence est un échec. Une simple modale qui sait chercher ne suffit pas. Une command palette utilisable en production a besoin de navigation au clavier, de gestion du focus, d’attributs ARIA pour les lecteurs d’écran, d’une conception qui ne bloque pas la saisie même quand la recherche est lourde, et d’un garde-fou contre l’exécution accidentelle d’opérations dangereuses. ARIA est l’ensemble d’attributs qui transmettent le sens de l’UI aux technologies d’assistance ; un combobox est le composant qui combine un champ de saisie et une liste de candidats.

Quand on sollicite Claude Code, « fais une command palette » ne suffit donc pas non plus. Quand Masa l’a essayé sur l’admin de ce site, le premier résultat était joli mais déclenchait Enter pendant la saisie IME, accédait à un index hors limites quand zéro candidat ressortait, et ne transmettait pas le candidat sélectionné au lecteur d’écran. Décrivez ces responsabilités à l’avance pour obtenir un code réellement exploitable.

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

Site de contenu: recherche, articles liés, consultation et téléchargement visibles.
SaaS: moins d’étapes sans perdre clavier, mobile et erreurs.
Produit: prix, achat, annonces et formulaires restent prioritaires.
É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);
}

Quatre cas d’usage concrets

Le premier est l’admin d’un SaaS. Recherche d’utilisateur, page de facturation, journal d’audit, envoi d’invitation : la palette traverse des fonctions dont les menus deviennent vite profonds. Mais « supprimer un utilisateur », « changer de plan » ou « renvoyer une facture » ne s’exécutent pas immédiatement : faites-les passer par un écran de confirmation.

Le deuxième est un site média ou un CMS de blog. Création d’article, bibliothèque d’images, édition de catégorie, vérification avant publication, réindexation de la recherche : tout cela peut devenir des commandes. Sur ce site, une commande qui mène de l’édition d’article au contrôle de l’image OGP puis à la vérification des liens internes a sensiblement raccourci le travail quotidien.

Le troisième est un site de documentation ou un outil pour développeurs. Référence d’API, exemples de configuration, commandes CLI, dépannage : tout est recherchable d’un coup. Contrairement à une simple recherche plein texte, on peut aussi proposer des actions comme « copier la page courante », « ouvrir l’exemple » ou « créer un gabarit d’issue ».

Le quatrième est un outil d’opérations interne. Création de ticket, affichage d’une fiche client, notification Slack, export CSV. Ici le contrôle des permissions est crucial : ne vous contentez pas de ne transmettre que les commandes affichables, vérifiez aussi les droits côté serveur au moment de l’exécution.

Pièges fréquents en détail

Déplacer le focus DOM sur le candidat est un échec courant. Si vous mettez le focus directement sur le li, il quitte le champ de saisie et il devient difficile de continuer à taper pour affiner. Dans cette implémentation, le focus reste sur l’input et aria-activedescendant transmet le candidat sélectionné.

Le Enter pendant une saisie japonaise (IME) est aussi facile à oublier. Le Enter qui valide une conversion IME et le Enter qui exécute une commande sont deux choses différentes. Sans vérifier event.nativeEvent.isComposing, on risque de publier ou de supprimer en croyant simplement valider une conversion.

Recalculer lourdement la recherche à chaque frappe est risqué. Quelques dizaines d’entrées ne posent pas de problème, mais des milliers de candidats mêlés à un filtre de permissions font bégayer la saisie. useDeferredValue et useMemo séparent la réactivité de la saisie du calcul des candidats. Si l’échelle exige une recherche serveur, ne gardez pas tout côté client : paginez via l’API.

Enfin, les collisions de raccourcis. Quand Cmd+K/Ctrl+K entre en conflit avec un raccourci du navigateur, de l’OS ou d’un éditeur, l’utilisateur est désorienté. Ce raccourci est courant, mais décidez par produit comment le traiter dans un formulaire ou un éditeur riche.

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.

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.

Note pratique

Quand Masa a intégré ce montage dans un petit panneau d’administration pour gérer les articles, la navigation vers « nouvel article », « bibliothèque d’images » et « vérification avant publication » est passée de deux clics à Ctrl+K -> 2 ou 3 caractères -> Enter. Le gain ressenti tenait moins à la vitesse de recherche elle-même qu’au fait de pouvoir enchaîner la tâche suivante au clavier, sans hésiter. En revanche, la première version qui exécutait directement la commande de publication était dangereuse : elle a été remplacée par une transition vers un écran de confirmation. Une command palette est une UI qui crée de la vitesse, mais un parcours trop rapide qui provoque des accidents est une erreur de conception.