arrange

Assess and improve layout spacing, visual hierarchy, and rhythm to transform generic arrangements into intentional compositions.

- Analyzes current spacing consistency, visual hierarchy, grid structure, and rhythm through systematic assessment including the squint test for identifying primary and secondary content

- Establishes a semantic spacing system using consistent scales (framework tokens, rem-based, or custom) and applies gap for sibling spacing instead of margins

- Recommends layout tools by use case: Flexbox for 1D layouts and components, Grid for 2D page-level structures, with guidance on responsive patterns like repeat(auto-fit, minmax())

- Breaks monotonous card grid patterns by varying sizes, mixing card and non-card content, and using spacing and alignment for natural visual grouping

- Requires the frontend-design skill and its Context Gathering Protocol as prerequisite; includes optical adjustment guidance and a semantic z-index scale for depth management

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

MANDATORY PREPARATION

Invoke /impeccable - 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 /impeccable teach first.

Assess Current Layout

Analyze what's weak about the current spatial design:

- 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?