Maintainer of this skill?
by ngocanhnckh
Lint the rendered UI: catches overflowing text, low contrast, overlaps, broken responsive layouts, emoji icons and more in any web framework. Built for AI coding agents.
# Add to your Claude Code skills
git clone https://github.com/ngocanhnckh/renderlintGuides for using ai agents skills like renderlint.
See how renderlint compares with popular alternatives.
renderlint is an open-source ai agents skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by ngocanhnckh. Lint the rendered UI: catches overflowing text, low contrast, overlaps, broken responsive layouts, emoji icons and more in any web framework. Built for AI coding agents. It has 50 GitHub stars.
renderlint's catalog security scan is still queued. You can run an instant dependency and prompt-injection check now with the "Scan for vulnerabilities" button above.
Clone the repository with "git clone https://github.com/ngocanhnckh/renderlint" and add it to your Claude Code skills directory (see the Installation section above).
renderlint is primarily written in JavaScript. It is open-source under ngocanhnckh on GitHub, so you can review or fork the full source.
Yes. SkillsLLM lists many other AI Agents skills you can browse and compare side by side. Open the AI Agents category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh renderlint against similar tools.
No comments yet. Be the first to share your thoughts!
Available after the catalog security scan passes.
⚠️ Third-Party Software Notice
This skill is third-party open-source software developed and hosted independently on GitHub. SkillsLLM is an informational directory and does not control or maintain the underlying repository.
Any security checks, ratings, or warnings displayed by SkillsLLM are automated and limited in scope. They do not constitute a security certification or guarantee that the software is safe, error-free, or free from malicious code, vulnerabilities, compromised dependencies, or prompt-injection risks.
Review the source code, permissions, dependencies, and configuration before installing or running any third-party skill. Use is at your own risk. To the maximum extent permitted by applicable law, SkillsLLM is not liable for losses arising from third-party software.
The deep catalog scan for this skill is still queued. Run an instant dependency check now instead.
Text spilling out of cards, gray-on-gray captions, chart labels on top of each other, a layout that only breaks at 1024px, a dropdown arrow jammed against the border, $undefined in a KPI tile, emoji where icons should be. TypeScript and ESLint can't see any of this, because the code is fine. It's the pixels that are wrong.
renderlint renders every page at phone, tablet and desktop widths (and dark mode), sweeps the widths in between, and re-checks with longer text, bigger numbers and longer API data. Each defect is reported with the element, the source file, an annotated screenshot and a concrete fix, in plain text an agent can act on.
Paste this into your coding agent (Claude Code, Cursor, Codex, Copilot, Gemini CLI, Windsurf, Aider, Zed, Amp…):
Set up renderlint in this project: run
npx -y @ngocanhnckh/renderlint init, then follow the "UI quality gate: renderlint" section it adds to AGENTS.md: after every UI change runnpx renderlintand fix every reported error until it shows 0 errors.
Or run it yourself:
npx -y @ngocanhnckh/renderlint init # one-time setup: installs it, adds config, build gate, agent instructions, Claude Code hook
npx renderlint # check: exits 1 if any error is found
Or just install it: npm i -D @ngocanhnckh/renderlint. The command is renderlint either way. To try it once without installing: npx -y @ngocanhnckh/renderlint http://localhost:3000.
Not sure what your app needs (a login, roles, server rendering, hundreds of pages)? Getting started picks the setup for your situation, and there's a page for each framework.
✖ contrast (3) Text does not have enough contrast with what is actually behind it …
error Low text contrast: 2.66:1, needs 4.5:1 — #ffffff on a non-uniform background (≈#459bf4).
at #top > section.hero > div.hero-copy > a.pill > b "New"
in Hero — src/components/Hero.tsx:42
page / · all viewports · see .renderlint/screens/index@375.png #3
fix use text #2e2e2e (currently #ffffff on #459bf4)
✖ text-clipped (1) Text is partially cut off by an `overflow: hidden` container …
error Text is cut off by an overflow:hidden container (12px past the right edge).
at div.kpis > div.kpi:nth-of-type(1) > div.v "$4,939.27"
page /usage · at 1024px · see .renderlint/screens/usage@1024.png #1
✖ 4 error(s), 2 warning(s) · screenshots in .renderlint/screens
37 rules, tuned so that a finding is almost always a real defect.
| What you see | renderlint rule |
|---|---|
| Longer text pokes out of a card, button or badge, or runs right up to its border | text-overflow, text-clipped, text-crowding |
| A layout that fits today's sample copy but breaks with real data | fragile-layout |
| Gray-on-gray or white-on-yellow text you can barely read | contrast (measured from real pixels, so it works on gradients and images) |
| Elements overlap when the window shrinks, instead of wrapping | element-overlap, viewport-overflow, content-overflow |
| Chart and diagram labels collide or get cut off | text-overlap, text-clipped (works on SVG charts) |
| A fixed header covers the hero, or a decoration covers a button | obscured-content |
| 🚀✨✅ emoji instead of a proper icon set | emoji (rendered DOM and source files) |
undefined, NaN, [object Object], Invalid Date, lorem ipsum |
placeholder-text |
| Broken or stretched images, giant unsized SVG icons | broken-image, image-distortion, oversized-icon |
| A dropdown arrow on the border, a checkbox floating above its label, an icon over the placeholder, a squashed input | dropdown-arrow, checkbox-layout, input-icon-overlap, squashed-control |
| An input and its button at different heights, an icon sitting higher than its text | control-height-mismatch, icon-misaligned |
| Scroll-reveal sections that never appear on phones | invisible-content |
No viewport meta, a pointless 3px scrollbar, href="#" links |
missing-viewport-meta, accidental-scrollbar, dead-link |
| No focus ring, icon buttons with no label, tiny tap targets and text | focus-indicator, unlabeled-control, tap-target, font-size-min |
| Hydration errors, crashes, 404s, pages that only showed the login form or "Access denied" | page-error, console-error, broken-resource, auth-required, page-not-shown |
All rules, their defaults and fix guidance: docs/rules.md. npx renderlint explain <rule> prints the same in the terminal.
Most layout bugs show up with content nobody had on screen during development. renderlint generates those cases instead of waiting for production to find them:
| Check | What renderlint does |
|---|---|
| Width sweep | Re-runs the layout rules at 13 widths from 320 to 1920px and on both sides of every breakpoint the page uses, so a grid that only breaks at 1024px, or right above its max-width: 900px breakpoint, is caught (@1024px in the report, with its own screenshot). |
| Longer text | Lengthens every text by 50%. |
| Long words | Turns emails, URLs, domains and IDs into 36+ character strings with no break points. |
| Big numbers | Gives KPIs, prices and counters three more digits. |
| Longer API data | If the page fetched JSON, reloads it with longer names, titles and emails in every response. |
| Declared worst cases | data-renderlint-maxlength="60" or data-renderlint-sample="…" on an element tests exactly that content, and failures are errors. |
| States and mocks | states opens menus and dialogs, fills forms, or serves empty and failing API responses before checking. |
[!TIP] When a field has a known limit, declare it:
<h3 data-renderlint-maxlength="60">{project.name}</h3>. The attribute does nothing in production. See docs/configuration.md forstatesandmock.
renderlint doesn't replace your other tools. It covers the gap between "the code is valid" and "the page looks right".
| Reads | Catches overflow, overlap, clipping | Contrast over gradients and images | Needs a baseline | Tells you the fix | |
|---|---|---|---|---|---|
| ESLint, stylelint, TypeScript | Source code | No | No | No | Yes, for code issues |
| axe-core, Lighthouse | DOM and computed CSS | No | Reported as "needs review" | No | Yes, for a11y rules |
| Visual regression (Percy, Chromatic, BackstopJS, Playwright screenshots) | Pixels, against approved images | Only as a diff from the baseline | Only as a diff | Yes: a defect in the first version becomes the baseline | No: shows what changed, not what's wrong |
| renderlint | Rendered geometry and pixels | Yes, at every width and with stressed content | Yes, from the real pixels behind each glyph | No | Yes: element, source file, screenshot and fix |
Visual regression testing is still the right tool for catching unintended changes to a design you've approved. renderlint catches defects in a page nobody has approved yet, which is what an agent produces every time.
We ran 22 headless Claude Code sessions (Opus and Haiku), each building a typical frontend: landing pages, dashboards, a kanban board, a weather app, an SVG org chart and analytics charts, in HTML, React, Next.js,