Implementing Drag Drop

This is a comprehensive implementation guide for drag-and-drop interfaces using dnd-kit with React and TypeScript. It covers the main patterns you'd actually build: sortable lists, kanban boards, file upload zones, and reorderable grids. What stands out is the accessibility-first approach with keyboard navigation, screen reader support, and validation scripts baked in. The workflow is practical, walking you from analyzing requirements through performance optimization for large lists. It includes complete TypeScript examples and handles the tricky bits like touch support, state management, and the common pitfall of forgetting keyboard alternatives. If you're building any UI where users drag things around, this gives you the patterns and tooling to do it properly without reinventing the wheel.

skills.sh installs: 368
GitHub stars: 530
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add ancoleman/ai-design-components --skill implementing-drag-drop --agent claude-code

Installs into .claude/skills of the current project.

Files

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