OpenChamber 拖拽排序技能（drag-to-reorder）
一份沉淀自真实项目的 @dnd-kit 拖拽排序实践指南，专门解决变宽条目、换行布局和移动端触摸交互中最容易踩的坑。
该技能为纯技术指导文档，不请求权限、不执行外部操作、无数据流或敏感数据处理，无回滚需求，符合最小权限原则；引用的实现文件路径明确，MIT 许可，来源可归因。未扣到满分是因为发布者身份未经注册库验证，且文档为静态声明、无签名或第三方验证。
五条规则内部一致，含最小接线代码、症状索引和明确失败原因（如 onDragOver 振荡、touch-action 缺失等），失败反馈质量高。但静态审查无法执行复现关键路径，仓库中未见针对该技能路径的专门测试套件或 CI 证据，按静态上限不给超过 10 分。
frontmatter 描述与触发条件明确（实现/修改排序行为、@dnd-kit、触屏、变宽换行布局），适用与不适用范围清晰（如 rectSortingStrategy 不够精确时的替代方案），误触发风险低。但技能深度绑定 OpenChamber 仓库的组件与依赖，通用复用性有限；无中文支持说明；对目标环境可达性无特殊风险（@dnd-kit 为公共 npm 依赖）。
结构良好：概览、使用时机、按重要性排序的规则、症状索引、最小接线、完成标准，采用渐进式披露；MIT 许可明确。未给满分是因为无技能级版本号、变更记录或明确的维护责任与更新路径声明；部分关键断言（如依赖已在 packages/ui/package.）未在所给文件中直接核实。
技能针对真实痛点（变宽 chip 换行拖拽、移动端长按与滚动冲突），提供可直接套用的配置与代码，并诚实披露已知局限（dnd-kit 盒策略的粗糙边缘）及替代方案，边际价值明显高于手动摸索。静态审查无法验证产出可直接使用，按上限不超过 7 分，因代表性输出未经验证再扣 1 分。
引用了仓库内具体参考实现文件（DraftPresetChips.tsx、sortable-tabs-strip.tsx）和具体依赖清单，主张可审计；症状-原因-修复对应关系具体。但静态读取下无执行证据、无第三方佐证，事实与推断未明确区分，按静态上限不给超过 5 分。
- 本评估为静态源码审查，未执行任何代码；规则有效性（尤其是 dnd-kit 各策略的实测行为）未经独立复现。
- 技能深度绑定 OpenChamber 仓库的具体组件（DraftPresetChips.tsx 等）与已安装的 @dnd-kit 依赖，迁移到其他项目时需自行验证依赖与行为。
- 技能文件本身无版本号或变更记录，跨仓库版本演进时内容可能过期，使用前应核对引用文件是否仍然存在且一致。
- 文档提示 rectSortingStrategy 在跨行场景仍有已知粗糙边缘，遇到该场景应优先采用文档建议的替代 UX 方案并与使用者讨论。
- 发布者身份未经 FollowSkills 注册库验证；本评分未因身份扣分，但用户不应据此推断额外的可靠性与安全性保证。
这个 Skill 能做什么，适合哪些场景？
drag-to-reorder 是 OpenChamber 仓库（openchamber/openchamber）内置 18 个技能之一，位于 .agents/skills/drag-to-reorder/SKILL.md。它不是可执行脚本，而是一份纯知识型技能文档，总结 OpenChamber 前端使用 @dnd-kit 实现拖拽排序的五条核心规则：用 CSS.Translate 避免 Canvas.Transform 导致的拉伸、按布局选择排序策略、鼠标与触摸传感器分离、设置 touch-action: none、在 onDragEnd 中用稳定 ID 和 arrayMove 一次性重排。文档还附带症状索引表，可直接按报错定位问题。适用范围限于使用 React 与 @dnd-kit 的项目。
该技能不执行任何命令，只提供配置知识和代码模板：给出 useSortable 的正确接线示例（CSS.Translate + transition）；提供布局与排序策略的对照表（rectSortingStrategy / horizontalListSortingStrategy / verticalListSortingStrategy）；展示 MouseSensor（distance: 8）与 TouchSensor（delay: 200, tolerance: 6）的双传感器配置，实现点按、长按拖拽、滑动滚动三者的区分；提供一个最小可用的 Item 组件代码和 onDragEnd + arrayMove 重排模板；以症状表形式诊断拉伸、跨行重叠、Maximum update depth exceeded、触摸滚动劫持等典型故障。
- 前端开发者在 React 项目中为变宽的标签/芯片（chips）实现可换行多行的拖拽排序，遇到被拖项被拉伸到槽位宽度的问题。
- 移动端网页开发者需要同时支持『点按激活、长按拖拽、滑动滚动』三种手势，正在为 PointerSensor 的激活约束发愁。
- 维护已有 @dnd-kit 排序组件的工程师，遇到拖动时元素重叠或抛出 Maximum update depth exceeded 报错，需要定位原因。
- 实现单行可滚动标签栏的开发者，需要确认应使用 horizontalListSortingStrategy 而非默认策略。
- 团队在评审拖拽排序相关 PR 时，希望按一套已验证的检查清单核对宽度保持、跨行回流和稳定 ID 等完成标准。
这个 Skill 有哪些优点和局限？
- 来自 OpenChamber 真实生产代码，引用了仓库内 DraftPresetChips.tsx 和 sortable-tabs-strip.tsx 两个参考实现，可信度高。
- 覆盖桌面与移动端双端体验，明确解决长按拖拽、点按、滚动冲突这一常见痛点。
- 症状索引表按报错/现象直接映射到规则和修复方法，排查效率高。
- 诚实指出 dnd-kit 对变宽条目跨行排序本身是已知短板，并给出降级方案（放置位置指示线）而不是掩盖问题。
- 强绑定 React 与 @dnd-kit 生态，对 Vue/Svelte 或原生拖拽实现不适用。
- 纯知识文档，无配套脚本或自动化测试，实际效果依赖使用者正确套用。
- 跨行变宽条目的场景仍承认 rectSortingStrategy 不够精细，需要额外的 UX 方案和更多代码。
- 文档基于 OpenChamber 自身项目经验，未提供跨项目、跨规模的验证证据。
如何安装这个 Skill？
该技能属于 OpenChamber 仓库的技能集合，路径为 .agents/skills/drag-to-reorder/，核心文件是 SKILL.md。若你的 Agent Skills 兼容客户端支持加载本地技能文件夹，可将该文件夹复制到客户端的技能目录；仓库 README 未提供单独安装此技能的命令（README 中的 curl 安装脚本安装的是 OpenChamber 应用本身，不是这个技能）。技能内容也可以直接作为参考文档人工阅读使用。
如何使用这个 Skill？
纯知识型技能，通常由模型在接到相关任务时自动引用，也可直接阅读。典型触发方式：在你的代码库中让 Agent『用 @dnd-kit 实现一个可换行的拖拽排序标签列表，需要支持移动端长按拖拽』。使用前提是你的项目已安装 @dnd-kit/core、@dnd-kit/sortable、@dnd-kit/utilities（OpenChamber 中已包含在 packages/ui/package.）。落地时按五条规则核对：Translate 而非 Transform、按布局选策略、双传感器、touch-none、onDragEnd 一次性重排并使用稳定 ID。