Renderlint catches overflow and contrast bugs in AI-written pages

Coding agents now write full pages that pass type checks and tests. The pages still look wrong once the browser draws them. Renderlint is a command-line tool that opens the running app in a real browser. It fails the build on overflow, overlap, low contrast or a broken layout. The project is called ngocanhnckh/renderlint. It is written in JavaScript, licensed MIT, and was created on 25 October 2026. It has reached 411 stars on GitHub in the 18 days since.

The tool runs the page in headless Chromium at 13 widths between 320 and 1920 pixels. It checks each width in light and dark mode. The author says it holds 51 rules. The rules cover text that runs past its container. They cover elements that sit on top of each other. They cover text whose colour is too close to the background. They cover emoji used where an icon set would be clearer. They cover layouts that break at a specific width. The project page gives an example: a KPI card whose text fits at 1280 pixels and overflows at 1024.

Version 0.2.0 came out on the repository this month. It added a second pass called --ux. That pass clicks through every button, form and tab the page has. It watches for a loading state when the page makes a network call. It watches for an error message when the call fails. It watches for empty-list text when a list has no items. It also checks that a dialog takes keyboard focus when it opens. It checks that a dropdown stays inside the viewport. The project page says the pass runs on pages behind a login and across user roles.

The author writes that type checks and unit tests cannot find these bugs. The code is correct and the pixels are wrong. The tool is aimed at coding agents like Claude Code and Codex. An agent can run it, read the grouped output, and fix each rule in turn. The repository carries a Claude Code skill for that path.

Where the tool still has edges

Renderlint sees what the browser draws. Pages must be running when the tool is pointed at them. The first-time setup downloads Chromium. That adds disk space to a project that did not have it. The UX pass takes longer than a plain check, because every page is clicked.

The project page lists no users by name. The traction is the star count and nothing else. A team that wants a measured number should run the tool against its own pages first. Reveneau writes React, Vue and Next.js front ends for its customers. A check that catches overflow at one width is the kind of eval an agent must pass before a merge.

Source

ngocanhnckh/renderlint on GitHub.