Arrange

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

MANDATORY PREPARATION

Use the frontend-design skill — 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.

Plan Layout Improvements

Consult the spatial design reference from the frontend-design skill for detailed guidance on grids, rhythm, and container queries.

Create a systematic plan:

• Spacing system: Use a consistent scale — whether that's a framework's built-in scale (e.g., Tailwind), rem-based tokens, or a custom system. The specific values matter less than consistency.
• Hierarchy strategy: How will space communicate importance?
• Layout approach: What structure fits the content? Flex for 1D, Grid for 2D, named areas for complex page layouts.
• Rhythm: Where should spacing be tight vs generous?

Improve Layout Systematically

Establish a Spacing System

• Use a consistent spacing scale — framework scales (Tailwind, etc.), rem-based tokens, or a custom scale all work. What matters is that values come from a defined set, not arbitrary numbers.
• Name tokens semantically if using custom properties: --space-xs through --space-xl, not --spacing-8
• Use gap for sibling spacing instead of margins — eliminates margin collapse hacks
• Apply clamp() for fluid spacing that breathes on larger screens

Create Visual Rhythm

• Tight grouping for related elements (8-12px between siblings)
• Generous separation between distinct sections (48-96px)
• Varied spacing within sections — not every row needs the same gap
• Asymmetric compositions — break the predictable centered-content pattern when it makes sense

Choose the Right Layout Tool

• Use Flexbox for 1D layouts: Rows of items, nav bars, button groups, card contents, most component internals. Flex is simpler and more appropriate for the majority of layout tasks.
• Use Grid for 2D layouts: Page-level structure, dashboards, data-dense interfaces, anything where rows AND columns need coordinated control.
• Don't default to Grid when Flexbox with flex-wrap would be simpler and more flexible.
• Use repeat(auto-fit, minmax(280px, 1fr)) for responsive grids without breakpoints.
• Use named grid areas (grid-template-areas) for complex page layouts — redefine at breakpoints.