Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →Implements drag-and-drop and sortable interfaces with React/TypeScript including kanban boards, sortable lists, file uploads, and reorderable grids. Use when building interactive UIs requiring direct manipulation, spatial organization, or touch-friendly reordering.
.claude/skills/ancoleman-implementing-drag-drop/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-08 | ✗→✓ | ▲ Improved | -8% | 0% |
| case-09 | ✗→✓ | ▲ Improved | 45% | 0% |
| case-10 | ✗→✓ | ▲ Improved | 47% | 0% |
| case-11 | ✗→✓ | ▲ Improved | -15% | 0% |
| case-12 | ✗→✓ | ▲ Improved | 0% | 0% |
This skill helps implement drag-and-drop interactions and sortable interfaces using modern React/TypeScript libraries. It covers accessibility-first approaches, touch support, and performance optimization for creating intuitive direct manipulation UIs.
Invoke this skill when:
Reference references/dnd-patterns.md for:
Reference references/kanban-implementation.md for:
Reference references/file-dropzone.md for:
Reference references/accessibility-dnd.md for:
Modern, accessible, and performant drag-and-drop for React.
Reference references/library-guide.md for:
Determine the drag-and-drop pattern needed:
Install required packages:
bashnpm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities
Use examples as starting points:
examples/sortable-list.tsx for basic listsexamples/kanban-board.tsx for multi-column boardsexamples/file-dropzone.tsx for file uploadsexamples/grid-reorder.tsx for grid layoutsReference references/accessibility-dnd.md to:
Run scripts/validate_accessibility.js to check implementation.
For lists with >100 items:
references/performance-optimization.mdscripts/calculate_drop_position.js for efficient calculationsApply theming using the design-tokens skill:
Reference references/touch-support.md for:
Reference references/state-management.md for:
Run scripts/calculate_drop_position.js to:
Run scripts/generate_dnd_config.js to:
Run scripts/validate_accessibility.js to:
Each example includes complete TypeScript code with accessibility:
examples/sortable-list.tsx
examples/kanban-board.tsx
examples/file-dropzone.tsx
examples/grid-reorder.tsx
assets/drag-state-types.ts provides:
assets/dnd-config-schema.json defines:
will-change: transform for animationsReference the appropriate guide for each issue:
references/accessibility-dnd.mdreferences/touch-support.mdreferences/performance-optimization.mdreferences/state-management.mdBefore deployment, verify:
After implementing basic drag-and-drop:
| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-01 | fail→fail | 30,632 | 24,875 | -19% | 1 | 1 | 0% | 6,198 | 7,089 | +14% | 0 | 0 | — |
case-02 | pass→pass | 11,445 | 8,489 | -26% | 1 | 1 | 0% | 1,993 | 2,978 | +49% | 0 | 0 | — |
case-07 | fail→fail | 17,424 | 1,960 | -89% | 1 | 1 | 0% | 2,644 | 1,897 | -28% | 0 | 0 | — |
case-03 | pass→pass | 10,517 | 4,762 | -55% | 1 | 1 | 0% | 1,720 | 2,380 | +38% | 0 | 0 | — |
case-04 | pass→pass | 14,239 | 13,611 | -4% | 1 | 1 | 0% | 2,335 | 4,035 | +73% | 0 | 0 | — |
case-05 | pass→pass | 12,890 | 10,772 | -16% | 1 | 1 | 0% | 2,035 | 3,474 | +71% | 0 | 0 | — |
case-06 | pass→pass | 13,284 | 9,100 | -31% | 1 | 1 | 0% | 2,155 | 3,175 | +47% | 0 | 0 | — |
case-08 | fail→pass | 18,524 | 8,060 | -56% | 1 | 1 | 0% | 3,346 | 3,085 | -8% | 0 | 0 | — |
case-09 | fail→pass | 8,540 | 1,948 | -77% | 1 | 1 | 0% | 1,301 | 1,885 | +45% | 0 | 0 | — |
case-10 | fail→pass | 8,571 | 1,628 | -81% | 1 | 1 | 0% | 1,209 | 1,778 | +47% | 0 | 0 | — |
case-11 | fail→pass | 15,261 | 2,752 | -82% | 1 | 1 | 0% | 2,323 | 1,971 | -15% | 0 | 0 | — |
case-12 | fail→pass | 11,642 | 2,065 | -82% | 1 | 1 | 0% | 1,902 | 1,896 | -0% | 0 | 0 | — |
case-13 | fail→pass | 13,910 | 2,175 | -84% | 1 | 1 | 0% | 2,033 | 1,907 | -6% | 0 | 0 | — |
case-14 | fail→pass | 12,287 | 1,627 | -87% | 1 | 1 | 0% | 1,952 | 1,836 | -6% | 0 | 0 | — |
case-15 | pass→pass | 14,441 | 8,447 | -42% | 1 | 1 | 0% | 2,202 | 2,804 | +27% | 0 | 0 | — |
case-16 | fail→pass | 12,788 | 1,951 | -85% | 1 | 1 | 0% | 1,982 | 1,887 | -5% | 0 | 0 | — |
case-21 | pass→pass | 10,149 | 9,691 | -5% | 1 | 1 | 0% | 2,000 | 3,721 | +86% | 0 | 0 | — |
case-17 | fail→pass | 12,121 | 1,641 | -86% | 1 | 1 | 0% | 1,976 | 1,853 | -6% | 0 | 0 | — |
case-18 | fail→pass | 11,243 | 2,259 | -80% | 1 | 1 | 0% | 1,766 | 1,897 | +7% | 0 | 0 | — |
case-19 | pass→pass | 17,192 | 9,742 | -43% | 1 | 1 | 0% | 2,554 | 3,109 | +22% | 0 | 0 | — |
case-20 | pass→pass | 7,804 | 7,702 | -1% | 1 | 1 | 0% | 1,382 | 3,070 | +122% | 0 | 0 | — |
case-22 | pass→pass | 15,520 | 11,881 | -23% | 1 | 1 | 0% | 2,810 | 3,798 | +35% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +45 percentage points is the difference between those two pass rates over the 22 comparable cases.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.