Can I use this for large lists with hundreds of items?

Absolutely. The skill includes performance optimization strategies such as virtual scrolling, CSS transform usage, and efficient coordinate calculation scripts for high-volume lists.

Does this skill support mobile and touch devices?

Yes, it includes specific patterns for touch support, including long-press initiation, touch-friendly hit areas (44px), and preventing scroll interference during drag operations.

What common UI patterns are included?

The skill covers vertical/horizontal sortable lists, multi-column Kanban boards with WIP limits, file dropzones, and 2D reorderable grids.

How does it handle accessibility for screen readers?

It follows accessibility-first patterns by implementing necessary ARIA attributes, full keyboard navigation (Space/Enter to grab), and screen reader announcements for drag status.

Which library does this skill use for drag-and-drop?

The skill primarily utilizes dnd-kit, a modern, lightweight, and highly customizable drag-and-drop toolkit for React that is TypeScript native.

Drag-and-Drop Interface Implementation

Name: Drag-and-Drop Interface Implementation
Author: ancoleman

byancoleman

•

158

デザインツール

Builds accessible, high-performance drag-and-drop and sortable interfaces using React and TypeScript.

概要

This skill provides a comprehensive framework for implementing interactive direct manipulation UIs in React and TypeScript applications. It specializes in creating accessible-first kanban boards, sortable lists, file upload zones, and reorderable grids using the dnd-kit library. By integrating touch support, keyboard navigation, and performance optimization techniques like virtual scrolling, it helps developers build intuitive spatial organization tools that work seamlessly across desktop and mobile devices while maintaining strict accessibility standards.

主な機能

Mobile-optimized touch interactions and gesture conflict resolution
Integrated file upload dropzone patterns with multi-file handling
Accessible-first implementation with keyboard and screen reader support
Pre-configured patterns for Kanban boards and multi-column layouts
158 GitHub stars
Performance-tuned components for large data sets using virtual scrolling

ユースケース

Developing Trello-style project management boards with draggable cards
Creating reorderable dashboard widgets and responsive image galleries
Building drag-and-drop file uploaders with real-time visual feedback

概要

主な機能

Mobile-optimized touch interactions and gesture conflict resolution
Integrated file upload dropzone patterns with multi-file handling
Accessible-first implementation with keyboard and screen reader support
Pre-configured patterns for Kanban boards and multi-column layouts
158 GitHub stars
Performance-tuned components for large data sets using virtual scrolling

ユースケース

Developing Trello-style project management boards with draggable cards
Creating reorderable dashboard widgets and responsive image galleries
Building drag-and-drop file uploaders with real-time visual feedback