skills.rest
labohemez
labohemezCOMMUNITY
Explore all skills by this author →
GitHub

arrange

Detect spacing, grid, hierarchy problems in web layouts and implement rhythm-based fixes using flex/grid tools.

Updated Aug 23, 2026
Search Tags:#layout#ui design#design-system#spacing#grid#arrange#visual rhythm
One-click install
npx skills add https://github.com/labohemez/kangnam-church-reservation --skill arrange-labohemez
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: arrange
Source: https://github.com/labohemez/kangnam-church-reservation/tree/main/.claude/skills/arrange
Command: npx skills add https://github.com/labohemez/kangnam-church-reservation --skill arrange-labohemez

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Improve layout spacing and visual rhythm by turning monotonous grids into intentional compositions and addressing crowded designs.

Core Features & Use Cases

  • Assess current layout for spacing, hierarchy, grid structure, density, and rhythm.
  • Plan and apply a consistent spacing system and layout approach (flex vs grid) to improve composition.
  • Use cases include dashboards, forms, cards, and content-heavy pages seeking clearer visual hierarchy.

Quick Start

Assess the current layout and generate an intentional, rhythmic arrangement with improved spacing and hierarchy.

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 visual hierarchy in a dashboard layout?▼

Assess the current layout for spacing, grid structure, and rhythm problems, then apply a consistent spacing scale and layout approach using flexbox or grid to establish intentional visual rhythm.

What is layout rhythm and how does it affect UI design?▼

Layout rhythm in UI design is the intentional arrangement of spacing and grid structure to create visual clarity. It transforms monotonous grids into purposeful compositions, guiding user focus through clear hierarchy.

How do I apply a consistent spacing system to web forms and cards?▼

Apply a consistent spacing system by first evaluating current forms and cards for density and spacing issues, then mapping elements to a defined spacing scale to enhance composition and visual hierarchy.

Do I need a defined spacing scale to improve visual rhythm in my UI?▼

Yes, a defined spacing scale is required. Improving visual rhythm involves detecting spacing and hierarchy problems, which necessitates predefined rhythm rules and a spacing scale to implement and verify layout changes.

What is the best way to turn a monotonous grid into an intentional composition?▼

Turn a monotonous grid into an intentional composition by evaluating current density and hierarchy, then applying targeted rhythm rules and a consistent spacing system to create clearer, more deliberate visual structures.

Can I use this approach for both 1D and 2D layouts in content-heavy pages?▼

Yes, this approach applies to both 1D and 2D layouts. It detects spacing, grid, and hierarchy problems across web pages, dashboards, forms, and components to improve visual rhythm in content-heavy designs.

Related Skills

Explore More Design & Creative Skills→
stefanbooveanu-debugstefanbooveanu-debug
1

layout

Assess and resolve UI layout issues in spacing, hierarchy, and grid structure.

Community
Intermediate
PatkikPatkik

i-arrange

Analyze UI spacing, hierarchy, and grid structure to create rhythmic layouts.

Community
Advanced
cshyangcshyang

arrange

Apply consistent spacing scales and grid rhythm to UI layouts.

Community
Advanced
gerald-icagerald-ica

arrange

Provides UI layout suggestions that improve spacing and rhythm for given designs.

Community
Intermediate