dnd-kit-implementation
CommunityEasily implement drag-and-drop in React apps.
Authoratman-33
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This skill solves the challenge of implementing robust drag-and-drop interfaces in React by combining container reordering and item dropping using the dnd-kit library.
Core Features & Use Cases
- Dual-hook integration: useSortable and useDroppable enable simultaneous container reordering and item dropping.
- Context-aware behavior: conditional refs and attributes based on what is being dragged.
- Real-world use cases include Kanban boards, file managers, and playlist editors that require both containers and items to be draggable.
Quick Start
Set up a React project, install @dnd-kit/core and @dnd-kit/sortable, then implement a SortableDroppableContainer with a SortableItem to enable combined drag-and-drop behavior.
Dependency Matrix
Required Modules
None requiredComponents
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: dnd-kit-implementation Download link: https://github.com/atman-33/skills/archive/main.zip#dnd-kit-implementation Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.