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.

Catatan praktik

Saya menguji dengan memisahkan implementation dan review. Diff lebih kecil dan masalah layout terlihat sebelum deploy.

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.

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.

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.

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.

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.