implementing-drag-drop
CommunityBuild interactive drag-and-drop UIs.
Authorancoleman
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill streamlines the implementation of complex drag-and-drop and sortable interfaces, ensuring accessibility and performance.
Core Features & Use Cases
- Sortable Lists & Grids: Easily reorder items in lists, tables, or grids.
- Kanban Boards: Create Trello-like interfaces for task management.
- File Upload Zones: Implement intuitive drag-and-drop file uploads.
- Use Case: When building a dashboard where users can rearrange widgets by dragging them, or a kanban board for project management.
Quick Start
Use the implementing-drag-drop skill to create a sortable list with React and dnd-kit.
Dependency Matrix
Required Modules
@dnd-kit/core@dnd-kit/sortable@dnd-kit/utilities
Components
scriptsreferencesassets
💻 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: implementing-drag-drop Download link: https://github.com/ancoleman/ai-design-components/archive/main.zip#implementing-drag-drop 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.