New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Implementing Drag Drop

by ancoleman in ancoleman/ai-design-components

Implements drag-and-drop and sortable interfaces with React/TypeScript including kanban boards, sortable lists, file uploads, and reorderable grids.

MITAuto-check passedFrontend & Design

Install Implementing Drag Drop

skills CLI
$ npx skills add ancoleman/ai-design-components --skill implementing-drag-drop -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install ancoleman/ai-design-components implementing-drag-drop --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/ancoleman/ai-design-components.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/implementing-drag-drop .claude/skills/implementing-drag-drop && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
implementing-drag-drop
GitHub stars
526
Token cost
~1.8k tokens
SKILL.md length
733 words
Files
19 (incl. scripts, references, assets)
Skills in repo
75
Repo updated
First seen
Licence
MIT

At a glance

Implements drag-and-drop and sortable interfaces with React/TypeScript including kanban boards, sortable lists, file uploads, and reorderable grids.

  • Works in 6 steps: Analyze Requirements → Set Up Library → Implement Core Functionality → …
  • Building interactive UIs requiring direct manipulation
  • SKILL.md covers Purpose, When to Use, Core Patterns and Library Selection, plus 6 more sections
  • Runs TypeScript and JavaScript scripts from its folder; calls npm

What it does

Implementing Drag Drop is an agent skill from ancoleman/ai-design-components. 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.

Its SKILL.md is about 1.8k tokens, which your agent loads only when the skill is triggered. The skill folder holds 22 other files, including scripts, reference files and assets (for example `assets/dnd-config-schema.json`, `assets/drag-state-types.ts` and `outputs.yaml`).

It sits in Frontend & Design, covering Sprint planning and agile, File uploads and storage and Accessibility. It works with React and TypeScript. The repository describes itself as: Comprehensive UI/UX and Backend component design skills for AI-assisted development with Claude. The licence is MIT.

When your agent uses it

  • Building interactive UIs requiring direct manipulation
  • Spatial organization
  • Touch-friendly reordering

Example prompts

  • “Use the implementing-drag-drop skill to implement drag-and-drop and sortable interfaces with React/TypeScript including kanban boards, sortable…”
  • “/implementing-drag-drop”

Requirements

  • Node.js

Workflow steps

6 steps, taken from the step headings in SKILL.md.

  1. Analyze Requirements
  2. Set Up Library
  3. Implement Core Functionality
  4. Add Accessibility
  5. Optimize Performance
  6. Style with Design Tokens

What it can do on your machine

Read from SKILL.md and the folder at commit 76551b7. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 1 file in scripts/ (TypeScript and JavaScript, from the files we listed), which the agent can run.

    Shell commands in SKILL.md call:

    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Implementing Drag Drop loads about 1.8k tokens when it runs, and up to ~33k if it reads all its reference files. Until then it costs about 72 tokens; SKILL.md has 733 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~72
When it runs · the whole SKILL.md, loaded when a task matches
~1.8k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~33k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from ancoleman/ai-design-components at commit 76551b7, republished under its MIT licence (© ancoleman). 733 words, ~1,838 tokens.

