arrange

概览

什么是 arrange？

arrange 是一项专注于提升布局、间距和视觉节奏的 UI 设计技能。它非常适合希望解决项目中单调网格、不一致间距和视觉层次薄弱问题的前端团队和设计师。如果你的界面显得拥挤、缺乏清晰对齐或需要更强的构图，arrange 提供了实用的指导来评估和改进这些方面。

谁应该使用 arrange？

• 希望优化视觉层次和节奏的 UI 设计师
• 使用 React 或类似框架的前端开发者
• 旨在解决用户关于布局和间距反馈的团队

arrange 解决的问题

• 单调或重复的网格布局
• 元素间任意或不一致的间距
• 视觉层次薄弱且分组不明确
• 拥挤或对齐不良的 UI 组件

使用方法

安装步骤

1. 使用以下命令安装 arrange：
   npx skills add https://github.com/pbakaus/impeccable --skill arrange
2. 从 SKILL.md 文件开始，快速了解工作流程。
3. 查看 README.md、AGENTS.md 和 metadata.json 等辅助文件，获取更多背景信息。
4. 探索 rules/、resources/、references/ 或 scripts/ 文件夹，获取额外指导。

工作流程指导

• 遵循强制准备步骤：调用 $frontend-design 以获取设计原则和上下文信息。如果没有设计上下文，先运行 $teach-impeccable。
• 评估当前布局的间距一致性、视觉层次和结构清晰度。
• 根据 arrange 的建议，系统性地规划和实施布局改进。
• 根据项目和工具调整工作流程，避免照搬。

关键文件预览

• SKILL.md（主要工作流程和评估步骤）

常见问题

哪里可以找到更多细节？

请查看文件标签页，浏览完整文件树，包括嵌套引用和辅助脚本。

arrange 适合所有前端项目吗？

arrange 最适合以布局、间距和视觉层次为核心关注点的项目，尤其在 React 和其他现代前端框架中效果显著。

如果我的项目缺乏设计上下文怎么办？

请遵循强制准备协议，先运行 $teach-impeccable，建立基础设计上下文后再使用 arrange。