Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy.
NewMaintained
Automatic
◆Frontend / UI pack
Last verified 8/9/2026
What it changes
Passed 0 of 22 test cases with the skill, and 22 of 22 without it.
Without skill100%
With skill0%
0 fixed16 passed either way4 still failing2 broke
Pass-rate lift
-100 pp
Tokens
+89%
Agent turns
0%
Response time
+18%
Model gemini-3.6-flashMeasured 8/9/2026v116 of 22 cases passed with skill
Tokens, turns and time describe resource use, not a dollar price.
What's inside
The instructions your model reads when the skill loads.
SKILL.md117 linessingle file
Assess and improve layout and spacing that feels monotonous, crowded, or structurally weak — turning generic arrangements into intentional, rhythmic compositions.
MANDATORY PREPARATION
Invoke /frontend-design — 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:
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?
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?
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)
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?
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.
Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing.