Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Drag-and-Drop & Sortable Interfaces · ancoleman | DecimalAI

frontendby ancoleman

Drag-and-Drop & Sortable Interfaces

ancoleman/implementing-drag-drop

Source ancoleman/ai-design-components ↗License MIT

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

SkillScore91Maintained

Automatic

Frontend / UI pack

Last verified 8/21/2026

What it changes

Passed 20 of 22 test cases with the skill, and 10 of 22 without it.

Without skill45%

With skill91%

Checks it passed that the model alone missed

The response points to examples/grid-reorder.tsx
The response points to examples/kanban-board.tsx
The response points to examples/sortable-list.tsx

and 7 more in the full report

10 fixed10 passed either way2 still failing0 broke

Pass-rate lift: +45 pp
Tokens: +24%
Agent turns: 0%
Response time: -51%

Model gemini-3.6-flashMeasured 8/21/2026v120 of 22 cases passed with skill

Tokens, turns and time describe resource use, not a dollar price.

Use this skill

Save it into your project's skills folder. Claude Code picks it up in its next session.

curl -fsSL --create-dirs -o .claude/skills/ancoleman-implementing-drag-drop/SKILL.md https://app.decimal.ai/s/ancoleman-implementing-drag-drop/SKILL.md

Want it pinned and updatable? pip install "decimalai>=0.15", then decimalai skills add ancoleman-implementing-drag-drop, and start Claude Code with claude --plugin-dir "$(git rev-parse --show-toplevel)/.agents"

1 · One-time — install the CLI (docs ↗)

pip install "decimalai>=0.15"

2 · Get the skill — writes .agents/skills/ancoleman-implementing-drag-drop/ and pins it in .decimal/skills.lock

decimalai skills add ancoleman-implementing-drag-drop

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/ancoleman-implementing-drag-drop/SKILL.md https://app.decimal.ai/s/ancoleman-implementing-drag-drop/SKILL.md

Raw file: /s/ancoleman-implementing-drag-drop/SKILL.md ↗ · machine-readable summary at /s/ancoleman-implementing-drag-drop.json ↗

Safety checks: 3 of 3 passed

Code scan CleanIntent PassedContent Clean

See it in action

One of 10 test cases the skill fixed. Same model, same prompt, with and without the skill.

1 of 10

Prompt

Which file contains the JSON schema for validating sensor settings and animation configurations?

What was checked, without and with the skill
Checked	Without skill	With skill
The response references assets/dnd-config-schema.json	Missed	Passed

case-10 · gemini-3.6-flash · 8/21/2026 · answers are capped and redacted

What's inside

The instructions your model reads when the skill loads.

SKILL.md250 lines14 filesincludes scripts

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

Track record

Benchmark

20 / 22

test cases passed, vs 10 / 22 without

Adoption

Users: 0
Times used: 0

Safety and source details

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

View 15 scanner checks

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

ancoleman / ai-design-components

skills/implementing-drag-drop/SKILL.md

View on GitHub ↗

License MITImported 8/3/2026Version v1Bundled 13 files · scripts

More skills from the same source and nearby in the registry, with their headline benchmark lift.

Ready to supercharge your AI agents?

See it in action

What's inside

Drag-and-Drop & Sortable Interfaces

Purpose

When to Use

Core Patterns

Sortable Lists

Kanban Boards

File Upload Zones

Accessibility

Track record

Benchmark

Adoption

SkillSafety

Source

Related skills