Agent skill · design visual · aiskillstore
arrange
Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy to create intentional compositions.
Why this skill is useful
Provides domain-specific knowledge on layout improvement techniques and systematic design principles that the AI wouldn't reliably generate on its own.
What it needs
About 4k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/arrange