arrange

用途：针对空间构成问题，评估并改进 React Web UI 的布局、间距系统、分组与视觉节奏。若核心问题是不清晰的优先级或标题权重，应改用 hierarchy，而非本技能。\n\n主要能力：诊断间距是否一致或随意、是否全局等距无节奏、相关元素是否紧密分组；用眯眼测试检查视觉层级；评估网格与结构、节奏与变化、密度是否与内容匹配。给出系统化改进方案：建立一致的间距刻度（框架内置刻度、基于 rem 的 token 或自定义体系），命名使用 --space-xs 至 --space-xl 之类语义 token；用 gap 代替 margin 处理兄弟间距；用 clamp() 实现流式间距；相关元素 8-12px、不同区块 48-96px，形成松紧交替的节奏。布局工具选择上，一维用 Flexbox，二维用 Grid，响应式网格可用 repeat(auto-fit, minmax(280px, 1fr))，复杂页面用命名网格区域。同时提供打破卡片网格单调、强化层级、管理深度与 z-index/阴影刻度、必要的光学微调等建议。\n\n使用方式：先读取 frontend-design 并遵循其 Context Gathering Protocol，复用已有上下文，只追问关键缺口；再按上述维度评估现状，制定间距系统、密度立场、层级策略、布局方式与节奏计划，然后系统化实施。\n\n适用场景：布局结构薄弱、间距随意、分组模糊、视觉节奏单调或过密过疏的 React Web UI。\n\n限制与禁止：不得使用刻度外的任意间距值；不要让所有间距相等；分组间距等于组间距且仅靠间距分隔时不可接受；不要什么都包卡片、卡片嵌套卡片、到处用相同卡片网格；不要全部居中；不要默认套用大数字英雄指标模板；不要用任意 z-index（如 999、9999）；不要为填满宽度而强行拉伸布局。