Claude Code से सुरक्षित drag and drop लागू करना

पहले असली screen से शुरू करें

लक्ष्य fancy demo नहीं, बल्कि mobile, keyboard, long text, empty data और business CTA के साथ stable implementation है। Claude Code तब सबसे उपयोगी होता है जब prompt में सीमाएँ हों: कौन-सी files बदल सकती हैं, क्या दिखता रहना चाहिए, किसे keyboard support चाहिए और परिणाम कैसे verify होगा।

Related guides: claude code accessibility, claude code react development, claude code file upload. Official references: MDN Drag and Drop API, dnd kit docs, WAI-ARIA practices.

Claude Code prompt

सबसे छोटे safe change से implement करें। Routes, style rules और CTA रखें। Copy-paste code, use case, pitfall, mobile check और rollback दें।

Use case checklist

1. Content site में search, charts, related articles और CTA.
2. SaaS admin में lists, boards, dashboards और forms.
3. Product और consultation pages में revenue path सुरक्षित रखना.
4. Team review workflow जहाँ Claude Code implementation, risks और manual checks एक साथ लौटाता है।

Implementation example

import { useState } from "react";

type Item = { id: string; label: string };

function moveItem(items: Item[], from: number, to: number) {
  const copy = [...items];
  const [item] = copy.splice(from, 1);
  copy.splice(to, 0, item);
  return copy;
}

export function SortableList({ initialItems }: { initialItems: Item[] }) {
  const [items, setItems] = useState(initialItems);
  const [dragId, setDragId] = useState<string | null>(null);

  return (
    <ul aria-label="Sortable tasks">
      {items.map((item, index) => (
        <li
          key={item.id}
          draggable
          onDragStart={() => setDragId(item.id)}
          onDragOver={(event) => event.preventDefault()}
          onDrop={() => {
            const from = items.findIndex((candidate) => candidate.id === dragId);
            if (from >= 0 && from !== index) setItems(moveItem(items, from, index));
            setDragId(null);
          }}
        >
          <button type="button" aria-label={`Move ${item.label}`}>
            {item.label}
          </button>
        </li>
      ))}
    </ul>
  );
}

[draggable="true"] {
  cursor: grab;
}

[draggable="true"]:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 4px;
}

Keyboard और touch के लिए विकल्प ज़रूर दें

native HTML5 drag and drop सिर्फ़ pointer पर चलता है। यानी keyboard-only और कई touch users सूची को फिर से क्रमित नहीं कर सकते। इसलिए हर sortable item के पास “ऊपर ले जाएँ / नीचे ले जाएँ” button या arrow-key handler रखें, ताकि drag के बिना भी क्रम बदला जा सके। ऊपर के code में हर item एक button के रूप में है — इसी पर ArrowUp / ArrowDown से moveItem बुलाना सरल है।

screen reader users को बदलाव बताना भी ज़रूरी है। drop के बाद aria-live="polite" क्षेत्र में “Task X अब स्थिति 2 पर” जैसा संदेश दें। बड़े या जटिल boards के लिए dnd kit जैसी library keyboard sensor और live announcement पहले से देती है, इसलिए हर चीज़ ख़ुद बनाने के बजाय उसे आज़माएँ।

Pitfall checklist

• केवल desktop screenshot के लिए optimize न करें।
• long text, tables, SVG या code blocks से horizontal overflow न होने दें।
• CTA, price, form या ad slot को किसी सजावटी interaction के पीछे न छिपाएँ।
• सिर्फ़ color या pointer-drag पर निर्भर न रहें; keyboard और text विकल्प मायने रखते हैं।
• Claude Code को असंबंधित files दोबारा न लिखने दें, वरना review लागत तेज़ी से बढ़ती है।

Verification

Build के बाद 375px mobile width पर overflow, code block scroll, CTA visibility, keyboard focus और error state देखें। Claude Code से दूसरा review pass माँगें जो बदली हुई files, जोखिम भरी assumptions, हटाने योग्य complexity और rollback steps सूचीबद्ध करे।

Monetization angle

इसे team process बनाना हो तो देखें Claude Code training and consultation. बात सिर्फ़ बेहतर UI की नहीं है। बात maintainability सुधारते हुए ads, product cards, consultation links, pricing tables और forms को सुरक्षित रखने की है।

Hands-on verification note

मैंने mobile width, code blocks, CTA और keyboard operation जांचा। Implementation और review अलग रखना अधिक stable रहा।

Extra review

Publish से पहले page की change-से-पहले और बाद की स्थिति की तुलना करें। पक्का करें कि business action अब भी स्पष्ट है, layout खिसकता नहीं, और implementation इतना छोटा है कि कोई दूसरा साथी review कर सके। यदि सुधार एक paragraph में नहीं समझाया जा सकता, तो उसे छोटे patch में बाँट दें।

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

यह तरीक़ा मैंने मौजूदा UI को न तोड़ने की शर्त के साथ 375px mobile width, सामान्य प्रदर्शन और keyboard operation देखते हुए जाँचा। drag and drop को एक बार में सब कुछ बनवाने के बजाय pointer reorder, फिर keyboard विकल्प, फिर live announcement — अलग चरणों में सौंपने से diff पढ़ने योग्य रहा और accessibility की चूकें deploy से पहले पकड़ में आ गईं।