css-noop-checker

Name: css-noop-checker
Rating: 2.2 (25 reviews)
Author: purupurupu

by purupurupu·★ 25·Score 44

Chrome DevTools extension with MCP server for detecting CSS properties with no effect on elements.

developer-toolsai-llmbrowser-automation

Forks

Open issues

2 mo ago

Last commit

2d ago

Indexed

Overview

CSS Noop Checker is both a Chrome DevTools extension and an MCP server that identifies CSS properties which have no visible effect on elements they're applied to. It provides detailed detection rules categorized by context (inline, block, container, etc.) and offers actionable warnings with explanations and fix suggestions. The MCP server implementation allows for AI-assisted analysis through Playwright.

Try asking AI

After installing, here are 5 things you can ask your AI assistant:

you:AI assistants helping developers identify and fix ineffective CSS code

you:Automated code review tools detecting CSS anti-patterns

you:Educational tools for learning which CSS properties work in which contexts

you:What does CSS Noop Checker detect?

you:How does the MCP server functionality work?

When to choose this

Choose this server when you need AI assistance to detect CSS properties that have no effect on elements, particularly when analyzing web pages or CSS code for optimization opportunities.

When NOT to choose this

Don't choose this if you need CSS validation against the official specifications rather than browser behavior, or if you're working with non-Chromium browsers.

Tools this server exposes

3 tools extracted from the README

list_rules
List all available CSS noop detection rules
check_element
Check selected element for CSS properties with no effect
scan_page
Scan entire page for elements with ineffective CSS properties

Comparable tools

stylelint-mcpcsslintwebhint-mcpaxe-mcp

Installation

Install the Chrome Extension:

Open chrome://extensions and enable Developer mode
Click **Load unpacked** and select the dist/ directory
Open DevTools on any page → **Elements** tab → **CSS Noop** sidebar pane

Install the MCP server:

{
  "mcpServers": {
    "css-noop-checker": {
      "command": "npx",
      "args": ["css-noop-checker"]
    }
  }
}

FAQ

What does CSS Noop Checker detect?: It detects CSS properties that have no visible effect on elements they're applied to due to layout context, such as 'width' on an inline <span> or 'gap' on a non-flex/grid container.
How does the MCP server functionality work?: The MCP server exposes the CSS detection rules as tools that can be used by AI assistants for analyzing CSS code and providing suggestions through Playwright automation.

Compare css-noop-checker with

css-noop-checker vs ultimate_mcp_server css-noop-checker vs mcp-server-chart css-noop-checker vs everything css-noop-checker vs filesystem css-noop-checker vs time

GitHub →

Last updated 2026-05-17 · Auto-generated from public README + GitHub signals.