Agent skill · design visual · aiskillstore
layout
Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.
Why this skill is useful
Provides detailed guidelines and principles for improving layout and visual hierarchy 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 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: 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/layout