arrange

Assess and apply spacing scales and alignment patterns to UI layouts.

Updated Nov 15, 2025

Search Tags:#layout #alignment #spacing #grid #arrange #visual rhythm

Ready to run

npx skills add https://github.com/billh93/snchz --skill arrange-billh93

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: arrange
Source: https://github.com/billh93/snchz/tree/main/.agents/skills/arrange
Command: npx skills add https://github.com/billh93/snchz --skill arrange-billh93

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Aligning and spacing UI elements to create intentional visual rhythm; fixes generic grids, inconsistent gaps, and weak hierarchy when users report layouts feeling off, crowded interfaces, or misaligned components.

Core Features & Use Cases

Assess spacing, grid structure, and typographic rhythm to identify inconsistencies.
Propose and apply spacing scales, hierarchy rules, and alignment patterns in wireframes or code.
Use Case: improve dashboards, product pages, or onboarding screens where composition matters.

Quick Start

Assess the current layout and propose a systematic spacing plan to improve visual rhythm.

Frequently Asked Questions about arrange

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I fix inconsistent spacing and weak alignment in my UI layout?▼

To fix inconsistent spacing and weak alignment in your UI layout, assess the current grid structure and apply a systematic spacing scale with clear hierarchy rules. This creates intentional visual rhythm and resolves crowded, misaligned components.

What is visual rhythm in dashboard design and when do I need a spacing system?▼

Visual rhythm in dashboard design is the intentional pacing of spacing and alignment to establish clear hierarchy. You need a spacing system when interfaces feel off, components appear crowded, or typographic rhythm becomes inconsistent across product pages.

How do I apply a spacing scale and hierarchy rules to improve a product page layout?▼

To apply a spacing scale and hierarchy rules to improve a product page layout, first assess the current composition for inconsistencies. Then propose a defined spacing system and alignment patterns to apply directly within your wireframes or code.

When should I use Flexbox vs Grid layouts for UI alignment?▼

You should choose between Flexbox or Grid layouts for UI alignment based on your specific hierarchy strategy and spacing system. The layout method requires guidance to determine when to apply Flexbox or Grid to achieve the intended visual rhythm.

Can I use this layout spacing approach for marketing sites and onboarding screens?▼

Yes, you can use this layout spacing approach for marketing sites and onboarding screens. The technique improves composition and visual rhythm across dashboards, product pages, and app UIs wherever alignment feels weak or grids appear generic.