# Front-End Checklist

Connect an MCP server that checks frontend code and public pages against quality rules. Use it to review components or audit accessibility, SEO, and performance.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed · ★ 74559
- Author: thedaviddias
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/thedaviddias/Front-End-Checklist/tree/HEAD/packages/mcp
- Updated: 2026-10-06
- HTML: https://affpapa.org/en/nevibecode/mcp/front-end-checklist

## What it does

Front-End Checklist gives MCP agents tools to review HTML, CSS, JavaScript, React, and Next.js. Its corpus contains 386 rules in 11 categories. An agent can search rules, retrieve remediation guidance, or run a focused audit.

Use `review_code` for pasted code and `audit_url` for a public `https://` page. You can also look up an individual rule or request a workflow for an audit. The URL audit is for public HTTPS pages, so it won’t check a local development address.

## Requirements
- Remote server: `https://mcp.frontendchecklist.io`

## Install

### Claude Code (native platform)

**Platform CLI: remote server**
```bash
claude mcp add --transport http front-end-checklist https://mcp.frontendchecklist.io
```

### Codex

**Platform CLI: remote server**
```bash
codex mcp add mcp --url https://mcp.frontendchecklist.io
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "mcp": {
            "url": "https://mcp.frontendchecklist.io"
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "mcp": {
            "type": "http",
            "url": "https://mcp.frontendchecklist.io"
        }
    }
}
```

### Gemini CLI

**Platform CLI: remote server**
```bash
gemini mcp add -t http mcp https://mcp.frontendchecklist.io
```

## When to use it
- review a React component against frontend rules
- find accessibility issues on a public page
- audit a page for SEO and performance problems
- look up a rule and get remediation guidance

## Example prompts
- Use the Front-End Checklist MCP to review this React component and list the clearest findings first.
- Audit the public page `https://example.com` for accessibility and SEO issues.
- Find the canonical URL rule and suggest a code fix.

## Similar
- [tldraw](https://affpapa.org/en/nevibecode/mcp/tldraw.md) — MCP server · ★ 51091
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16062

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md