Reorder
LilMGenius/paperthin
Realign a listing whose order has gone arbitrary — a list, table, catalog, sections, an enum — into a logical sequence under one stated principle.
A skill your agent uses when implementing or modifying OpenChamber sortable or drag-to-reorder behavior, especially @dnd-kit, touch/mobile interactions, variable-width items, or wrapping layouts.
MITAuto-check passed
Install Drag To Reorder
$ npx skills add openchamber/openchamber --skill drag-to-reorder -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install openchamber/openchamber drag-to-reorder --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/openchamber/openchamber.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/drag-to-reorder .claude/skills/drag-to-reorder && rm -rf skills-srcUse ~/.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/
Install the "drag-to-reorder" agent skill from https://github.com/openchamber/openchamber/tree/main/.agents/skills/drag-to-reorder into .claude/skills/drag-to-reorder/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "drag-to-reorder", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/openchamber/openchamber/tree/main/.agents/skills/drag-to-reorderType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add openchamber/openchamber --skill drag-to-reorder -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install openchamber/openchamber drag-to-reorder --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/openchamber/openchamber.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/drag-to-reorder .agents/skills/drag-to-reorder && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "drag-to-reorder" agent skill from https://github.com/openchamber/openchamber/tree/main/.agents/skills/drag-to-reorder into .agents/skills/drag-to-reorder/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "drag-to-reorder", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add openchamber/openchamber --skill drag-to-reorder -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install openchamber/openchamber drag-to-reorder --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/openchamber/openchamber.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/drag-to-reorder .cursor/skills/drag-to-reorder && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "drag-to-reorder" agent skill from https://github.com/openchamber/openchamber/tree/main/.agents/skills/drag-to-reorder into .cursor/skills/drag-to-reorder/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "drag-to-reorder", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/openchamber/openchamber.git --path .agents/skills/drag-to-reorder--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add openchamber/openchamber --skill drag-to-reorder -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install openchamber/openchamber drag-to-reorder --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/openchamber/openchamber.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/drag-to-reorder .gemini/skills/drag-to-reorder && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "drag-to-reorder" agent skill from https://github.com/openchamber/openchamber/tree/main/.agents/skills/drag-to-reorder into .gemini/skills/drag-to-reorder/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "drag-to-reorder", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install openchamber/openchamber drag-to-reorderInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add openchamber/openchamber --skill drag-to-reorder -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/openchamber/openchamber.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/drag-to-reorder .github/skills/drag-to-reorder && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "drag-to-reorder" agent skill from https://github.com/openchamber/openchamber/tree/main/.agents/skills/drag-to-reorder into .github/skills/drag-to-reorder/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "drag-to-reorder", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add openchamber/openchamber --skill drag-to-reorder -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install openchamber/openchamber drag-to-reorder --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/openchamber/openchamber.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/drag-to-reorder .opencode/skills/drag-to-reorder && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "drag-to-reorder" agent skill from https://github.com/openchamber/openchamber/tree/main/.agents/skills/drag-to-reorder into .opencode/skills/drag-to-reorder/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "drag-to-reorder", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
drag-to-reorder- GitHub stars
- 11k
- Token cost
- ~1.8k tokens
- SKILL.md length
- 635 words
- Files
- 1
- Skills in repo
- 21
- Repo updated
- First seen
- Licence
- MIT
At a glance
A skill your agent uses when implementing or modifying OpenChamber sortable or drag-to-reorder behavior, especially @dnd-kit, touch/mobile interactions, variable-width items, or wrapping layouts.
- Works in 5 steps: Translate, not Transform — kills the… → Pick the strategy by layout → Desktop + mobile = two sensors… → …
- Modifying OpenChamber sortable
- SKILL.md covers Overview, When to Use, The Five Rules (most important… and Minimal Wiring, plus 4 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Drag To Reorder is an agent skill from openchamber/openchamber. Use when implementing or modifying OpenChamber sortable or drag-to-reorder behavior, especially @dnd-kit, touch/mobile interactions, variable-width items, or wrapping layouts.
Its SKILL.md is about 1.8k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts. Compatibility notes: opencode
The repository describes itself as: Agentic Development Environment based on OpenCode AI agent. The licence is MIT.
When your agent uses it
- Modifying OpenChamber sortable
- Drag-to-reorder behavior
- Especially @dnd-kit
- Touch/mobile interactions
Example prompts
- “/drag-to-reorder”
Requirements
- Compatibility (from SKILL.md): opencode
Workflow steps
5 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 09494f3. 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
No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
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.
Compatibility
opencode
From compatibility in the SKILL.md frontmatter.
Context cost
Drag To Reorder loads about 1.8k tokens when it runs. Until then it costs about 48 tokens; SKILL.md has 635 words of instructions outside code blocks.
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); files beside SKILL.md are not scanned.
SKILL.md
The full file from openchamber/openchamber at commit 09494f3, republished under its MIT licence (© openchamber). 635 words, ~1,819 tokens.
Download SKILL.mdSave it as
.claude/skills/drag-to-reorder/SKILL.md (or your agent's skills folder).- name
- drag-to-reorder
- description
- Use when implementing or modifying OpenChamber sortable or drag-to-reorder behavior, especially `@dnd-kit`, touch/mobile interactions, variable-width items, or wrapping layouts.
- compatibility
- opencode
- license
- MIT
Overview
OpenChamber uses @dnd-kit (@dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities) for drag-to-reorder. Getting it to feel right on both desktop and mobile — especially for chips/tags of variable width that wrap onto multiple rows — has several non-obvious gotchas. This skill captures the configuration that works, and the bugs to avoid.
Reference implementations in this repo:
packages/ui/src/components/chat/DraftPresetChips.tsx— variable-width chips that wrap (the hardest case; mobile long-press).packages/ui/src/components/ui/sortable-tabs-strip.tsx— single-row scrollable tabs.
When to Use
- Adding any reorderable list, row of chips/tags, or sortable grid.
- Fixing an existing sortable that stretches the dragged item, jumps/overlaps across rows, throws "Maximum update depth exceeded", or doesn't work on touch.
The Five Rules (most important first)
1. Translate, not Transform — kills the "stretch to slot width" bug
CSS.Transform.toString(transform) emits translate3d(...) scaleX(..) scaleY(..). For variable-width items the sorting strategy puts a non-1 scale on the lifted item so it stretches to the neighbor/slot width. Use CSS.Translate.toString(transform) — translation only, no scale — and the dragged item keeps its own size. Sibling shifting is unaffected (their scale was 1 anyway).
import { CSS } from '@dnd-kit/utilities';
const { transform, transition, isDragging } = useSortable({ id });
<div style={{ transform: CSS.Translate.toString(transform), transition }} />
// ^^^^^^^^^ NOT CSS.Transform.toString2. Pick the strategy by layout
| Layout | Strategy |
|---|---|
| Wraps onto multiple rows / grid / chips of variable width | rectSortingStrategy (default — computes 2D positions, so items can shift to other rows) |
| Guaranteed single horizontal row (e.g. scrollable tab strip) | horizontalListSortingStrategy |
| Single vertical list | verticalListSortingStrategy |
horizontalListSortingStrategy on a wrapping row is the classic mistake: it assumes one row, so dragging to another row makes items overlap instead of reflowing. Use rectSortingStrategy for anything that wraps.
3. Desktop + mobile = two sensors (MouseSensor + TouchSensor with delay)
Do NOT use a single PointerSensor — a distance constraint makes touch fight scrolling, and a delay constraint would force desktop to hold-before-drag. Split them:
import { MouseSensor, TouchSensor, useSensor, useSensors } from '@dnd-kit/core';
const sensors = useSensors(
// Desktop: drag after a small move; a click still fires.
useSensor(MouseSensor, { activationConstraint: { distance: 8 } }),
// Touch: long-press to drag — tap fires the element's onClick, a quick swipe scrolls.
useSensor(TouchSensor, { activationConstraint: { delay: 200, tolerance: 6 } }),
);This gives: tap = activate the item (e.g. submit), long-press ≈200ms = drag, swipe = scroll.
4. touch-action: none on the draggable
Without it the browser hijacks the touch gesture (scrolls) instead of letting dnd-kit drag. Add Tailwind touch-none (and usually select-none) to the draggable element.
5. Reorder on onDragEnd, with stable ids and arrayMove
import { arrayMove } from '@dnd-kit/sortable';
const onDragEnd = (e: DragEndEvent) => {
const { active, over } = e;
if (over && active.id !== over.id) {
// find by id, never by array index
const from = items.findIndex(i => i.id === active.id);
const to = items.findIndex(i => i.id === over.id);
setItems(arrayMove(items, from, to));
}
};IDs must be stable per item (derive from the item's identity, e.g. type:name), never the array index — index ids break tracking after the first move.
Minimal Wiring
import { DndContext, MouseSensor, TouchSensor, closestCenter, useSensor, useSensors, type DragEndEvent } from '@dnd-kit/core';
import { SortableContext, useSortable, rectSortingStrategy, arrayMove } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
const Item: React.FC<{ id: string; label: string; onClick: () => void }> = ({ id, label, onClick }) => {
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
return (
<div ref={setNodeRef} style={{ transform: CSS.Translate.toString(transform), transition }} className={cn(isDragging && 'opacity-60')}>
<button type="button" {...attributes} {...listeners} onClick={onClick} className="touch-none select-none ...">
{label}
</button>
</div>
);
};
// Configure sensors per Rule 3, reorder onDragEnd per Rule 5, and choose the
// SortableContext strategy from Rule 2. This item wiring preserves item width.A clickable element can be draggable at the same time: keep onClick on the button and the activation constraint (distance/delay) lets a plain click/tap through.
Show full SKILL.md (260 more words)Show less
Symptom Index
| Symptom | Cause | Fix |
|---|---|---|
| Dragged item stretches to the target slot width | Scale from CSS.Transform.toString | Rule 1 |
| On narrow/multi-row: items don't reflow to other rows, overlap, unclear drop target | Single-row strategy on wrapping layout | Rule 2 |
| "Maximum update depth exceeded" during drag + dragged element floats offset from the cursor | Live-reorder in onDragOver (empty strategy + setState each over) oscillates A↔B with variable sizes; the empty DragOverlay we paired with it was mispositioned | Don't reorder in onDragOver. Reorder once in onDragEnd (Rule 5). Only reach for live-reorder if you truly need physical row-reflow, and then guard against oscillation. |
| Touch drag scrolls the page instead of dragging | Missing touch ownership | Rule 4 |
| Touch: every finger move drags, or tap doesn't register | One sensor for mouse and touch | Rule 3 |
If rectSortingStrategy still isn't crisp enough
Reordering variable-width chips across wrapped rows is a documented rough edge in dnd-kit's box strategies. rectSortingStrategy is the best the strategy-based approach offers without instability. If a design needs bulletproof cross-row feedback, switch UX: render a drop-position indicator (a line/gap showing where it will land) and keep items static during the drag (no reorder until drop) — this avoids both overlap and the oscillation loop, at the cost of more code. Discuss before building it.
Key Files
- Variable-width wrapping chips:
packages/ui/src/components/chat/DraftPresetChips.tsx - Single-row tab strip:
packages/ui/src/components/ui/sortable-tabs-strip.tsx - Library:
@dnd-kit/core,@dnd-kit/sortable,@dnd-kit/utilities(already inpackages/ui/package.json)
Completion Criteria
Verify every applicable rule on desktop and touch. Wrapping layouts must preserve item width, reflow across rows, allow taps and scrolling before long-press activation, and reorder exactly once on drag end with stable IDs.
© openchamber, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in .agents/skills/drag-to-reorder of openchamber/openchamber.
Open the folder on GitHubat commit 09494f3
Compare with similar skills
Drag To Reorder 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Drag To Reorder this skillopenchamber/openchamber | 11k | — | ~1.8k | Automated safety check: Pass | MIT | |
| ReorderLilMGenius/paperthin | 1.1k | — | ~606 | Automated safety check: Pass | MIT | |
| Gameobject ModifyIvanMurzak/Unity-MCP | 4.4k | — | ~2.3k | Automated safety check: Pass | Apache-2.0 | |
| Object ModifyIvanMurzak/Unity-MCP | 4.4k | — | ~2.3k | Automated safety check: Pass | Apache-2.0 | |
| Assets ModifyIvanMurzak/Unity-MCP | 4.4k | — | ~1.7k | Automated safety check: Pass | Apache-2.0 | |
| Modifying Taxonomic FilterPostHog/posthog | 40k | — | ~2.8k | Automated safety check: Pass | Custom licence |
Similar skills
Gameobject Modify
IvanMurzak/Unity-MCP
Modify GameObject fields and properties in opened Prefab or in a Scene.
Object Modify
IvanMurzak/Unity-MCP
Modify a Unity UnityEngine.Object's serializable fields/properties.
Assets Modify
IvanMurzak/Unity-MCP
Modify an asset file in the project. An agent skill from IvanMurzak/Unity-MCP.
- Official
Modifying Taxonomic Filter
PostHog/posthog
Guides safe changes to the TaxonomicFilter, PostHog's picker for events, actions, properties, cohorts, and more.
Implementing Drag Drop
ancoleman/ai-design-components
Implements drag-and-drop and sortable interfaces with React/TypeScript including kanban boards, sortable lists, file uploads, and reorderable grids.
More from openchamber/openchamber
All 21 skills in this repoTheme System
openchamber/openchamber
A skill your agent uses when creating or modifying OpenChamber UI components, styling, colors, buttons, visual states, themes, or icons.
UI API Decoupling
openchamber/openchamber
A skill your agent uses when creating or modifying OpenChamber shared UI data access, OpenCode SDK calls, RuntimeAPIs, runtime fetch/auth/URLs, authenticated browser assets, bridges/proxies, runtime…
Locale UI Patterns
openchamber/openchamber
A skill your agent uses when creating or modifying OpenChamber UI text, labels, buttons, placeholders, aria labels, empty states, toasts, dialogs, settings copy, navigation labels, or any…
Serve Sim
openchamber/openchamber
A skill your agent uses when working with the OpenChamber iOS Simulator app without opening Xcode - boot/install/launch the Capacitor iOS app, start a browser stream, tap/type/gesture/rotate…
Clack CLI Patterns
openchamber/openchamber
A skill your agent uses when creating or modifying OpenChamber CLI commands, prompts, terminal output, non-TTY behavior, --quiet, or --json behavior.
Openchamber Change Discipline
openchamber/openchamber
A skill your agent uses when implementing, fixing, refactoring, or otherwise modifying OpenChamber source code, dependencies, exports, build configuration, generated assets, package contracts, or…
Questions about Drag To Reorder
What does Drag To Reorder do?
A skill your agent uses when implementing or modifying OpenChamber sortable or drag-to-reorder behavior, especially @dnd-kit, touch/mobile interactions, variable-width items, or wrapping layouts. Drag To Reorder is an agent skill from openchamber/openchamber. Use when implementing or modifying OpenChamber sortable or drag-to-reorder behavior, especially @dnd-kit, touch/mobile interactions, variable-width items, or wrapping layouts.
When should I use Drag To Reorder?
Drag To Reorder fits situations like: modifying OpenChamber sortable; drag-to-reorder behavior; especially @dnd-kit; touch/mobile interactions.
How do I install Drag To Reorder in Claude Code?
Run `npx skills add openchamber/openchamber --skill drag-to-reorder -a claude-code`. Or copy the skill folder (.agents/skills/drag-to-reorder in openchamber/openchamber) into .claude/skills/drag-to-reorder in your project. Claude Code loads it when a task matches its description.
How do I install Drag To Reorder in Codex?
Run `npx skills add openchamber/openchamber --skill drag-to-reorder -a codex`. Or copy the skill folder (.agents/skills/drag-to-reorder in openchamber/openchamber) into .agents/skills/drag-to-reorder in your project. Codex loads it when a task matches its description.
Can I use Drag To Reorder 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 openchamber/openchamber --skill drag-to-reorder -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/drag-to-reorder, .gemini/skills/drag-to-reorder, .github/skills/drag-to-reorder and .opencode/skills/drag-to-reorder in your project.
What does Drag To Reorder need to run?
SKILL.md names no scripts, command-line tools or credentials: Drag To Reorder is instructions for the agent only. Compatibility (from SKILL.md): opencode.
Does Drag To Reorder access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Drag To Reorder 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. Review the folder before installing.
What licence does Drag To Reorder use?
Drag To Reorder is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Drag To Reorder use?
About 1.8k tokens (SKILL.md is roughly 7.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Drag To Reorder?
Skills that share tags, products or a category with Drag To Reorder: Reorder (LilMGenius/paperthin, 1.1k stars), Gameobject Modify (IvanMurzak/Unity-MCP, 4.4k stars), Object Modify (IvanMurzak/Unity-MCP, 4.4k stars) and Assets Modify (IvanMurzak/Unity-MCP, 4.4k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Drag To Reorder?
openchamber (a GitHub organization) maintains it in openchamber/openchamber, which has 11,418 GitHub stars. The repository holds 21 skills in this directory. The repository was last updated on October 11, 2026.
Source: openchamber/openchamber on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.