Implement drag and drop using @atlaskit/pragmatic-drag-and-drop. Use when implementing sortable lists, reorderable items, kanban boards, or any drag-drop interactions. Covers draggable setup, drop targets, edge detection, drag previews, and critical state management patterns to avoid performance issues.
Quickly install drag-and-drop AI skill to your development environment via command line
Source: wodsmith/thewodapp.
This project uses @atlaskit/pragmatic-drag-and-drop for drag-and-drop functionality.
NEVER put volatile drag state in useEffect dependencies. This causes handlers to re-register on every state change.
Use Symbol to scope drag operations to a single list:
Implement drag and drop using @atlaskit/pragmatic-drag-and-drop. Use when implementing sortable lists, reorderable items, kanban boards, or any drag-drop interactions. Covers draggable setup, drop targets, edge detection, drag previews, and critical state management patterns to avoid performance issues. Source: wodsmith/thewodapp.
Stable fields and commands for AI/search citations.
npx skills add https://github.com/wodsmith/thewodapp --skill drag-and-dropImplement drag and drop using @atlaskit/pragmatic-drag-and-drop. Use when implementing sortable lists, reorderable items, kanban boards, or any drag-drop interactions. Covers draggable setup, drop targets, edge detection, drag previews, and critical state management patterns to avoid performance issues. Source: wodsmith/thewodapp.
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/wodsmith/thewodapp --skill drag-and-drop Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw
https://github.com/wodsmith/thewodapp