drag-drop-builder

Community

Build interactive drag & drop UIs effortlessly.

AuthorMaciWP
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

dnd-kitreact-beautiful-dndreact-dndSortable.jsvuedraggable-next

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: drag-drop-builder
Download link: https://github.com/MaciWP/CV_Astro/archive/main.zip#drag-drop-builder

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository