arrange

Overview

What is arrange?

The arrange skill is designed to enhance user interface layouts by improving spacing, visual rhythm, and hierarchy. It addresses common UI design issues such as monotonous grids, inconsistent spacing, crowded elements, and weak visual structure. If your interface feels visually off, lacks clear grouping, or suffers from alignment problems, arrange provides a systematic approach to refine your design.

Who should use arrange?

Arrange is ideal for UI designers, frontend developers, and product teams aiming to polish their interface layouts. It is especially useful when users or stakeholders mention layout discomfort, visual hierarchy concerns, or request better composition and spacing.

Problems solved by arrange

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

How to Use

Installation Steps

1. Install arrange with:
   npx skills add https://github.com/pbakaus/impeccable --skill arrange
2. Begin by reviewing the SKILL.md file for workflow guidance and context.

Getting Started

• Assess your current layout for spacing, hierarchy, and structure issues.
• Use the squint test to check if important elements stand out.
• Identify arbitrary padding, monotonous grids, and crowded groups.

Workflow Integration

• Arrange works best when paired with the /frontend-design skill, which provides design principles and context gathering protocols.
• If no design context exists, run /teach-impeccable first to establish baseline design standards.
• Adapt arrange's recommendations to your own repository and UI tools rather than copying verbatim.

Key Files to Review

• SKILL.md: Main workflow and guidance
• Supporting files: Check for any references or scripts in the repository for additional context

FAQ

Is arrange only for designers?

No, arrange is valuable for anyone working on UI layout, including frontend developers and product managers who want to improve visual structure and user experience.

What if my UI already follows a design system?

Arrange can help refine and audit your layout for rhythm and hierarchy, even within established design systems. Use it to spot subtle spacing or grouping issues.

How does arrange differ from frontend code skills?

Arrange focuses on design-first layout improvements, not just code implementation. It helps you create intentional, visually appealing compositions.

Where can I find more details?

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