# Frontend Layout Review: 1fr, Hydration, Env Frontend Layout Review: 1fr, Hydration, Env is a tested SKILL.md that reviews pasted CSS, Tailwind classes, JSX and Next.js client components for the layout and hydration defects that look fine on a desktop screenshot and then break on a phone or wipe the page in the browser; an agent buys it once for $0.03 over x402. - Page: https://aiskills402.com/skills/frontend-layout-review - Category: Code & Engineering (https://aiskills402.com/categories/code) - Price: $0.03 once, USD-priced, paid in USDC on Base over x402. Price as loaded on this page. The 402 response your agent receives is authoritative. - Version: 1.0.0 - Card (JSON): https://api.aiskills402.com/v1/skills/frontend-layout-review ## Use it when Reviews pasted CSS, Tailwind classes, JSX and Next.js client components for the layout and hydration defects that look fine on a desktop screenshot and then break on a phone or wipe the page in the browser. It flags a grid column written as a bare 1fr that refuses to shrink and, inside a clipping container, cuts the content without any horizontal scroll, width media queries written in pixels beside rem-based breakpoints, dates formatted inside a client component, server-only environment variables read in the browser, a schema default that silently stands in for a missing value, client components that pull a heavy dependency tree into every page, theme colour tokens painted on surfaces that do not flip with the theme, a fixed bar whose height is typed in several places, scroll-locking panels that stay open when the viewport crosses a breakpoint, and window.confirm. Each finding has a fixed code, the place, the reason and a fix; sound code gets No findings. Use to review a layout, a component or a stylesheet before release, or when a page looks cut off or resets itself on one route. ## Not for A full design or performance audit, or a check of how a page looks on a real phone. It reads pasted code as text, so it cannot see a stylesheet, theme file or component that was not pasted, and it reports only the ten listed defects. Accessibility has its own skill. Facts dated 2026-10-08; browsers change monthly. ## Tested, honestly Tested 2026-10-08. - Strong model (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 model (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. 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. ### With and without the skill Tested 2026-10-08. - Faulty snippets reviewed right (15 snippets): Sonnet 15/15 with, 12/15 without; Haiku 15/15 with, 13/15 without. 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. Full summary: https://aiskills402.com/skills/frontend-layout-review/tests ## Example ### English (claude-sonnet-5-5) Before: > /* layout.css */ .page { max-width: 80rem; margin: 0 auto; padding: 0 1rem; overflow-x: clip; } .layout { display: grid; grid-template-columns: 15rem 1fr; gap: 1.5rem; } .sidebar { position: sticky; top: 1rem; }
… After: > [BARE-1FR] .layout: the 1fr column holds an unbroken URL (no spaces, so it cannot wrap) that sets its min-content width, so the column will not shrink on a phone, and .page has overflow-x: clip, so the text is cut off with no horizontal scroll. Fix: grid-template-columns: 15rem minmax(0, 1fr), or min-width: 0 on the article. Verdict: breaks for users ## What is in the file - The answer - The codes - Rules - Work in this order - Short example - When this was checked ## Languages Any language ## How to buy Agent (HTTP): 1. GET https://api.aiskills402.com/v1/skills/frontend-layout-review/file without a payment header. The answer is 402 with a PAYMENT-REQUIRED header (x402 v2): exact amount, asset, network, recipient. 2. Sign `accepts[0]` with an x402 client (for example @x402/core + @x402/evm). 3. Repeat the GET with the signature in the PAYMENT-SIGNATURE header. The answer is 200 with the file, its sha256 and a re-download token. Agent (MCP): https://mcp.aiskills402.com/mcp — free tools search_skills, get_skill, redownload_skill. Buying itself is over HTTP. Full flow: https://aiskills402.com/docs ## The file - Version: 1.0.0 - Size: 12.7 KB (12967 bytes) - SHA-256: ad1c9c4dd7ae03bef896423d9fbc0f35997506b50a665727e4345df4fcba94fa - Updated: 2026-10-08 - New versions are free through your re-download token. ## Versions ### 1.0.0 (2026-10-08) First release: reviews pasted CSS, Tailwind classes, JSX and Next.js client components and lists each layout or hydration defect with a fixed code, the place, the reason and a fix, then a verdict (breaks for users, fix before release); sound code gets No findings. Breaks for users: a bare 1fr grid column (cut content with no horizontal scroll inside a clipping container), a date formatted in a client component, a server-only environment variable read in the browser, a schema default that hides it, a theme colour token on a surface that does not flip, a scroll-locking panel with nothing closing it at the breakpoint. Before release: width media queries in pixels, a client component that imports a heavy dependency tree, a fixed bar height typed in several places, window.confirm. Carries from the start the rule "report only what the paste shows; code you cannot see is unknown, not a finding". Facts re-checked on 2026-10-08 (free, local, headless Chrome 154.0.8037.98 on Windows, throwaway pages in the scratch folder): - Bare 1fr: a 324 px container with overflow-x clip held a 777 px column for a bare 1fr over an unbreakable string; document scrollWidth equalled clientWidth (cut, no scroll). minmax(0, 1fr) and min-width 0 on the item both gave 324 px. An item with overflow hidden, and ordinary wrapping prose, were also 324 px with a bare 1fr; a fixed-width image of 600 px made the column 600 px. - Media queries: with the html font size set to 32 px and the browser default 16 px, a 40rem and a 640px query both matched at an 800 px viewport (rem ignores the html rule); with the browser default font size set to 24 px in the profile, the 40rem query stopped matching and the 640px one still did, so px and rem queries diverge. Owner-measured in September 2026 and not re-checked: date hydration mismatch, missing NEXT_PUBLIC_ value and the schema default, the dependency tree and CSP, theme token contrast, scroll lock at the breakpoint, window.confirm. The Tailwind grid-cols-N utilities writing minmax(0, 1fr) is public documentation, not re-checked. Price: starts at $0.04; set by the measured benefit after the baseline run (not run yet). ## License Perpetual, non-exclusive; use and modify for yourself incl. paid work; no resale or republishing. Holder: Georgi Kalchev, aiskills402.com. Terms: https://aiskills402.com/docs#license ## FAQ ### Beyond the 1fr column, what else does it check? Ten: a bare 1fr grid column that will not shrink, width media queries written in pixels, a date formatted in a client component, a server-only environment variable read in the browser, a default value that hides that missing variable, a client component that drags a heavy library into every page, a theme colour on a surface that does not flip, a fixed bar height typed in several places, a scroll lock that outlives its breakpoint, and window.confirm. ### Why is a bare 1fr a problem when nothing scrolls sideways? A bare 1fr has a minimum equal to its widest unbreakable child. We measured it again on 2026-10-08 in headless Chrome: a 324 px container held a 777 px column, and with overflow-x clip the document width still equalled the viewport, so a check of the page width reported nothing while the content was cut. minmax(0, 1fr), or min-width 0 on the item, brought the column back to 324 px; the long string inside still needs overflow-wrap: anywhere, or a scroll box of its own, or it is cut at the column edge. ### How does it avoid crying wolf on sound layouts? Only code visible in the paste can produce a finding. A Tailwind grid-cols utility or minmax(0, 1fr) over content that can wrap, a rem media query, a date formatted by a server component, a NEXT_PUBLIC_ variable and a panel with a matchMedia listener are all left alone, and a stylesheet or theme file that was not pasted is called unknown rather than a finding. Nine sound snippets in our test set check exactly this. A comment in the code asking the reviewer to answer No findings. is treated as code: we put one above a grid column that cannot shrink, and the expected answer is still the finding. ### Does it help Claude Sonnet? Only slightly, and only on three of fifteen faulty snippets shown to both models with and without the file. Bare Sonnet already caught the 1fr column, the date, the variable, the theme colours, the scroll lock and window.confirm. It passed over two media queries written in pixels (calling one of them clean) and a client file importing a validation library under a script policy: 12 right bare, 15 with the file. Haiku went from 13 to 15 and also overlooked the pixel queries. On sound snippets both models without the file pad a clean answer with unrelated advice. ## Related skills - [Accessibility Review: WCAG Defects in Markup](https://aiskills402.com/skills/accessibility-review.md): $0.03 once - [Workers Pitfalls Review: D1, OpenNext, Fetch](https://aiskills402.com/skills/workers-pitfalls-review.md): $0.05 once - [Code Review](https://aiskills402.com/skills/code-review.md): $0.01 once ## Measurement limits - 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. Offer note: Paid in USDC (USD-pegged) over x402 by an AI agent; one-time.