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