Teach Studio Code to pad cards and non-constrained full-width sections

[youknowriad]

Related issues

• None

How AI was used in this PR

Claude Code investigated the cause (scanned 33 locally agent-built sites, checked the WordPress core layout CSS that governs horizontal padding), wrote the skill wording, and ran three DeepSeek V4 Flash builds with the change in place. The wording was reviewed by hand.

Proposed Changes

Studio Code regularly produces sections and cards whose text sits flush against the edge of their own background, border, or the viewport, which makes an otherwise good build feel unfinished. This is not model randomness: WordPress block themes supply horizontal padding in exactly one place (the root gutter on full-width constrained groups) and explicitly zero it on constrained groups nested inside them. Cards, tinted panels, columns with a background, and full-width sections using a default/flex/grid layout get nothing, and block themes never load core's fallback .has-background padding. None of the agent's skills mentioned this. In a scan of 33 agent-built pages on one machine, half of the card-like boxes and a third of the non-constrained full-width sections had no horizontal padding at all.

This PR adds a short "Horizontal Padding" note to the block-content skill, telling the agent which boxes must own their padding and how (class padding in style.css, the root-padding token for non-constrained full-width sections, or a constrained inner group), and adds a matching checklist item plus a recurring-issue entry to the visual-polish skill so the verification pass inspects padding-left/padding-right on those boxes. No prompt, tool, or eval changes; 14 lines of skill text.

Testing Instructions

• Build a one-page site that naturally produces cards and a full-width hero, e.g. "Build a farm one page site, known for its animals visits and its local products. Use elegant colors and design."
• Check that cards/panels with a background or border and any full-width section have visible horizontal padding, on desktop and mobile.
• Existing evals don't cover this (the card eval explicitly asks for padding). Three DeepSeek V4 Flash builds with this change produced padded cards and sections.

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?

🤖 Generated with Claude Code