Stop shipping messy code: I built a zero-dependency frontend auditor (with Claude MCP support)

abdelrhman Ahmed — Sun, 27 Sep 2026 19:42:11 +0000

If you are anything like me, you've probably approved a Pull Request only to realize later that a rogue console.log("here") made it into production. Or maybe you noticed your package.json has 5 libraries that haven't been imported in months.

I got tired of these tiny, frustrating frontend mistakes slipping through the cracks. So, instead of configuring 15 different ESLint plugins, I built a standalone, zero-dependency CLI tool to catch and automatically fix them.

Meet the Frontend Quality Auditor.

🛠️ What does it actually do?

You just point it at your React, Next.js, or HTML project:
npx frontend-quality-auditor audit .

It scans your codebase and generates a markdown report grading your project on:

Dead Code: Unused imports and unused dependencies hiding in package.json.
Code Smells: Leftover debugger statements, console.logs, and hardcoded API keys.
Asset Bloat: Massive images over 500kb, or legacy PNGs that should be modern WebP/AVIFs.
Accessibility & Responsiveness: (If you pass a --url, it lazily loads Playwright to test your app across 8 different device widths, catching horizontal scroll overflows and missing alt tags).

✨ The best part: Auto-Fixing

Finding the issues is only half the battle. I wanted the tool to clean up the mess for me.

If you run:
npx frontend-quality-auditor fix --safe

It will automatically rip out the unused imports, delete the console.log lines, and remove the debuggers without breaking your application logic.

🤖 The Killer Feature: Native AI Integration (MCP)

Because I use AI heavily in my workflow, I built a native Model Context Protocol (MCP) server directly into the tool.

If you use Claude Desktop or Cursor, you don't even need to use the terminal. You can give your AI agent the ability to audit and fix your code for you. Just add this to your MCP settings file:


json
{
  "mcpServers": {
    "frontend-auditor": {
      "command": "npx",
      "args": ["-y", "frontend-quality-auditor", "mcp"]
    }
  }
}

DEV Community: abdelrhman Ahmed

Stop shipping messy code: I built a zero-dependency frontend auditor (with Claude MCP support)

🛠️ What does it actually do?

✨ The best part: Auto-Fixing

🤖 The Killer Feature: Native AI Integration (MCP)