Implements drag-and-drop and sortable interfaces with React/TypeScript including kanban boards, sortable lists, file uploads, and reorderable grids. Use when building interactive UIs requiring direct manipulation, spatial organization, or touch-friendly reordering.
View on GitHubskills/implementing-drag-drop/SKILL.md
February 1, 2026
Select agents to install to:
npx add-skill https://github.com/ancoleman/ai-design-components/blob/main/skills/implementing-drag-drop/SKILL.md -a claude-code --skill implementing-drag-dropInstallation paths:
.claude/skills/implementing-drag-drop/# Drag-and-Drop & Sortable Interfaces ## Purpose This skill helps implement drag-and-drop interactions and sortable interfaces using modern React/TypeScript libraries. It covers accessibility-first approaches, touch support, and performance optimization for creating intuitive direct manipulation UIs. ## When to Use Invoke this skill when: - Building Trello-style kanban boards with draggable cards between columns - Creating sortable lists with drag handles for priority ordering - Implementing file upload zones with visual drag-and-drop feedback - Building reorderable grids for dashboard widgets or galleries - Creating visual builders with node-based interfaces - Implementing any UI requiring spatial reorganization through direct manipulation ## Core Patterns ### Sortable Lists Reference `references/dnd-patterns.md` for: - Vertical lists with drag handles - Horizontal lists for tab/carousel reordering - Grid layouts with 2D dragging - Auto-scrolling near edges ### Kanban Boards Reference `references/kanban-implementation.md` for: - Multi-column boards with cards - WIP limits and swimlanes - Card preview on hover - Column management (add/remove/collapse) ### File Upload Zones Reference `references/file-dropzone.md` for: - Visual feedback states - File type validation - Multi-file handling - Progress indicators ### Accessibility Reference `references/accessibility-dnd.md` for: - Keyboard navigation patterns - Screen reader announcements - Alternative UI approaches - ARIA attributes ## Library Selection ### Primary: dnd-kit Modern, accessible, and performant drag-and-drop for React. Reference `references/library-guide.md` for: - Library comparison (dnd-kit vs alternatives) - Installation and setup - Core concepts and API - Migration from react-beautiful-dnd ### Key Features - Built-in accessibility support - Touch, mouse, and keyboard input - Zero dependencies (~10KB core) - Highly customizable - TypeScript native ## Implementation Workflow ### Step 1: Ana