arrange

Assess and improve layout and spacing that feels monotonous, crowded, or structurally weak — turning generic arrangements into intentional, rhythmic compositions.

MANDATORY PREPARATION

Invoke /frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow the protocol before proceeding — if no design context exists yet, you MUST run /teach-impeccable first.

---

Assess Current Layout

Analyze what's weak about the current spatial design:

1. Spacing:

   • Is spacing consistent or arbitrary? (Random padding/margin values)
   • Is all spacing the same? (Equal padding everywhere = no rhythm)
   • Are related elements grouped tightly, with generous space between groups?

2. Visual hierarchy:

   • Apply the squint test: blur your (metaphorical) eyes — can you still identify the most important element, second most important, and clear groupings?
   • Is hierarchy achieved effectively? (Space and weight alone can be enough — but is the current approach working?)
   • Does whitespace guide the eye to what matters?

3. Grid & structure:

   • Is there a clear underlying structure, or does the layout feel random?
   • Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly)
   • Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule)

4. Rhythm & variety:

   • Does the layout have visual rhythm? (Alternating tight/generous spacing)
   • Is every section structured the same way? (Monotonous repetition)
   • Are there intentional moments of surprise or emphasis?

5. Density:

   • Is the layout too cramped? (Not enough breathing room)
   • Is the layout too sparse? (Excessive whitespace without purpose)
   • Does density match the content type? (Data-dense UIs need tighter spacing; marketing pages need more air)

CRITICAL: Layout problems are often the root cause of interfaces feeling "off" even when colors and fonts are fine. Space is a design material — use it with intention.