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.

Install to Claude Code

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