skills.rest
HokageZ
HokageZCOMMUNITY
Explore all skills by this author →
GitHub

implementing-drag-drop

Implement drag-and-drop and sortable interfaces in React/TypeScript with dnd-kit.

2|Updated Mar 11, 2026
Search Tags:#typescript#ui#accessibility#frontend#react#drag and drop#dnd-kit
One-click install
npx skills add https://github.com/HokageZ/JOB-HUNTER --skill implementing-drag-drop-hokagez
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: implementing-drag-drop
Source: https://github.com/HokageZ/JOB-HUNTER/tree/main/.agents/skills/implementing-drag-drop
Command: npx skills add https://github.com/HokageZ/JOB-HUNTER --skill implementing-drag-drop-hokagez

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities, and includes scripts (resource) and references (resource) and assets (resource) and examples (resource) components.

What problem does it solve?

This Skill simplifies the implementation of complex drag-and-drop and sortable interfaces in React/TypeScript applications, ensuring accessibility and performance.

Core Features & Use Cases

  • Sortable Lists & Grids: Easily create reorderable lists, Kanban boards, and grid layouts.
  • File Upload Zones: Implement intuitive drag-and-drop file uploaders.
  • Accessibility: Built with accessibility best practices, including keyboard navigation and screen reader support.
  • Use Case: Integrate a Trello-like Kanban board into your project, allowing users to drag tasks between columns with smooth animations and keyboard controls.

Quick Start

Use the implementing-drag-drop skill to create a sortable list with keyboard navigation.

Frequently Asked Questions about implementing-drag-drop

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

FAQPage Schema
How do I build a drag-and-drop Kanban board in React with keyboard navigation?▼

Build a drag-and-drop Kanban board in React using dnd-kit to handle task dragging between columns, while incorporating accessibility features like keyboard navigation and screen reader support for interactive UIs.

What is the best way to create sortable lists and grids in TypeScript?▼

The best way to create sortable lists and reorderable grids in TypeScript is using dnd-kit libraries, which provide utilities for smooth animations and touch support to handle complex drag-and-drop interactions.

Does dnd-kit support accessible drag-and-drop file upload zones?▼

Yes, dnd-kit supports accessible drag-and-drop file upload zones by implementing intuitive uploaders with built-in accessibility best practices, including screen reader support and keyboard controls for interactive frontend applications.

How do I integrate design tokens with drag-and-drop interfaces?▼

Integrate design tokens with drag-and-drop interfaces by mapping them to dnd-kit component styles, allowing you to apply consistent theming across sortable lists and grids while maintaining accessibility.

Can I use dnd-kit for complex reorderable grid layouts in React?▼

Yes, you can use dnd-kit for complex reorderable grid layouts in React, as it provides specific sortable utilities and components designed to manage dynamic grid positioning and smooth drag interactions.

Why does my drag-and-drop list lack touch support and accessibility?▼

Your drag-and-drop list may lack touch support and accessibility if not using dnd-kit's built-in utilities, which are designed to implement keyboard navigation, screen reader compatibility, and mobile touch interactions.

Related Skills

Explore More Software Engineering Skills→
blink-newblink-new
1

kanban-dnd

Implements kanban board drag-and-drop with @dndkit collision detection and snapping modifiers.

Official
Advanced
Arnutt-NArnutt-N

drag-drop

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

Community
Advanced
viktorbezdekviktorbezdek
10

frontend-design

Create accessible, responsive UI design systems with Tailwind CSS, Radix UI, and shadcn/ui.

Community
Advanced
cfardevcfardev

dnd-kit

Implement drag-and-drop and sortable interfaces in React/Next.js with @dnd-kit.

Community
Intermediate