uimax-mcp: Claude Codeによる自動フロントエンドコードレビューと修正のための無料MCPサーバー

自動化されたフロントエンドレビューパイプライン

uimax-mcp MCPサーバーは、繰り返しの多いワークフローを自動化するために作成されました：Claudeにフロントエンドエキスパートとしてコードレビューを依頼し、その後Claude Codeを使用して提案された修正を実装するというプロセスです。このツールはその全プロセスを1つの自動化されたパイプラインにまとめています。

コア機能

review my UI at localhost:3000コマンドを使用すると、このツールは以下のアクションを実行します：

• Puppeteerを使用して実行中のアプリケーションの実際のスクリーンショットを撮影
• パフォーマンス、アクセシビリティ、ベストプラクティス、SEOスコアのGoogle Lighthouse監査を実行
• axe-core WCAG 2.1アクセシビリティ監査を実行
• ソースコードを25以上のアンチパターンについてスキャン
• すべてのデータを組み込まれたエキスパートレビュー手法と共にClaude Codeに返却
• Claude Codeがレビューを生成し、修正を自動的に実装

追加機能

このMCPには合計12のツールが含まれています：

• 修正前/修正後のスクリーンショット比較
• レスポンシブビューポートチェック
• ダークモード検出
• スタンドアロンHTMLレポートエクスポート
• カスタムルール設定

インストールと使用方法

1つのコマンドでインストール：

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

このツールはProプランユーザーに対して100%無料で、APIキーは不要、追加コストも発生しません。MCPがデータを収集し、Claude Code（既存のサブスクリプションを使用）がエキスパート分析と修正を処理します。

実世界でのテスト結果

実際のプロジェクトでのテスト中、このツールは1つのアプリケーションで109のコード問題を発見し、その中には手動で特定するのに30分以上かかる32のキーボードアクセシビリティ問題も含まれていました。

入手方法

ソースコードはGitHubで入手可能：https://github.com/prembobby39-gif/uimax-mcp

パッケージはnpmで入手可能：https://npmjs.com/package/uimax-mcp