kanban-dnd

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

1|2|Updated Jan 23, 2026

Search Tags:#task management #frontend #ui components #kanban #drag and drop #dnd-kit

Ready to run

npx skills add https://github.com/blink-new/claude --skill kanban-dnd

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: kanban-dnd
Source: https://github.com/blink-new/claude/tree/main/skills/kanban-dnd
Command: npx skills add https://github.com/blink-new/claude --skill kanban-dnd

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides a robust and user-friendly solution for implementing drag-and-drop kanban boards, enabling seamless card movement between columns with a polished user experience.

Core Features & Use Cases

Drag-and-Drop Functionality: Allows users to intuitively move cards between different columns.
Collision Detection: Ensures accurate identification of drop targets, prioritizing columns over cards.
Smooth Animations & Visual Feedback: Enhances user experience with Linear/Notion-style drag interactions.
Use Case: Integrate this Skill into a project management tool to allow users to visually track task progress by dragging cards (tasks) from "To Do" to "In Progress" to "Done" columns.

Quick Start

Use the kanban-dnd skill to create a kanban board with columns and cards.

Frequently Asked Questions about kanban-dnd

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

FAQPage Schema

How do I implement drag and drop kanban board functionality in my frontend project?▼

You can implement drag and drop kanban board functionality by using @dnd-kit/core, @dnd-kit/modifiers, and @dnd-kit/utilities to handle card movement, apply snapping, and manage CSS utilities for smooth visual feedback.

How does collision detection work when moving cards between kanban columns?▼

Collision detection for moving cards between kanban columns works by prioritizing columns over individual cards, ensuring the system accurately identifies the correct drop target during a drag interaction.

Can I create Linear or Notion-style smooth drag overlays for task management UI components?▼

Yes, you can create Linear or Notion-style smooth drag overlays for task management UI components by utilizing cursor-following drag overlays and animation modifiers provided by the @dnd-kit architecture.

What is the best way to build a project management tool with visual task tracking?▼

The best way to build a project management tool with visual task tracking is integrating a kanban board with drag-and-drop functionality, allowing users to visually move task cards between "To Do", "In Progress", and "Done" columns.

Do I need to manually configure CSS utilities for dnd-kit kanban animations?▼

No, you do not need to manually configure CSS utilities for dnd-kit kanban animations because the implementation utilizes @dnd-kit/utilities and @dnd-kit/modifiers to handle CSS transforms and snapping automatically.

Why does my dragged kanban card snap to the wrong column drop target?▼

A dragged kanban card might snap to the wrong column drop target if the custom collision detection algorithm is not properly configured to prioritize columns over individual cards within the board.