uimax-mcp: Kostenloser MCP-Server für automatische Frontend-Code-Überprüfung und -Korrekturen mit Claude Code

Automatisierte Frontend-Review-Pipeline

Der uimax-mcp MCP-Server wurde entwickelt, um einen repetitiven Workflow zu automatisieren: Claude als Frontend-Experten für Code-Reviews einzusetzen und dann Claude Code zu nutzen, um die vorgeschlagenen Korrekturen umzusetzen. Dieses Tool verpackt den gesamten Prozess in eine einzige automatisierte Pipeline.

Kernfunktionalität

Mit dem Befehl review my UI at localhost:3000 führt das Tool diese Aktionen aus:

• Erfasst einen echten Screenshot Ihrer laufenden Anwendung mit Puppeteer
• Führt Google Lighthouse-Audits für Performance, Barrierefreiheit, Best Practices und SEO-Scores durch
• Führt axe-core WCAG 2.1 Barrierefreiheits-Audit aus
• Scannt Quellcode nach 25+ Anti-Patterns
• Übergibt alle Daten an Claude Code mit integrierter Experten-Review-Methodik
• Claude Code generiert das Review und setzt Korrekturen automatisch um

Zusätzliche Funktionen

Der MCP umfasst insgesamt 12 Tools:

• Vorher/Nachher-Screenshot-Vergleich
• Responsive Viewport-Prüfungen
• Dark-Mode-Erkennung
• Export von eigenständigen HTML-Berichten
• Konfiguration benutzerdefinierter Regeln

Installation und Verwendung

Installation mit einem Befehl:

claude mcp add uimax -- npx -y uimax-mcp@latest

Das Tool ist 100% kostenlos für Pro-Plan-Nutzer, erfordert keine API-Schlüssel und verursacht keine zusätzlichen Kosten. Der MCP sammelt die Daten, während Claude Code (mit Ihrem bestehenden Abonnement) die Expertenanalyse und Korrekturen übernimmt.

Ergebnisse aus realen Tests

Während der Tests an echten Projekten fand das Tool 109 Code-Feststellungen in einer Anwendung, darunter 32 Tastatur-Barrierefreiheitsprobleme, deren manuelle Identifizierung über 30 Minuten gedauert hätte.

Verfügbarkeit

Quellcode ist auf GitHub verfügbar: https://github.com/prembobby39-gif/uimax-mcp

Paket verfügbar auf npm: https://npmjs.com/package/uimax-mcp