drag-drop

Implement drag-and-drop hooks and UI components for sortable lists, Kanban boards, and file drop zones.

Updated Jan 8, 2026

Search Tags:#frontend #kanban #drag-and-drop #drag #reorder #sortable

Ready to run

npx skills add https://github.com/Arnutt-N/hr-ims --skill drag-drop

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: drag-drop
Source: https://github.com/Arnutt-N/hr-ims/tree/main/.claude/skills/drag-drop
Command: npx skills add https://github.com/Arnutt-N/hr-ims --skill drag-drop

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Drag-and-drop interactions for organizing items, lists, and files are tedious without reusable UI patterns. This Skill provides a consistent, accessible, and composable set of drag-and-drop utilities across sortable lists, kanban boards, and file-drop zones.

Core Features & Use Cases

Drag-and-drop reordering for sortable lists and tables.
Kanban-style column movement and item transfer between columns.
File-drop-zone support to attach files via drag-and-drop.
Keyboard-accessible drag interactions and visual feedback for better accessibility.

Quick Start

Interact with the UI by dragging items to reorder, moving items across kanban columns, or dropping files into a zone.

Frequently Asked Questions about drag-drop

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I implement drag-and-drop reordering for sortable lists and Kanban boards?▼

Drag-and-drop reordering for sortable lists and Kanban boards is implemented via composable hooks and UI components that manage drag state, event lifecycle, and visual feedback. This supports item reordering and column-to-column movement across frontend interfaces.

Can I build a file drop zone to attach files via drag-and-drop in a frontend application?▼

Yes, file drop zone support to attach files via drag-and-drop is a core feature. The Skill provides UI components to manage the drag event lifecycle and visual feedback for dropping files into designated frontend zones.

Does this drag-and-drop UI provide keyboard-accessible interactions for sortable lists?▼

Yes, the drag-and-drop UI implements keyboard-accessible drag interactions alongside visual feedback. This ensures accessible behavior for sortable lists, Kanban boards, and file drop zones across the frontend components.

What is the best way to manage drag state and visual feedback for a Kanban board?▼

The best way to manage drag state and visual feedback for a Kanban board is using the Skill's composable hooks. They handle the drag event lifecycle and item transfer between columns while maintaining accessible behavior.

Do I need external dependencies to use this drag-and-drop UI in my HR-IMS frontend?▼

No external dependencies are required. The Skill provides a self-contained set of composable drag-and-drop utilities, hooks, and UI components designed specifically for HR-IMS frontend components.

Why does my drag-and-drop item transfer between Kanban columns need accessible behavior?▼

Accessible behavior is needed for Kanban column transfers to ensure keyboard users can complete drag-and-drop interactions. The Skill implements keyboard-accessible drag interactions and visual feedback to meet frontend accessibility requirements.