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 से पहले दिख गए।

Extra review

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

Extra review

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

Extra review

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