# Implementing Drag Drop

Implements drag-and-drop and sortable interfaces with React/TypeScript including kanban...

- Repository: https://github.com/ancoleman/ai-design-components (526 stars)
- Category: Design
- License: MIT
- Last updated: 2025-12-11
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add ancoleman/ai-design-components --skill implementing-drag-drop -g -a claude-code -y`
Codex: `npx skills add ancoleman/ai-design-components --skill implementing-drag-drop -g -a codex -y`
Cursor: `npx skills add ancoleman/ai-design-components --skill implementing-drag-drop -g -a cursor -y`
Gemini CLI: `npx skills add ancoleman/ai-design-components --skill implementing-drag-drop -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add ancoleman/ai-design-components`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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

The rest: https://github.com/ancoleman/ai-design-components/blob/HEAD/skills/implementing-drag-drop/SKILL.md