arrange
Installation
Summary
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
gapfor 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
SKILL.md
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?
Explore more of GLSRM