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.
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.
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 with a strong and a weak model.
With and without the skill
Results with and without the skill, for Sonnet and Haiku |
| with | without | with | without |
|---|
| Faulty snippets reviewed right (15 snippets) |
| Faulty snippets reviewed right (15 snippets) | 15/15 | 12/15 | 15/15 | 13/15 |
|---|
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.
- SonnetStrong model, claude-sonnet-5-5
- 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.
- HaikuWeak model, claude-haiku-5-5
- 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.
Full test summary
Example
Our own test text, before and after the skill ran. Excerpts only.
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; }
<!-- install.html -->
<div class="page">
<div class="layout">
<nav class="sidebar"><a href="/docs">Docs</a> <a href="/docs/install">Install</a></nav>
<article>…
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. Tried in: English.
License
Perpetual, non-exclusive; use and modify for yourself incl. paid work; no resale or republishing. Holder: Georgi Kalchev, aiskills402.com. Full terms.
Versions
Current version 1.0.0, updated 2026-10-08. Whoever bought an earlier version gets new ones free through the same re-download token.
v1.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).
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.