OpenChamber Drag-to-Reorder Skill
A battle-tested @dnd-kit playbook that fixes the hardest drag-to-reorder bugs: variable-width items, wrapping layouts, and touch/mobile gesture conflicts.
Pure technical guidance with no permission requests, external effects, data flows, or rollback needs; least privilege trivially satisfied; reference file paths, MIT license, and clear attribution. Not full marks because publisher identity is unverified and claims are static declarations without signed or third-party verification.
The five rules are internally consistent, with minimal wiring code, a symptom index, and high-quality failure explanations (onDragOver oscillation, missing touch-action, sensor conflicts). However, static review cannot reproduce key paths, and no dedicated test suite or CI evidence for this skill path was shown, so the static cap applies.
Frontmatter description and triggers are precise (implementing/modifying sortable behavior, @dnd-kit, touch, variable-width wrapping items); boundaries and non-fit cases are explicit, so false triggering is unlikely. Depth coupling to OpenChamber-specific components limits generic reuse; no Chinese-language support notes; no mainland-China reachability risk since @dnd-kit is a public npm dependency.
Well-layered: overview, when-to-use, prioritized rules, symptom index, minimal wiring, completion criteria; MIT license clear. Not full marks because there is no skill-level versioning, changelog, or explicit maintenance ownership/update path; the dependency claim in packages/ui/package. was not directly verifiable from provided files.
Targets real pain points (wrapping variable-width chips, mobile long-press vs scroll conflict) with directly applicable configuration and honest disclosure of known dnd-kit limitations plus an alternative UX. Static review cannot verify outputs are directly usable, capped at 7; one point deducted because representative outputs are unverified.
Cites concrete in-repo reference implementations (DraftPresetChips.tsx, sortable-tabs-strip.tsx) and a specific dependency list, making claims auditable; symptom-cause-fix mappings are specific. But under static read there is no execution evidence or third-party corroboration, and fact/inference separation is implicit, so the static cap applies.
- This is a static source review; no code was executed, and the effectiveness of the rules (especially real-world dnd-kit strategy behavior) is not independently reproduced.
- The skill is tightly coupled to OpenChamber-specific components (e.g. DraftPresetChips.tsx) and an installed @dnd-kit dependency set; verify dependencies and behavior before porting to other projects.
- The skill file carries no version or changelog; content may drift as the repository evolves — confirm the referenced files still exist and match before use.
- The document itself notes rectSortingStrategy has known rough edges for cross-row reordering; prefer the suggested drop-indicator UX alternative when that case arises.
- Publisher identity is unverified in the FollowSkills registry; no points were deducted for this, but users should not infer extra reliability or safety guarantees from it.
What does this skill do, and when should you use it?
drag-to-reorder is one of the 18 skills bundled in the OpenChamber repository (openchamber/openchamber), located at .agents/skills/drag-to-reorder/SKILL.md. It is a pure knowledge skill — no scripts — distilling OpenChamber's production experience with @dnd-kit into five rules: use CSS.Translate instead of CSS.Transform to stop dragged items stretching, pick the sorting strategy by layout, split mouse and touch into two sensors, set touch-action: none on draggables, and reorder exactly once in onDragEnd with stable IDs and arrayMove. A symptom index maps common failures (stretching, cross-row overlap, 'Maximum update depth exceeded', touch scroll hijacking) directly to fixes. It only applies to React projects using @dnd-kit.
The skill executes nothing; it provides configuration knowledge and code templates: a correct useSortable wiring example (CSS.Translate plus transition); a layout-to-strategy table (rectSortingStrategy / horizontalListSortingStrategy / verticalListSortingStrategy); a dual-sensor setup with MouseSensor (distance: 8) and TouchSensor (delay: 200, tolerance: 6) so tap activates, long-press drags, and swipe scrolls; a minimal Item component plus an onDragEnd + arrayMove reorder template; and a symptom table diagnosing stretching, cross-row overlap, Maximum update depth exceeded, and touch scroll hijacking.
- A frontend developer adding drag-to-reorder to variable-width chips/tags that wrap onto multiple rows in a React project, hitting the 'dragged item stretches to slot width' bug.
- A mobile web developer who needs tap-to-activate, long-press-to-drag, and swipe-to-scroll to coexist and is fighting PointerSensor activation constraints.
- An engineer maintaining an existing @dnd-kit sortable that overlaps items across rows or throws 'Maximum update depth exceeded' and needs a diagnosis path.
- A developer building a single-row scrollable tab strip who must confirm horizontalListSortingStrategy is the right choice.
- A reviewer checking a drag-and-drop PR against a validated checklist: width preservation, cross-row reflow, stable IDs, single reorder on drop.
What are this skill's strengths and limitations?
- Distilled from OpenChamber's real production code, with two in-repo reference implementations (DraftPresetChips.tsx and sortable-tabs-strip.tsx).
- Covers desktop and mobile together, resolving the tap / long-press-drag / scroll gesture conflict that trips up most implementations.
- A symptom index maps errors and visual glitches directly to rules and fixes, making debugging fast.
- Honestly flags dnd-kit's known weakness with variable-width cross-row reordering and offers a fallback UX (drop-position indicator) instead of hiding it.
- Tightly bound to React and the @dnd-kit ecosystem; not applicable to Vue, Svelte, or native drag implementations.
- Knowledge-only: no scripts or automated tests, so results depend on the user applying the rules correctly.
- For cross-row variable-width cases it concedes rectSortingStrategy is still imprecise, requiring an extra UX pattern and more code.
- Based on one project's experience; no evidence of validation across other codebases or scales.
How do you install this skill?
The skill ships inside the OpenChamber repository at .agents/skills/drag-to-reorder/, with SKILL.md as the core file. If your Agent Skills-compatible client loads local skill folders, copy the folder into your client's skills directory; the README gives no command for installing this skill alone (the curl install script in the README installs the OpenChamber application, not this skill). It can also simply be read as reference documentation.
How do you use this skill?
This is a knowledge-only skill, typically referenced automatically when a model receives a relevant task, but it also reads well directly. Typical trigger: ask your agent to 'implement a wrapping, drag-to-reorder chip list with @dnd-kit that supports mobile long-press dragging'. Prerequisite: @dnd-kit/core, @dnd-kit/sortable, and @dnd-kit/utilities installed in your project (already present in OpenChamber's packages/ui/package.). When implementing, verify each of the five rules: Translate not Transform, strategy by layout, two sensors, touch-none, and one reorder in onDragEnd with stable IDs.