@dnd-kit Drag and Drop Patterns

Quick Guide: Use @dnd-kit/core for basic drag/drop (useDraggable, useDroppable, DndContext). Use @dnd-kit/sortable for sortable lists (useSortable, SortableContext, arrayMove). Use DragOverlay for cross-container drag, scrollable containers, and smooth drop animations. Configure sensors for pointer/touch/keyboard input with activation constraints. Always provide keyboard and screen reader accessibility via KeyboardSensor and custom announcements.

<critical_requirements>

CRITICAL: Before Using This Skill

All code must follow project conventions in CLAUDE.md (kebab-case, named exports, import ordering, import type, named constants)

(You MUST wrap all drag-and-drop content in a <DndContext> provider -- hooks only work inside DndContext)

(You MUST use DragOverlay when items move between containers or live in scrollable containers -- transform alone breaks in these cases)

(You MUST configure KeyboardSensor with sortableKeyboardCoordinates for sortable lists -- keyboard users cannot reorder without it)

(You MUST keep DragOverlay always mounted and conditionally render its children -- unmounting DragOverlay breaks drop animations)