CSS Noop Checker
Chrome DevTools extension that detects CSS properties with no effect
What is CSS Noop Checker?
CSS Noop Checker is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to chrome devtools extension that detects css properties with no effect
Chrome DevTools extension that detects CSS properties with no effect
This server falls under the Developer Tools category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- Chrome DevTools extension that detects CSS properties with n
Use Cases
Maintainer
Works with
Installation
Manual Installation
npx css-noop-checkerConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use CSS Noop Checker
CSS Noop Checker is a Chrome DevTools extension and companion MCP server that automatically detects CSS properties that have no visual effect — such as applying 'text-align: center' to a block element's inline children, or setting 'overflow: hidden' on a flex item. It ships with 40+ detection rules, provides per-element and full-page scanning modes, and pairs with a Playwright-based MCP server so AI assistants can analyze pages programmatically. Frontend developers use it to eliminate dead CSS code, reduce stylesheet bloat, and catch common CSS authoring mistakes during development.
Prerequisites
- Google Chrome browser (for the DevTools extension)
- Node.js 18+ and pnpm (for building the extension and MCP server from source)
- Playwright installed if using the MCP server mode for AI-driven analysis
- An MCP-compatible client such as Claude Desktop (for MCP server usage)
Clone the repository and install dependencies
Clone the css-noop-checker repository and install all dependencies using pnpm.
git clone https://github.com/purupurupu/css-noop-checker.git
cd css-noop-checker
pnpm installBuild the extension
Build the Chrome extension. The compiled output is placed in the dist/ directory.
pnpm buildLoad the extension in Chrome
Open Chrome and navigate to chrome://extensions. Enable 'Developer mode' (top-right toggle), click 'Load unpacked', and select the dist/ directory from the cloned repository.
Set up the MCP server for AI integration
Navigate to the mcp-server subdirectory and follow its README to install dependencies and configure the Playwright-based MCP server for use with Claude Desktop.
cd mcp-server
pnpm install
pnpm buildConfigure your MCP client
Add the css-noop-checker MCP server to claude_desktop_config.json to enable AI-driven CSS analysis via Playwright.
{
"mcpServers": {
"css-noop-checker": {
"command": "node",
"args": ["/path/to/css-noop-checker/mcp-server/dist/index.js"]
}
}
}Use the DevTools extension on any webpage
Open Chrome DevTools on any page (F12), go to the Elements panel, and select an element. Look for the CSS Noop sidebar panel — it displays any detected no-op CSS violations for the selected element, with explanations and fix suggestions.
CSS Noop Checker Examples
Client configuration
Claude Desktop configuration for the CSS Noop Checker MCP server using the built Node.js server from the mcp-server directory.
{
"mcpServers": {
"css-noop-checker": {
"command": "node",
"args": ["/Users/me/projects/css-noop-checker/mcp-server/dist/index.js"]
}
}
}Prompts to try
Queries for analyzing pages via the MCP server and Playwright integration or discussing results from the DevTools extension.
- "Analyze https://example.com for CSS properties that have no visual effect"
- "Scan the full page for no-op CSS violations and group them by rule type"
- "Which elements on this page have ineffective 'display' or 'overflow' properties?"
- "Explain why 'text-align: center' on this element has no effect and how to fix it"
- "List all 40+ detection rules this tool checks for"Troubleshooting CSS Noop Checker
Extension not visible in Chrome DevTools after loading
After loading the unpacked extension, close and fully reopen DevTools (F12 → close → F12). The CSS Noop panel appears in the Elements tab sidebar. If still missing, check chrome://extensions for any errors in the extension's background service worker.
pnpm build fails with TypeScript errors
Ensure you're using the exact Node.js and TypeScript versions specified in the project (TypeScript 5.9+ required). Run 'pnpm install' before 'pnpm build' to ensure all devDependencies including Oxlint are installed.
MCP server fails to open pages via Playwright
Playwright requires browser binaries. Run 'npx playwright install chromium' inside the mcp-server directory to download the required browser. Also ensure the mcp-server has been built ('pnpm build') before attempting to run it.
Frequently Asked Questions about CSS Noop Checker
What is CSS Noop Checker?
CSS Noop Checker is a Model Context Protocol (MCP) server that chrome devtools extension that detects css properties with no effect It connects AI assistants to external tools and data sources through a standardized interface.
How do I install CSS Noop Checker?
Follow the installation instructions on the CSS Noop Checker GitHub repository. Clone the repo, install dependencies, and add the server config to your AI client.
Which AI clients work with CSS Noop Checker?
CSS Noop Checker works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is CSS Noop Checker free to use?
Yes, CSS Noop Checker is open source and available under the MIT license. You can use it freely in both personal and commercial projects.
CSS Noop Checker Alternatives — Similar Developer Tools Servers
Looking for alternatives to CSS Noop Checker? Here are other popular developer tools servers you can use with Claude, Cursor, and VS Code.
Ecc
★ 188.2kThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
Javaguide
★ 155.8kJava 面试 & 后端通用面试指南，覆盖计算机基础、数据库、分布式、高并发、系统设计与 AI 应用开发
Gemini CLI
★ 104.5kA secure MCP server that wraps the Google Gemini CLI, allowing clients to query Gemini models using local OAuth sessions without requiring an API key. It provides tools for model interaction and diagnostics with built-in protection against command in
Awesome MCP Servers
★ 87.3k⭐ Curated list of Model Context Protocol (MCP) servers - tools that extend Claude Desktop, Cursor, Windsurf, and other MCP clients with custom capabilities.
MCP Servers
★ 86.0kModel Context Protocol Servers
CC Switch
★ 77.5kA cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Gemini CLI & Hermes Agent. Only official website: ccswitch.io
Browse More Developer Tools MCP Servers
Explore all developer tools servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.
Set Up CSS Noop Checker in Your Editor
Choose your AI client for step-by-step setup instructions.
Quick Config Preview
Add this to your claude_desktop_config.json or .cursor/mcp.json
Ready to use CSS Noop Checker?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.