drag-drop-builder

Create React drag-and-drop components with dnd-kit for sortable lists and Kanban boards.

1|Updated Mar 17, 2025

Search Tags:#React #file upload #drag and drop #Kanban board #frontend UI #sortable list #dnd-kit

Ready to run

npx skills add https://github.com/MaciWP/CV_Astro --skill drag-drop-builder

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: drag-drop-builder
Source: https://github.com/MaciWP/CV_Astro/tree/main/.claude/skills/drag-drop-builder
Command: npx skills add https://github.com/MaciWP/CV_Astro --skill drag-drop-builder

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires dnd-kit, react-beautiful-dnd, react-dnd, Sortable.js, vuedraggable-next, and includes references (resource) components.

What problem does it solve?

This Skill simplifies the implementation of complex drag and drop functionalities, allowing you to create highly interactive user interfaces for sorting, moving items between containers, or file uploads.

Core Features & Use Cases

Sortable Lists: Easily reorder items within a list with smooth animations and accessibility.
Multi-Container Drag & Drop: Build advanced interfaces like Kanban boards, allowing items to be dragged between different columns.
Use Case: Create a React component using dnd-kit for a sortable list of tasks, allowing users to reorder them, or build a Kanban board where tasks can be moved between "To Do," "In Progress," and "Done" columns.

Quick Start

Create a React component using dnd-kit for a sortable list of tasks, allowing users to reorder them.