14th pre-validation detector + a preventive skill rule. User-reported 2026-05-10 "Bistro" mobile food app shipped with root padding [0,16,0,16] AND a "Today's Specials" section padding [0,24]. Effective gutter = 40px on a 375px page → only 295px of usable content width. Reads as "too much padding" / pinched. Two pieces: 1. layout.md AESTHETIC HYGIENE block now teaches "page gutter goes on ONE layer, not both" — pick root horizontal padding OR per-section horizontal padding, not both. Default convention: root carries the gutter, sections set vertical-only padding. Hero / banner / image-bleed sections then sit edge-to-edge by simply NOT adding horizontal padding (root's gutter shows through). Preventive teaching at prompt time. 2. detectStackedHorizontalPadding (info-only, detect-only). Walks every mobile-shaped root (width 320–480 + tall + multi-child), compares root horizontal padding against each direct child's horizontal padding; flags the section as the offender when both are > 0. Page-shape filter mirrors detectEdgeSectionPadding so the legitimate component-internal padding stacking pattern (chip → badge → icon, etc.) doesn't trip it. Severity is INFO because a section may legitimately want a deeper inset for visual emphasis — let the user/agent decide via audit panel. Side-quest: scripts/ab-corpus/check-stacked-padding.ts ships with this commit so the next stacked-padding-style detector calibration can survey corpus frequency without rebuilding the harness. |
||
|---|---|---|
| .. | ||
| ab-corpus | ||
| bundle-skill.ts | ||
| ensure-agent-native.cjs | ||
| measure-v0-hex-coverage.ts | ||
| patch-srvx-bun.ts | ||
| publish-beta.sh | ||
| smoke-v1-pipeline.ts | ||
| unpublish.sh | ||