Panduan membuat command palette dengan Claude Code

Tentukan batas masalah dulu

Panduan membuat command palette dengan Claude Code bukan sekadar meminta Claude Code membuat UI yang menarik. Tujuannya adalah memperbaiki interaction, layout, aksesibilitas, mobile, dan conversion dalam satu checklist. Di produksi, teks panjang, code block, iklan, CTA, keyboard, error, dan empty state sangat penting.

Baca juga claude code keyboard shortcuts, claude code accessibility, claude code search functionality. Referensi resmi: React useDeferredValue, React useMemo, WAI-ARIA practices. Prompt harus menjelaskan tujuan, area yang tidak boleh disentuh, aturan visual, use case, dan pitfall.

Prompt yang disarankan

Implementasikan UI improvement ini dengan perubahan aman paling kecil.
Pertahankan routes, components, design tokens, dan CTA utama.
Berikan kode yang bisa disalin, use case, pitfall, mobile check, dan rollback.
Akhiri dengan human review checklist.

Use case checklist

1. Content site: search, related article, konsultasi, dan download mudah ditemukan.
2. SaaS: langkah lebih pendek tanpa kehilangan keyboard, mobile, dan error state.
3. Product page: harga, tombol beli, iklan, dan form tetap jelas.
4. Team workflow: Claude Code memberi kode dan checklist review.

Kode implementasi

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

• Jangan optimasi hanya untuk screenshot.
• Cek teks panjang, code block, dan tabel di mobile.
• Jangan menyampaikan status hanya lewat warna.
• Jangan biarkan Claude Code mengubah file tidak terkait.
• Test 375px, keyboard, slow network, dan error state.

Verifikasi

Jalankan build dan cek viewport mobile. Pastikan tidak ada overflow, code block bisa scroll, CTA, form, dan iklan tetap terlihat. Minta second review pass dari Claude Code dengan changed files, risks, removable code, dan rollback.

Monetisasi

Topik ini memengaruhi iklan, konsultasi, product card, pricing, dan form. Untuk menjadikannya proses tim, gunakan training dan konsultasi Claude Code.

Pitfall yang sering terlewat

Memindahkan fokus DOM ke kandidat adalah kesalahan umum. Jika fokus ditaruh langsung pada li, fokus keluar dari kolom input dan sulit melanjutkan ketik untuk mencari. Pada implementasi ini, fokus tetap di input dan kandidat terpilih disampaikan lewat aria-activedescendant.

Enter saat input bahasa juga mudah terlewat. Enter untuk mengonfirmasi konversi IME berbeda dengan Enter untuk menjalankan command. Tanpa memeriksa event.nativeEvent.isComposing, ada risiko publish atau delete terpicu saat pengguna sebenarnya hanya mengonfirmasi konversi.

Membuat proses pencarian berat di tiap ketikan juga berbahaya. Puluhan item tidak masalah, tetapi ribuan kandidat plus filter izin akan membuat input tersendat. useDeferredValue dan useMemo memisahkan responsivitas input dari komputasi kandidat. Jika skalanya butuh pencarian server, jangan ditanggung di klien, lakukan paging di sisi API.

Terakhir, konflik shortcut. Jika bentrok dengan shortcut browser, OS, atau editor, pengguna bingung. Cmd+K/Ctrl+K umum dipakai, tetapi cara menanganinya di dalam form input atau rich editor harus diputuskan per produk.

Review tambahan

Sebelum publish, satukan screenshot, keyboard, mobile width, slow network, error, dan CTA dalam satu checklist. Dengan begitu output Claude Code terhubung ke hasil bisnis, bukan hanya kode. Kompleksitas yang bisa dihapus juga merupakan perbaikan.

Hasil setelah saya mencoba langkah ini

Saat saya memasukkan struktur ini ke panel admin kecil untuk mengelola artikel, perpindahan ke “artikel baru”, “pustaka gambar”, dan “cek sebelum publish” yang sering dipakai berubah dari dua klik menjadi Ctrl+K -> ketik 2-3 huruf -> Enter. Perbedaan terbesar bukan kecepatan pencarian itu sendiri, melainkan bisa berpindah ke tugas berikutnya hanya dengan keyboard tanpa tersesat. Sebaliknya, rancangan awal yang menjalankan command publish secara langsung ternyata berbahaya, jadi saya ubah menjadi transisi ke layar konfirmasi. Command palette adalah UI yang menciptakan kecepatan, tetapi alur yang terlalu cepat hingga memicu kecelakaan adalah kesalahan desain. Saya menguji dengan memisahkan implementasi dan review sehingga diff tetap kecil dan masalah layout terlihat sebelum deploy.