layout-audit

Layout and spacing audit

Target: $ARGUMENTS (if empty, ask for the URL, and ask whether the whole page or one section is in scope).

Steps

1. Capture the page at both ends of the range. Call inspect_localhost_ui twice with fullPage: true — once viewport: "desktop" (1920×1080) and once viewport: "mobile" (390×844) — with a delay high enough that the page has hydrated. fullPage: true is not optional here: spacing drifts most in the sections nobody scrolls to, and a viewport-only capture will not show them. Add viewport: "tablet" when the desktop and mobile captures disagree about the structure, since the breakpoint between them is where the third layout hides. Check summary.domTruncated; if it is true, scope every finding to the part of the tree you actually read and say which regions you could not reach.

2. Inventory the spacing values actually in use. Read every spacing utility out of simplifiedDOM — p-*, px/py/pt/pr/pb/pl-*, m-*, gap-*, space-x/y-*, plus arbitrary values (p-[13px], mt-[7px]) and inline padding/margin declarations. List the distinct values and their frequency before judging anything. Then flag:

   • Off-scale values. A page using p-4, p-6, p-8 and then one p-[13px] has one element that will always look slightly wrong. Arbitrary one-off values are the clearest signal that spacing was guessed per element rather than chosen from a system.
   • Too many neighbouring steps. gap-3, gap-3.5 and gap-4 in the same region are differences nobody can perceive but everybody has to maintain. Collapse them.
   • Stacked spacing. A parent p-6 wrapping a child mt-6 produces 48px where 24 was intended. Look for margin on the first or last child inside a padded container, and for space-y-* combined with per-child margins.
   • Both margin and gap doing the same job. Pick one — gap on the flex or grid parent — and remove the child margins.