Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add ancoleman/ai-design-components --skill implementing-drag-dropgit clone --depth 1 https://github.com/ancoleman/ai-design-componentsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/ancoleman/ai-design-components/implementing-drag-drop)<a href="https://agentmods.dev/skills/ancoleman/ai-design-components/implementing-drag-drop"><img src="https://agentmods.dev/badge/skills/ancoleman/ai-design-components/implementing-drag-drop/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/ancoleman/ai-design-components/implementing-drag-drop"><img src="https://agentmods.dev/badge/skills/ancoleman/ai-design-components/implementing-drag-drop.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00054 | $0.01554 |
| Opus 5.5 | $0.00022 | $0.00622 |
| Sonnet 5.5 | $0.00011 | $0.00311 |
| Haiku 4.5 | $0.00005 | $0.00155 |
Grade A, and why
implementing-drag-drop scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 255 lines — stays where its author put it; the contents beside it link to each section on GitHub.
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
What ships with it
18 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- assets/dnd-config-schema.json 10 KB
- assets/drag-state-types.ts 6.9 KB runs code
- examples/file-dropzone.tsx 13 KB
- examples/grid-reorder.tsx 12 KB
- examples/kanban-board.tsx 13 KB
- examples/sortable-list.tsx 8.8 KB
- outputs.yaml 7.9 KB
- references/accessibility-dnd.md 13 KB
- references/dnd-patterns.md 7.4 KB
- references/file-dropzone.md 21 KB
- references/kanban-implementation.md 19 KB
- references/library-guide.md 9.8 KB
- references/performance-optimization.md 16 KB
- references/state-management.md 19 KB
- references/touch-support.md 18 KB
- scripts/calculate_drop_position.js 7.5 KB runs code
- scripts/generate_dnd_config.js 11 KB runs code
- scripts/validate_accessibility.js 14 KB runs code
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 1mo ago First seen · 255 lines · 54 tokens per session scan A 3105235b6d2c
implementing-drag-drop is a skill published in the GitHub repository ancoleman/ai-design-components (524 stars, last pushed 10mo ago), licensed MIT. It adds 54 tokens to every session and 1,554 once invoked, about $0.0002 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
frontend
Builds, styles, and polishes anything drawn with HTML, CSS, or SVG: web UI, pages, components, HTML reports rendered to PDF or print, figures, PNG/SVG diagrams, slides, and images for Notion or Slack. Use for any styling, layout, animation, or visual-quality task, or when asked to make something look or feel a certain…
ambience-skill
Layer A ambience-and-typographic-motion reference anchored to the react-bits catalog (reactbits.dev). Stacks on any style skill whenever work adds a hero atmosphere, an animated or shader background, a typographic reveal (split, blur, shimmer, typewriter, count-up, marquee), scroll storytelling, or card surface…
react-component-generator
Generate React components with TypeScript, proper props, hooks, and accessibility. Use when creating new React components, UI elements, or refactoring existing components.
apollo-graphql
Guidelines for developing GraphQL APIs and React applications using Apollo Client for state management, data fetching, and caching.
react-query
Guidelines for using React Query for data fetching, caching, and server state synchronization in React applications.
react-router-v7
React Router v7 framework mode conventions for route modules, data loaders, actions, and progressive enhancement. Use when building file-based routes with loaders/actions, handling form submissions with Form/useFetcher/useSubmit, adding route ErrorBoundary components, revalidating data after mutations, or migrating…