← ClaudeAtlas

arrangelisted

Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy to create intentional compositions.
aiskillstore/marketplace · ★ 329 · AI & Automation · score 82
Install: claude install-skill aiskillstore/marketplace
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 sp