What is CSS Noop Checker?
CSS Noop Checker finds CSS declarations that are valid but silently ignored because of layout context, such as width on an inline span or gap on a non-flex container. It runs as a Chrome DevTools extension, and an MCP server exposes the rules for AI-assisted analysis.
Put width on an inline <span> and the browser accepts it and ignores it. CSS Noop Checker finds exactly these declarations: valid CSS that has no visible effect on the element it is applied to.
It is primarily a Chrome DevTools extension with a CSS Noop sidebar pane in the Elements tab. A separate mcp-server/ directory exposes the rules engine as MCP tools, using Playwright to open pages and read computed styles.
How detection works
- Analysis uses
getComputedStyleand lightweight heuristics, with no external network calls. - Rules are pure functions with no Chrome API dependency, so they can be unit tested.
- Real-browser integration tests with Playwright are the main safeguard against false positives and false negatives.
- Rule IDs follow Stylelint's
thing-no-qualifiernaming, for examplecontainer-no-gap.
Examples of what it catches
inline-no-dimensions: width or height on an inline element.container-no-gap: gap on a container that is not flex or grid.static-no-z-index: z-index on a static element that is not a flex or grid item.transform-no-origin: transform-origin set without a transform.
Who it is for
Best for
- Front end developers debugging a style that seems to do nothing, in the Elements tab or across a whole page scan.
- Agents that review markup after a pass from an improve UI skill or a polish skill, where leftover dead declarations pile up.
- Teams cleaning CSS who want each warning to include a title, an explanation and a fix suggestion.
Not for
- Anyone who needs a verdict across browsers. The README says rule correctness follows current Chromium behavior, and some cases are browser dependent.
- Teams that want a one-command MCP install. The extension builds from source, and the MCP setup lives in a separate README inside the repo.
Use it with UiChemy
CSS Noop Checker inspects whatever page is open in Chrome. When UiChemy Composer or AI to WordPress has produced an Elementor or Gutenberg page with real HTML and CSS, open it in DevTools and scan for dead declarations. Click Get Started on uichemy.com.
Connect CSS Noop Checker: Find CSS Declarations That Do Nothing to your AI client
pnpm install
pnpm buildBuild the extension
Clone the repository, then run
pnpm installandpnpm build. Usepnpm devfor watch-mode rebuilds while developing.Load it in Chrome
Open
chrome://extensions, enable Developer mode, click Load unpacked and select thedist/directory.Open the sidebar pane
Open DevTools on any page, go to the Elements tab and open the CSS Noop sidebar pane. Inspect the selected element, or run a full-page scan.
Set up the MCP server
The
mcp-server/directory holds the MCP server, which uses Playwright to open pages, extract computed styles and run all detection rules. Followmcp-server/README.mdfor the exact setup, since the main README defers to it.
Endpoints and ports
https://github.com/purupurupu/css-noop-checker/blob/main/mcp-server/README.mdSetup instructions for the MCP serverWhat you can do with it
- Selected-element modeInspects the element currently selected in DevTools and flags properties that have no effect on it.
- Full-page scanScans all visible elements on a page for violations in one pass.
- Rules grouped by contextCategories include inline, block, container, item, static, positioned, table, overflow, scroll, transform, animation and more.
- Actionable warningsEach warning includes a title, an explanation and a fix suggestion.
- MCP rules engineThe
mcp-server/directory exposes the rules as tools for AI-assisted analysis through Playwright. - Local analysisRules run on computed styles in the page, with no external network calls.
Tools it exposes
list_rules
Lists the detection rules in the engine. The README names it as the way to browse rules over the MCP server.
Frequently asked questions
What is CSS Noop Checker?
It is a Chrome DevTools extension, with an MCP server alongside, that detects CSS properties which currently have no effect on the selected element. These are not syntax errors. They are valid declarations the browser silently ignores because of the layout context.
How do I install CSS Noop Checker?
Clone the repository, run pnpm install and pnpm build, then open chrome://extensions, enable Developer mode and choose Load unpacked on the dist/ directory. The CSS Noop pane then appears in the Elements tab of DevTools.
What kinds of mistakes does it detect?
Examples include width or height on inline elements, gap on a container that is not flex or grid, z-index on static elements, transform-origin without a transform, and animation properties without an animation name. Rules are grouped by layout context.
Does it have an MCP server?
Yes. The mcp-server/ directory exposes the rules engine as tools for AI-assisted analysis and uses Playwright to open pages and extract computed styles. The main README points to mcp-server/README.md for setup, and says list_rules lists the rules.
Does it only work in Chrome?
The extension is for Chrome DevTools. The README also says rule correctness is based primarily on current Chromium behavior, and that a declaration may be valid, partially effective or browser dependent, so treat results in other engines with care.
Does it send page data over the network?
The README says analysis uses getComputedStyle and lightweight heuristics with no external network calls. The rules are pure functions with no Chrome API dependency, which also makes them straightforward to unit test.
What else can an agent use alongside it?
Pair it with a review skill such as a design critique skill for visual feedback, or with a web design engineering skill when building. This checker only covers dead CSS declarations, not how the page looks.