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 agentmods add skills/robcsaszar/frontend-kit/with-drag-dropnpx skills add robcsaszar/frontend-kit --skill with-drag-dropgit clone --depth 1 https://github.com/robcsaszar/frontend-kitWrote 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/robcsaszar/frontend-kit/with-drag-drop)<a href="https://agentmods.dev/skills/robcsaszar/frontend-kit/with-drag-drop"><img src="https://agentmods.dev/badge/skills/robcsaszar/frontend-kit/with-drag-drop.svg" alt="Measured on agentmods" 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 | $0.00136 | $0.02354 |
| Opus 5 | $0.00068 | $0.01177 |
| Sonnet 5 | $0.00027 | $0.00471 |
| Haiku 4.5 | $0.00014 | $0.00235 |
Grade A, and why
with-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 4d 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 — 74 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Drag and Drop — Implementation Guidance
Custom pointer-driven dragging, built directly (not native HTML5 draggable/dataTransfer — that's a separate, OS-integrated mechanism this skill does not cover, and no third-party dependency is required for anything below). One core engine, extended per scenario — not several competing approaches to pick between. Apply Core Rules to everything you build; The Core Engine describes the shared shape; Extending the Engine covers each scenario.
The Core Engine
Every scenario below is the same three-part shape, just configured differently:
- Activators — whatever starts/moves/ends the gesture. A pointer activator (pointerdown/move/up, gated by a distance or delay threshold) is the default; a keyboard activator (Space/Enter to pick up, arrow keys to move, Escape to cancel) drives the same start/move/end lifecycle so keyboard operability is architected in, not bolted on afterward.
- Modifiers — an ordered pipeline of pure functions the raw delta passes through before it's applied: restrict-to-bounds, snap-to-grid, aspect-ratio lock, min/max size. Order matters — each modifier sees the previous modifier's already-adjusted values, not the raw pointer position.
- Position model — a
base(the resting value, changed only at gesture start/end) and anoffset(the live delta, changed continuously during the gesture, folded back to zero the instant it ends). See Core Rules for why these stay separate.
A free-drag element is this engine with no modifiers. A resize handle is this engine tracking width/height instead of x/y. A sortable list is this engine plus a swap/shift strategy function. A drop zone is this engine plus a collision-detection function against registered targets. Build the engine once; each scenario in Extending the Engine is a small addition to it, not a separate system.
Core Rules
These apply everywhere in the engine — a naive implementation of any one of these has broken working code in production, including this exact project's own feedback-widget FAB earlier the same day.
What ships with it
1 file 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.
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.
- 4d ago First seen · 74 lines · 136 tokens per session scan A 929f0281e567
with-drag-drop is a skill published in the GitHub repository robcsaszar/frontend-kit (1 stars, last pushed 2d ago), licensed MIT. It adds 136 tokens to every session and 2,354 once invoked, about $0.0007 per session on Opus 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-31.
Other skills, from other repositories
verify
Build/launch/drive recipe for verifying apps/docs changes at runtime (demos, docs pages, llms.txt).
oat-css
Our preferred CSS framework — ultra-lightweight, semantic HTML UI library (8KB). Style web UIs with semantic HTML and minimal classes. Override with app-level SCSS only when necessary.
pwa
Use when the user asks to make a site installable, turn it into a PWA, add a service worker, add a web app manifest, enable "add to home screen", or support offline. Also use when adding favicon/app icons, iOS home-screen support (apple-mobile-web-app meta tags), or verifying PWA installability.
docker
Docker Compose conventions — short service names, no root, no host ports in base compose, override files for local customisations.
pb-api
Operate PocketBase via its REST API. Use for CRUD operations on collections, authentication, querying records with filters, and managing PocketBase data.
pb-extend
Extend PocketBase with custom hooks and routes in JS or Go. Use when user wants to add custom API routes, modify PocketBase behavior, or add server-side logic.