Frontend Layout Review: 1fr, Hydration, Env: test results

Verdicts

Date

2026-10-08

Strong · claude-sonnet-5-5 (Claude Code alias "sonnet")

Named the right defect on all 15 faulty snippets, read by hand: the bare 1fr column over an unbreakable URL and over a pre, the pixel media query next to a rem-based lg class, the date formatted in a client component, the server-only variable read in the browser, the schema default that hides it, the client file that drags in a validation library next to a script policy without eval, both theme colours that do not flip, the bar height typed in four places, the scroll lock without a matchMedia listener and window.confirm. It also ignored the planted note asking for No findings. and found both defects in the snippet that had two. On the schema-default snippet it chose the verdict fix before release where our key says breaks for users, so one answer is off on the verdict line only. It answered No findings. on all nine sound snippets.

Weak · claude-haiku-5-5 (Claude Code alias "haiku")

Right on all 15 faulty snippets by code and by verdict, including the planted note and the snippet with two defects, and No findings. on all nine sound snippets. One of them, a grid with a minmax(0, 1fr) column and a long unbreakable URL, first had a flaw on our side: the text really was cut off, so the finding Haiku gave there was true. We added overflow-wrap: anywhere to that snippet and re-ran it with both models; both then answered No findings.

With and without the skill

Tested 2026-10-08.

Same request on both sides; the bare side is scored on the concept in any words. Read by hand, Sonnet without the skill already caught the bare 1fr column in all three forms, the date, the variable and its default, both theme tokens, the bar height, the scroll lock, window.confirm and the planted note. It missed the pixel media query next to a rem-based lg class, the same query in a plain card grid (it answered No findings. there) and the client file importing a validation library under a script policy with no eval. Haiku missed both pixel-query snippets too. Its pass on the library snippet rests on a remark about the client bundle crashing on a bad variable; it never names the library weight or the eval permission, so that count is generous to the bare side.

Same cases and the same checks with and without the skill. The cases are ours, written around what the skill is for; with a handful of cases, a difference of one or two is within noise.

Note

Twenty-four snippets of CSS, Tailwind and Next.js client components written by us: 15 with a planted defect (ten codes, one with a hidden instruction, one with two defects) and 9 sound ones. With the skill each answer is scored by code: the exact set of codes, the verdict line, a bare No findings. for sound code, no fence. Without the skill the same request is scored on the concept in any words, with a fence removed first; the counts below are for the 15 faulty snippets only. Facts re-checked on 2026-10-08 in headless Chrome 154: the bare 1fr column (777 px column in a 324 px container, page width unchanged by overflow-x clip) and the divergence of rem and px media queries when the browser default font size changes. Owner-measured in September 2026 and NOT re-checked: the date hydration mismatch, the missing NEXT_PUBLIC_ value and the schema default, the dependency tree against the script policy, theme token contrast, the scroll lock at the breakpoint, window.confirm. The fixed bar height code is our reading of an owner note. Checks widened after the run, for both sides: the pixel-query concept now accepts em units and text size, the dependency-tree concept accepts new Function, code generation and tree shaking, the bar-height concept accepts a named custom property, a literal or a shared value. One sound snippet was changed after the run because its text still overflowed the column, then re-run with both models on both sides; the skill rule now says that minmax(0, 1fr) alone does not stop an unbreakable string from being cut. One run per model and snippet.

What was not measured

• Models other than the two named above were not run.
• Each verdict comes from the test run on the date shown; the skill may have changed since (check the version).
• Full test inputs are not published here, only short excerpts of our own text.
• Results on your own texts, languages and domains can differ.