Claude Code से command palette बनाने की गाइड

पहले problem boundary तय करें

Claude Code से command palette बनाने की गाइड का मतलब सिर्फ सुंदर UI बनाना नहीं है। लक्ष्य है interaction, layout, accessibility, mobile और conversion को एक checklist में सुधारना। Production में long text, code block, ads, CTA, keyboard, error और empty state बहुत महत्वपूर्ण हैं।

साथ में claude code keyboard shortcuts, claude code accessibility, claude code search functionality पढ़ें। Official references: React useDeferredValue, React useMemo, WAI-ARIA practices. Claude Code prompt में goal, forbidden scope, visual rules, use case और pitfall साफ लिखें।

Suggested prompt

इस UI improvement को सबसे छोटे safe change से implement करें।
Routes, components, design tokens और main CTA को रखें।
Copy-paste-ready code, use case, pitfall, mobile check और rollback दें।
अंत में human review checklist दें।

Use case checklist

1. Content site: search, related articles, consultation और download जल्दी मिलें।
2. SaaS: कम steps, लेकिन keyboard, mobile और error state सुरक्षित रहें।
3. Product page: price, buy button, ads और forms छिपें नहीं।
4. Team workflow: Claude Code code के साथ review checklist भी दे।

Implementation code

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

• केवल screenshot के लिए optimize न करें।
• Mobile पर long text, code block और table देखें।
• State बताने के लिए केवल color पर निर्भर न रहें।
• Claude Code को unrelated files बदलने न दें।
• 375px, keyboard, slow network और error state test करें।

Verification

Build चलाएं और mobile viewport देखें। Overflow न हो, code block scroll करे, CTA, forms और ads दिखें। Claude Code से second review pass मांगें जिसमें changed files, risks, removable code और rollback हो।

Monetization

यह ads, consultation, product cards, pricing और forms को प्रभावित करता है। इसे team process बनाना हो तो Claude Code training और consultation देखें।

Practical note

मैंने implementation और review अलग रखकर test किया। Diff छोटा रहा और layout issues deploy से पहले दिख गए।

Command definition को UI से अलग रखें

Command की परिभाषा को UI से अलग करें। ऐसा करने पर permission, routing, confirmation dialog और analytics events बाद में जोड़ना आसान हो जाता है। ख़ासकर publish, delete, send जैसी बाहरी side-effect वाली क्रियाएँ command palette के मुख्य भाग में नहीं, बल्कि command की ओर confirm करें।

import type { Command } from "./CommandPalette";

export function createCommandActions(navigate: (href: string) => void): Command[] {
  return [
    { id: "new-draft", label: "नया लेख लिखें", keywords: ["create", "post"], run: () => navigate("/editor/new") },
    { id: "media", label: "image library खोलें", keywords: ["asset", "hero"], run: () => navigate("/media") },
    {
      id: "publish",
      label: "मौजूदा लेख प्रकाशित करें",
      keywords: ["deploy", "release"],
      run: () => {
        if (window.confirm("मौजूदा लेख प्रकाशित करें?")) navigate("/publish/current");
      },
    },
  ];
}

आम pitfalls

candidate के DOM पर focus हटा देना एक आम ग़लती है। li पर सीधे focus डालने से input से focus निकल जाता है और type करके search जारी रखना मुश्किल हो जाता है। इस implementation में focus input पर ही रहता है और aria-activedescendant से चुना गया candidate बताया जाता है।

IME (जैसे जापानी या हिन्दी transliteration) से input के दौरान Enter भी आसानी से छूट जाता है। conversion पक्का करने वाला Enter और command चलाने वाला Enter अलग हैं। event.nativeEvent.isComposing जाँचे बिना, conversion की मंशा से publish या delete चल सकता है — यही सबसे ख़तरनाक bug है।

Shortcut का टकराव आख़िरी समस्या है। browser, OS और editor के shortcuts से टकराने पर user उलझ जाता है। Cmd+K / Ctrl+K आम है, पर input form या rich editor पर इसे कैसे संभालें यह हर product के हिसाब से तय करें।

Extra review

Publish से पहले screenshots, keyboard, mobile width, slow network, errors और CTA को एक checklist में रखें। इससे Claude Code का output business result से जुड़ता है, केवल code से नहीं। जो complexity हट सकती है, उसे हटाना भी improvement है।

इस लेख में बताई बातों को असल में आज़माने पर

मैंने यह संरचना लेख-प्रबंधन के एक छोटे admin screen में डाली, तो “नया लेख”, “image library” और “प्रकाशन-पूर्व जाँच” तक पहुँचना 2 click से बदलकर Ctrl+K -> 2-3 अक्षर -> Enter हो गया। सबसे बड़ा फ़र्क़ search की गति से ज़्यादा यह था कि सिर्फ़ keyboard से बिना भटके अगले काम पर पहुँचा जा सका। शुरुआती मसौदे में publish command को सीधे चलाना ख़तरनाक था, इसलिए उसे confirmation screen पर भेज दिया। Command palette गति बनाने वाला UI है, पर इतनी तेज़ कि दुर्घटना हो — वह design की चूक है।