Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →jpoindexter/layout-and-composition
Reference-grade system for composing any screen — visual hierarchy, Gestalt grouping, alignment, whitespace, scanning patterns, and modern intrinsic CSS layout (Grid/Flexbox/subgrid/container queries/:has) with copy-pasteable recipes.
Passed 18 of 22 test cases with the skill, and 17 of 22 without it.
1 fixed17 passed either way4 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
A test case the skill fixed. Same model, same prompt, with and without the skill.
A SaaS application requires three UI density settings: Compact (for dense data tables), Cozy (standard application screens), and Comfortable (onboarding flows). What typical table row height ranges distinguish Compact mode from Comfortable mode, and how should spacing tokens be defined in CSS?
| Checked | Without skill | With skill |
|---|---|---|
| Compact mode uses row heights around 28-32px while Comfortable uses row heights around 48-56px. | Missed | Passed |
| Define spacing tokens as multiples of a base unit scale. | Passed | Passed |
The instructions your model reads when the skill loads.
Composition is the deliberate arrangement of elements so the eye lands where you want, groups what belongs together, and never has to guess what matters. Hierarchy is the what; layout is the where. This skill is the bible for both. Apply it to any screen — marketing page, dense dashboard, settings form, mobile flow.
The eye does not read a screen top-to-bottom; it ranks elements by salience and jumps to the loudest. You control the ranking with these levers, roughly in order of power:
| Lever | How it raises rank | Watch out for |
|---|---|---|
| Size / scale | Bigger = more important. The strongest, fastest signal. | One hero only. Two "biggest" things = no hero. |
| Weight | Bolder text/heavier shapes advance. | Don't bold everything — bold loses meaning if overused. |
| Color & saturation | Saturated/warm advances; muted/cool recedes. One accent = one action. | Color alone fails for ~8% (colorblind) + low-vision. Pair with shape/text. |
| Contrast | High contrast vs background pulls focus. | Body text needs ≥4.5:1; large/UI ≥3:1 (WCAG AA). |
| Position | Top-left (LTR) reads first; center = focal; corners = utility. | Don't bury the primary action below the fold. |
| Whitespace / isolation | Space around an element isolates it → it reads as important. | The single most underused lever. |
Establish three tiers explicitly. Primary (the one thing — hero, the CTA), secondary (supporting — subhead, secondary buttons), tertiary (metadata, captions, legal). If you can't point at the one primary element, the screen has no hierarchy. A focal point is created by contrast against context: a saturated button on a calm page, a large number on a card of small labels. Isolation beats decoration — give the focal point room before you give it a glow.
Don't stack levers redundantly. Size and weight and color and a box on the same element is shouting — the eye can't rank four equally-loud things. One or two levers per tier is enough: a heading earns rank from size alone; a CTA from color + isolation. Reserve the loudest combination for the single primary element so it has nothing to compete with.
Squint test. Blur your eyes (or drop the design to 10% size). The element that still reads is your primary; if several do, or none does, the hierarchy is flat. This is the fastest hierarchy audit you have — run it on every screen before shipping.
/* Type scale carries 80% of hierarchy. Use a ratio, not arbitrary px. */
:root {
--step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
--step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* body */
--step-1: clamp(1.33rem, 1.2rem + 0.6vw, 1.6rem);
--step-2: clamp(1.77rem, 1.5rem + 1.3vw, 2.4rem);
--step-3: clamp(2.37rem, 1.9rem + 2.3vw, 3.6rem); /* hero */
}
Gestalt is perception of grouping. The brain auto-clusters before it reads. Use it to make structure feel obvious without borders.
| Principle | The eye perceives… | Concrete UI use |
|---|
test cases passed, vs 17 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.