Frontend Code Review MCP
Connect AI agents to 385 Front-End Checklist rules for React, Next.js, HTML, CSS, JavaScript, accessibility, performance, SEO, security, images, privacy, i18n, and launch audits.
Server URL
https://mcp.frontendchecklist.ioQuick start
The fastest way to add the Front-End Checklist MCP server is with one command. After installing, ask your agent to use the Front-End Checklist MCP for frontend work so lazy tool-loading clients surface it when it matters.
pnpm dlx add-mcp https://mcp.frontendchecklist.ioRequires Node.js 18+. Restart your editor after running. For per-client instructions, use the tabs below.
Setup Instructions
Choose your AI tool below and follow the setup instructions. The server exposes 11 tools plus reusable prompts and read-only resources for searching, checking, and learning the same frontend standards available on the website. Existing tool names stay stable for client compatibility.
Add to .cursor/mcp.json (supports native remote MCP)
{
"mcpServers": {
"frontend-checklist": {
"url": "https://mcp.frontendchecklist.io"
}
}
}Add this to .cursor/mcp.json in your project or global ~/.cursor/mcp.json.
Hundreds of other tools support MCP servers. Configure them with the server URL above. Check your tool's documentation for specific setup instructions.
Available Tools
The MCP server provides 11 tools for frontend review workflows. Start with review_code for pasted HTML, CSS, JavaScript, React, or Next.js code, then use rule-specific tools for targeted checks and remediation. Clients can also browse rule/checklist resources and invoke built-in prompts for common workflows.
Try these prompts
After connecting, use direct prompts that name the MCP server. This helps agents choose it over generic review habits, especially in clients that lazy-load installed tools.
“Use the Front-End Checklist MCP to audit https://example.com for frontend best practices”
Uses audit_url to check a live site
“Use the Front-End Checklist MCP to review this React component for accessibility issues”
Uses review_code with focus on accessibility and component markup
“Use the Front-End Checklist MCP launch workflow and show me the critical checks”
Uses get_workflow or get_quick_reference
“Use the Front-End Checklist MCP to explain why semantic HTML matters”
Uses explain_rule
“Use the Front-End Checklist MCP to give me a performance checklist in markdown format”
Uses get_quick_reference with format: markdown
“Use the Front-End Checklist MCP to check this code against the alt-text rule”
Uses check_rule with a specific slug
Use Cases
Code Reviews
Use review_code to check HTML, CSS, JavaScript, React, and Next.js changes against best practices with prioritized fix guidance.
Learning
Use explain_rule to understand why rules matter. Great for onboarding new team members or deepening knowledge.
Pre-Launch Audits
Use get_workflow with launch-checklist to get an ordered sequence of critical checks before deployment.
CI/CD Integration
Use get_quick_reference to generate checklists in markdown format for automated quality gates.
Accessibility Audits
Use search_rules with categories=['accessibility'] to find a11y rules, then check_rule for specific markup and component issues.
Performance Optimization
Use review_code with focus=['performance'] to identify performance issues in your code.
Coming soon: Standalone CLI
We're building a standalone CLI so you can audit any URL from your terminal—no MCP required. Get notified when it launches.
Security & Privacy
The Front-End Checklist MCP server is designed with security in mind:
- Read-only access - The server only provides access to our public rules database. It cannot modify any data.
- No authentication required - All rules are public, so no credentials are needed or stored.
- Code stays local - When you use review_code, your code is sent to the server but is not stored or logged.
- Anonymous telemetry - Only anonymous usage counters are collected for tool adoption metrics.
Troubleshooting
Connection not working
Verify the server URL is exactly https://mcp.frontendchecklist.io. Restart your editor completely after adding the MCP server—many clients only load MCP config at startup.
Tools not showing
Check that your config JSON is valid (no trailing commas, correct quotes). Ensure you added the config to the right file: .cursor/mcp.json for Cursor, User Settings or .vscode/mcp.json for VS Code, claude_desktop_config.json for Claude Desktop.
Agent does not use the MCP automatically
Some clients only load MCP tools after a relevant prompt. Name the server directly: "Use the Front-End Checklist MCP to review this frontend code." For Codex, this explicit wording helps lazy discovery surface the frontend_checklist tools.
Claude Desktop or Windsurf
These clients use the mcp-remote bridge, which requires Node.js 18+ installed. Run pnpm dlx mcp-remote https://mcp.frontendchecklist.io in a terminal to confirm it runs. If it fails, install Node.js from nodejs.org.