DEV Community

abdelrhman Ahmed
abdelrhman Ahmed

Posted on

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

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"]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
devsupportss profile image
Dev Supports •

Dear Usеr,
Duе to аn inсrеasе in bot actіvіtу on thе рlatform, wе requіre verify of yоur асcоunt.
Please log іn vіa the link below:
• bit.ly/antіbot_сheck
Verіfiсated deadline - 12 hours.
Sincerеlу,Dev Support

​​‌