arrange

Overview

What is arrange?

arrange is a UI design skill focused on elevating the quality of layouts by improving spacing, visual rhythm, and hierarchy. It is designed for anyone who wants to transform monotonous, crowded, or inconsistent user interfaces into intentional, visually appealing compositions. If your UI suffers from weak structure, inconsistent spacing, or unclear visual hierarchy, arrange provides a systematic approach to diagnose and resolve these issues.

Who should use arrange?

• UI/UX designers seeking to refine layout and composition
• Frontend developers aiming to improve the visual clarity of their interfaces
• Teams working on products where layout feels off, crowded, or lacks rhythm

Problems solved by arrange

• Monotonous or repetitive grid layouts
• Inconsistent or arbitrary spacing and padding
• Weak or unclear visual hierarchy
• Crowded interfaces and poor alignment
• Lack of visual rhythm and intentional grouping

How to Use

Installation Steps

1. Install arrange using the following command:

   npx skills add https://github.com/pbakaus/impeccable --skill arrange
   

2. Start by reviewing the SKILL.md file for a full overview of the workflow and requirements.
3. For additional context, check related files such as README.md, AGENTS.md, and metadata.json if available in the repository.

Getting Started

• Mandatory Preparation: Before using arrange, invoke /frontend-design to gather design context and understand relevant principles. If no design context exists, run /teach-impeccable first as instructed in the skill documentation.
• Assessment: Use arrange to analyze your current layout for spacing consistency, visual hierarchy, and structural clarity. The skill guides you through evaluating padding, grouping, and the effectiveness of whitespace and rhythm.
• Improvement: Follow the arrange workflow to systematically address layout weaknesses, improve grouping, and enhance the overall composition of your UI.

Recommended Files to Review

• SKILL.md (primary workflow and guidance)

FAQ

When should I use arrange?

Use arrange when your UI feels crowded, lacks clear hierarchy, or when users mention issues with layout, spacing, or alignment. It is ideal for design reviews and layout audits.

What preparation is required before using arrange?

You must run /frontend-design to gather necessary design context. If this context does not exist, use /teach-impeccable first. This ensures arrange can provide relevant and actionable recommendations.

Can arrange be used for any type of UI?

arrange is best suited for digital interfaces where layout, spacing, and visual hierarchy are critical. It is not limited to any specific framework or platform, but works best when integrated into a broader UI design workflow.

Where can I find more details?

Open the Files tab in the repository to explore the full file tree, including nested references and helper scripts for deeper insights.