arrange

Overview

What is the Arrange Skill?

Arrange is a UI design skill focused on improving layout, spacing, and visual rhythm in digital interfaces. It helps you identify and fix issues like monotonous grids, inconsistent spacing, weak visual hierarchy, and crowded or poorly aligned elements. Arrange is ideal for designers and developers who want to create more intentional, visually appealing, and user-friendly layouts.

Who Should Use Arrange?

• UI/UX designers seeking to refine visual hierarchy and layout structure.
• Frontend developers aiming to resolve spacing, alignment, or composition issues.
• Teams working on web or app interfaces that feel crowded, flat, or visually confusing.

Problems Arrange Solves

• Monotonous or repetitive grid layouts
• Arbitrary or inconsistent spacing and padding
• Weak or unclear visual hierarchy
• Crowded user interfaces
• Alignment and grouping problems

How to Use

Installation Steps

1. Install the arrange skill using the following command:

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

2. After installation, start by reviewing the SKILL.md file for a detailed workflow and guidance.

Getting Started

• Begin with the MANDATORY PREPARATION section in SKILL.md. This involves invoking /frontend-design to gather essential design context and principles. If no design context exists, run /teach-impeccable first.
• Assess your current layout by analyzing spacing, visual hierarchy, and grid structure. Use the provided checklists to identify weaknesses.
• Plan and implement layout improvements systematically, focusing on grouping, rhythm, and clear structure.

Key Files to Review

• SKILL.md: Main workflow and assessment guide
• README.md, AGENTS.md, metadata.json: Additional context and references if available
• Any rules/, resources/, or scripts/ folders for supporting materials

Best Practices

• Adapt the arrange workflow to your specific project and design tools.
• Use arrange when users or stakeholders mention layout issues, crowded interfaces, or unclear composition.
• Combine arrange with other design skills for comprehensive UI improvements.

FAQ

When should I use the arrange skill?

Use arrange whenever you encounter UI layouts that feel off, crowded, monotonous, or lack clear visual hierarchy. It's especially helpful during design reviews or before launching new features.

What preparation is required before using arrange?

You must run /frontend-design to gather design context and principles. If your project lacks design context, run /teach-impeccable first as outlined in the MANDATORY PREPARATION section of SKILL.md.

Can arrange be used with any design system or framework?

Yes, arrange provides principles and workflows that can be adapted to any design system, frontend framework, or custom UI project.

Where can I find more details or examples?

Open the Files tab in the repository to explore the full file tree, including SKILL.md and any supporting scripts or references for deeper guidance.