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.

主な機能

01Mobile-optimized touch interactions and gesture conflict resolution

02Integrated file upload dropzone patterns with multi-file handling

03Accessible-first implementation with keyboard and screen reader support

04Pre-configured patterns for Kanban boards and multi-column layouts

05158 GitHub stars

06Performance-tuned components for large data sets using virtual scrolling

ユースケース

01Developing Trello-style project management boards with draggable cards

02Creating reorderable dashboard widgets and responsive image galleries

03Building drag-and-drop file uploaders with real-time visual feedback

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ancoleman/ai-design-components implementing-drag-drop

For use in Claude.ai and ChatGPT

主な機能

01Mobile-optimized touch interactions and gesture conflict resolution

02Integrated file upload dropzone patterns with multi-file handling

03Accessible-first implementation with keyboard and screen reader support

04Pre-configured patterns for Kanban boards and multi-column layouts

05158 GitHub stars

06Performance-tuned components for large data sets using virtual scrolling

ユースケース

01Developing Trello-style project management boards with draggable cards

02Creating reorderable dashboard widgets and responsive image galleries

03Building drag-and-drop file uploaders with real-time visual feedback

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ancoleman/ai-design-components implementing-drag-drop

For use in Claude.ai and ChatGPT