Download SKILL.mdSave it as .claude/skills/implementing-drag-drop/SKILL.md (or your agent's skills folder). This skill also uses 18 other files; get the full folder from GitHub.
name
implementing-drag-drop
description
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.

Drag-and-Drop & Sortable Interfaces

Purpose

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.

When to Use

Invoke this skill when:

  • Building Trello-style kanban boards with draggable cards between columns
  • Creating sortable lists with drag handles for priority ordering
  • Implementing file upload zones with visual drag-and-drop feedback
  • Building reorderable grids for dashboard widgets or galleries
  • Creating visual builders with node-based interfaces
  • Implementing any UI requiring spatial reorganization through direct manipulation

Core Patterns

Sortable Lists

Reference references/dnd-patterns.md for:

  • Vertical lists with drag handles
  • Horizontal lists for tab/carousel reordering
  • Grid layouts with 2D dragging
  • Auto-scrolling near edges
Kanban Boards

Reference references/kanban-implementation.md for:

  • Multi-column boards with cards
  • WIP limits and swimlanes
  • Card preview on hover
  • Column management (add/remove/collapse)
File Upload Zones

Reference references/file-dropzone.md for:

  • Visual feedback states
  • File type validation
  • Multi-file handling
  • Progress indicators
Accessibility

Reference references/accessibility-dnd.md for:

  • Keyboard navigation patterns
  • Screen reader announcements
  • Alternative UI approaches
  • ARIA attributes

Library Selection

Primary: dnd-kit

Modern, accessible, and performant drag-and-drop for React.

Reference references/library-guide.md for:

  • Library comparison (dnd-kit vs alternatives)
  • Installation and setup
  • Core concepts and API
  • Migration from react-beautiful-dnd
Key Features
  • Built-in accessibility support
  • Touch, mouse, and keyboard input
  • Zero dependencies (~10KB core)
  • Highly customizable
  • TypeScript native

Implementation Workflow

Step 1: Analyze Requirements

Determine the drag-and-drop pattern needed:

  • Simple list reordering → Sortable list pattern
  • Multi-container movement → Kanban pattern
  • File handling → Dropzone pattern
  • Complex interactions → Visual builder pattern
Step 2: Set Up Library

Install required packages:

bash
npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities
Step 3: Implement Core Functionality

Use examples as starting points:

  • examples/sortable-list.tsx for basic lists
  • examples/kanban-board.tsx for multi-column boards
  • examples/file-dropzone.tsx for file uploads
  • examples/grid-reorder.tsx for grid layouts
Step 4: Add Accessibility

Reference references/accessibility-dnd.md to:

  • Implement keyboard navigation
  • Add screen reader announcements
  • Provide alternative controls
  • Test with assistive technologies

Run scripts/validate_accessibility.js to check implementation.

Step 5: Optimize Performance

For lists with >100 items:

  • Reference references/performance-optimization.md
  • Implement virtual scrolling
  • Use scripts/calculate_drop_position.js for efficient calculations
Step 6: Style with Design Tokens

Apply theming using the design-tokens skill:

  • Reference design token variables
  • Implement drag states (hovering, dragging, dropping)
  • Add visual feedback and animations

Mobile & Touch Support

Reference references/touch-support.md for:

  • Long press to initiate drag
  • Preventing scroll during drag
  • Touch-friendly hit areas (44px minimum)
  • Gesture conflict resolution

State Management

Reference references/state-management.md for:

  • Managing drag state in React
  • Optimistic updates
  • Undo/redo functionality
  • Persisting order changes

Scripts

Calculate Drop Position

Run scripts/calculate_drop_position.js to:

  • Determine valid drop zones
  • Calculate insertion indices
  • Handle edge cases
Generate Configuration

Run scripts/generate_dnd_config.js to:

  • Create dnd-kit configuration
  • Set up sensors and modifiers
  • Configure animations
Validate Accessibility

Run scripts/validate_accessibility.js to:

  • Check keyboard navigation
  • Verify ARIA attributes
  • Test screen reader compatibility

Examples

Each example includes complete TypeScript code with accessibility:

Show full SKILL.md (290 more words)Show less
Sortable List

examples/sortable-list.tsx

  • Vertical list with drag handles
  • Keyboard navigation (Space/Enter to grab, arrows to move)
  • Screen reader announcements
Kanban Board

examples/kanban-board.tsx

  • Multiple columns with draggable cards
  • Card movement between columns
  • Column management features
  • WIP limits
File Dropzone

examples/file-dropzone.tsx

  • Drag files to upload
  • Visual feedback states
  • File type validation
  • Upload progress
Grid Reorder

examples/grid-reorder.tsx

  • 2D grid dragging
  • Auto-layout on drop
  • Responsive breakpoints

Assets

TypeScript Types

assets/drag-state-types.ts provides:

  • Type definitions for drag state
  • Event handler types
  • Configuration interfaces
Configuration Schema

assets/dnd-config-schema.json defines:

  • Valid configuration options
  • Sensor settings
  • Animation parameters

Best Practices

Visual Feedback
  • Show drag handles (⋮⋮) to indicate draggability
  • Change cursor (grab → grabbing)
  • Display drop zone placeholders
  • Make dragged items semi-transparent
  • Highlight valid drop targets
Performance
  • Use CSS transforms, not position properties
  • Apply will-change: transform for animations
  • Throttle drag events for large lists
  • Implement virtual scrolling when needed
Accessibility First
  • Always provide keyboard alternatives
  • Include screen reader announcements
  • Test with NVDA/JAWS/VoiceOver
  • Provide non-drag alternatives (buttons/forms)
Error Handling
  • Show invalid drop feedback
  • Implement undo functionality
  • Auto-save after successful drops
  • Handle network failures gracefully

Common Pitfalls

Avoid These Issues
  • Forgetting keyboard navigation
  • Missing touch support
  • Not preventing scroll during drag
  • Ignoring accessibility
  • Poor performance with large lists
Solutions

Reference the appropriate guide for each issue:

  • Accessibility → references/accessibility-dnd.md
  • Touch → references/touch-support.md
  • Performance → references/performance-optimization.md
  • State → references/state-management.md

Testing Checklist

Before deployment, verify:

  • Keyboard navigation works completely
  • Screen readers announce all actions
  • Touch devices can drag smoothly
  • Performance acceptable with expected data volume
  • Visual feedback clear and responsive
  • Undo/redo functionality works
  • Alternative UI provided for accessibility
  • Works across all target browsers

Next Steps

After implementing basic drag-and-drop:

  1. Add advanced features (auto-scroll, multi-select)
  2. Implement gesture support for mobile
  3. Add animation polish with Framer Motion
  4. Create custom drag preview components
  5. Build complex interactions (nested dragging)

© ancoleman, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 18 other files (scripts, references, assets) in skills/implementing-drag-drop of ancoleman/ai-design-components.

  • SKILL.md
  • assets/dnd-config-schema.json
  • assets/drag-state-types.ts
  • examples/file-dropzone.tsx
  • examples/grid-reorder.tsx
  • examples/kanban-board.tsx
  • examples/sortable-list.tsx
  • outputs.yaml
  • references/accessibility-dnd.md
  • references/dnd-patterns.md
  • references/file-dropzone.md
  • references/kanban-implementation.md
  • references/library-guide.md
  • references/performance-optimization.md
  • references/state-management.md
  • references/touch-support.md
  • scripts/calculate_drop_position.js
  • … and 2 more

Open the folder on GitHubat commit 76551b7

Compare with similar skills

Implementing Drag Drop next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Implementing Drag Drop compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Implementing Drag Drop this skillancoleman/ai-design-components526—~1.8kAutomated safety check: PassMIT
React Ariaintentui/laravel1621 repos~3.9kAutomated safety check: PassApache-2.0
Instui Docsinstructure/instructure-ui482—~498Automated safety check: PassCustom licence
Connect Component To Figmadequelabs/cauldron129—~2kAutomated safety check: PassMPL-2.0
Component ForgeEliasOulkadi/shokunin114—~3.6kAutomated safety check: NotesMIT
Stitch to React and Vite Dashboardgoogle-labs-code/stitch-skills8.4k—~914Automated safety check: NotesApache-2.0

Similar skills

  • React Aria

    intentui/laravel

    Build accessible UI components with React Aria Components. An agent skill from intentui/laravel.

    162 GitHub starsUsed in 1 repo~3.9k tokens
    Frontend & DesignAuto-check passed

  • Instui Docs

    instructure/instructure-ui

    Look up authoritative Instructure UI (InstUI, @instructure/ui-) documentation — component APIs, props, theme variables, usage examples, and guides — by querying instructure.design's plaintext docs.

    482 GitHub stars~498 tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Connect Component To Figma

    dequelabs/cauldron

    Add a Figma Code Connect (.figma.tsx) file for a Cauldron React component.

    129 GitHub stars~2k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Component Forge

    EliasOulkadi/shokunin

    Build production-grade components for React, Vue 3, and Svelte 5 with all states (loading, empty, error, success, idle), TypeScript strict, WCAG 2.2 accessibility, server components (RSC), and…

    114 GitHub stars~3.6k tokensUpdated 3 days ago
    Frontend & DesignAuto-check: notes

  • Stitch to React and Vite Dashboard

    google-labs-code/stitch-skills

    Official

    Turns Stitch screens into a React, Vite and TypeScript dashboard with TanStack Query data fetching, DESIGN.md tokens as CSS variables and optional read-only Web3 data.

    8.4k GitHub stars~914 tokensUpdated 1 mo ago
    Frontend & DesignAuto-check: notes

  • Components Build

    Asymmetric-al/core

    Build modern, composable, and accessible React UI components following the components.build specification.

    382 GitHub stars~2.1k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

More from ancoleman/ai-design-components

All 75 skills in this repo

  • Building AI Chat

    ancoleman/ai-design-components

    Builds AI chat interfaces and conversational UI with streaming responses, context management, and multi-modal support.

    526 GitHub starsUsed in 1 repo~3.4k tokens
    Auto-check passed

  • Building Forms

    ancoleman/ai-design-components

    Builds form components and data collection interfaces including contact forms, registration flows, checkout processes, surveys, and settings pages.

    526 GitHub stars~3.7k tokensUpdated 10 mo ago
    Auto-check passed

  • Building Tables

    ancoleman/ai-design-components

    Builds tables and data grids for displaying tabular information, from simple HTML tables to complex enterprise data grids.

    526 GitHub stars~1.8k tokensUpdated 10 mo ago
    Auto-check passed

  • Creating Dashboards

    ancoleman/ai-design-components

    Creates comprehensive dashboard and analytics interfaces that combine data visualization, KPI cards, real-time updates, and interactive layouts.

    526 GitHub stars~3.5k tokensUpdated 10 mo ago
    Auto-check passed

  • Designing Layouts

    ancoleman/ai-design-components

    Designs layout systems and responsive interfaces including grid systems, flexbox patterns, sidebar layouts, and responsive breakpoints.

    526 GitHub stars~1.7k tokensUpdated 10 mo ago
    Auto-check passed

  • Displaying Timelines

    ancoleman/ai-design-components

    Displays chronological events and activity through timelines, activity feeds, Gantt charts, and calendar interfaces.

    526 GitHub stars~2.7k tokensUpdated 10 mo ago
    Auto-check passed

Works with

Categories

Questions about Implementing Drag Drop

What does Implementing Drag Drop do?

Implements drag-and-drop and sortable interfaces with React/TypeScript including kanban boards, sortable lists, file uploads, and reorderable grids. Implementing Drag Drop is an agent skill from ancoleman/ai-design-components. Implements drag-and-drop and sortable interfaces with React/TypeScript including kanban boards, sortable lists, file uploads, and reorderable grids.

When should I use Implementing Drag Drop?

Implementing Drag Drop fits situations like: building interactive UIs requiring direct manipulation; spatial organization; touch-friendly reordering.

How do I install Implementing Drag Drop in Claude Code?

Run `npx skills add ancoleman/ai-design-components --skill implementing-drag-drop -a claude-code`. Or copy the skill folder (skills/implementing-drag-drop in ancoleman/ai-design-components) into .claude/skills/implementing-drag-drop in your project. Claude Code loads it when a task matches its description.

How do I install Implementing Drag Drop in Codex?

Run `npx skills add ancoleman/ai-design-components --skill implementing-drag-drop -a codex`. Or copy the skill folder (skills/implementing-drag-drop in ancoleman/ai-design-components) into .agents/skills/implementing-drag-drop in your project. Codex loads it when a task matches its description.

Can I use Implementing Drag Drop in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add ancoleman/ai-design-components --skill implementing-drag-drop -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/implementing-drag-drop, .gemini/skills/implementing-drag-drop, .github/skills/implementing-drag-drop and .opencode/skills/implementing-drag-drop in your project.

What does Implementing Drag Drop need to run?

Going by SKILL.md and its folder, Implementing Drag Drop needs TypeScript and JavaScript for the scripts in its folder and the command-line tools its instructions call (npm). Our summary lists: Node.js.

Does Implementing Drag Drop access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Implementing Drag Drop safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Implementing Drag Drop use?

Implementing Drag Drop is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Implementing Drag Drop use?

About 1.8k tokens (SKILL.md is roughly 7.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 32k tokens, read only when the agent opens those files.

What are the alternatives to Implementing Drag Drop?

Skills that share tags, products or a category with Implementing Drag Drop: React Aria (intentui/laravel, 162 stars), Instui Docs (instructure/instructure-ui, 482 stars), Connect Component To Figma (dequelabs/cauldron, 129 stars) and Component Forge (EliasOulkadi/shokunin, 114 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Implementing Drag Drop?

ancoleman (a GitHub user) maintains it in ancoleman/ai-design-components, which has 526 GitHub stars. The repository holds 75 skills in this directory. The repository was last updated on December 11, 2025.

Source: ancoleman/ai-design-components on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.