--- name: dnd-kit-implementation description: Guide for implementing sortable and droppable components using dnd-kit library. Use this skill when building React applications that require drag-and-drop functionality with both container reordering (useSortable) and item dropping (useDroppable) capabilities, such as Kanban boards, file management systems, or playlist editors. --- # dnd-kit Implementation Guide ## Overview This skill provides patterns for implementing drag-and-drop functionality using dnd-kit library that supports both sortable containers and droppable targets simultaneously. ## Core Concept The key to combining `useSortable` and `useDroppable` is **conditional logic based on drag context**: - When dragging items → containers act as drop-only targets - When dragging containers → containers act as sortable elements This is achieved by detecting what's currently being dragged and enabling only the appropriate functionality. ## Implementation Pattern ### Container Component Structure ```tsx const SortableDroppableContainer = ({ container }) => { // useSortable for container reordering const { attributes, listeners, setNodeRef: setSortableRef, transform, transition, isDragging, } = useSortable({ id: container.id }); // useDroppable for receiving items const { setNodeRef: setDroppableRef, isOver } = useDroppable({ id: container.id, }); // Active element from context const { active } = useDndContext(); // Determine behavior based on what's being dragged const isItem = active?.id?.toString().startsWith('item-'); const isContainer = active?.id?.toString().startsWith('container-'); // Apply conditional refs const setNodeRef = isItem ? setDroppableRef : setSortableRef; return (