responsive-sweep

Every page, every width, judged by eye

The checks in verify look at only a width or two, so most breaks at other sizes reach none of them. The responsive-sweep skill closes that gap: a script measures, and the agent judges what it finds and fixes the real breaks. It never commits, pushes or deploys. Below are the steps, then one sweep traced from the build to where each finding lands. The full skill file is on Skills.

The steps

Build
The sweep reads website/.next/, so the build must be of the tree under review. A build already made from this tree in the same session can be reused.
Makes the findings and screenshotsSweep
Run scripts/check-responsive-layout.mjs in the background, with its screenshots and JSON kept in the scratchpad, outside the repo. A page that fails to load is reported first, and the run stops there.
Judge every finding by eye
Open each screenshot, where the measured element is outlined in red, and give it one verdict: defect, by design or instrument error. A finding is a lead until it has been looked at.
Fix at the source
A component class breaking on several routes is the component’s defect: fix it in src/components/ and add a story at the width that broke it. A page’s own class is the page’s. Rebuild, then re-run on the affected routes to prove it.
Record what is by design
Propose an entry in the script’s ACCEPTED list for each one, with its reason, and wait for the owner’s yes. An accepted finding is never reported again.
Report
The routes and widths swept, the findings by kind, each fix and its story, the proposed acceptances, and anything left for the owner. No layout breaks at any width is a valid outcome.

One sweep, end to end

The script takes every static route from scripts/site-routes.mjs and every width step the breakpoint modules declare, starting with src/tokens/breakpoints.ts, so a new page or breakpoint is swept the day it exists. It measures geometry only: content running off the screen, text cut off or spilling out of its box, and controls drawn on top of each other. One break in shared chrome reads as one finding, with every route and width it shows at.

1 · What it readsthe tree under review

2 · The sweepmeasures geometry only

3 · Judged by eyeone verdict per finding

4 · Where it landsin the working tree

Built sitewebsite/.next/

Every static routestaticSiteRoutes() · scripts/site-routes.mjs

Width laddersrc/tokens/breakpoints.ts · website/src/config/breakpoints.ts

Sweep scriptscripts/check-responsive-layout.mjs

Grouped findingsoffscreen · clipped · spill · overlap · truncated

Marked screenshotselement outlined in red, in the scratchpad

Defecta person would see it broken

By designthe code says so beside the rule

Instrument errornothing amiss on screen

Fix at the sourcecomponent + story, or page CSS

Rebuild and re-run--routes on what changed

Proposed acceptanceACCEPTED, after the owner says yes

Script fixinspect(), then re-run

every route, every widtheach one openedwhere it starts

Measured by the script, judged from the screenshot, fixed where it starts.

What each verdict changes

Quieter is not the goal; true is. Nothing is accepted, loosened or dropped to make the sweep pass without the owner’s yes.

What each verdict on a finding leads to
Verdict	What the screenshot shows	What changes	Outcome
Defect	Something a person would see as broken	The component or page CSS, plus a story at that width	Fixed
By design	A deliberate crop, spill or floating layer	A proposed ACCEPTED entry citing the code	Waits for a yes
Instrument error	Nothing amiss and nothing deliberate	The script’s inspect function	Script changed
Needs a design call	A layout that needs a new arrangement at a width	Nothing, until the owner decides	Left for the owner