# Front-End Checklist MCP server

> Review frontend code and live public pages against hundreds of web development rules covering accessibility, performance, SEO and security.

- Listing: https://mcp.tc/i/front-end-checklist
- Connect: use the server's own URL `https://mcp.frontendchecklist.io` (no sign-in); clients connect to it directly. The listing link is a page, not an MCP endpoint.
- Type: remote (Streamable HTTP)
- Auth: none
- Category: [Developer Tools](https://mcp.tc/c/developer-tools)
- Vendor: thedaviddias
- Homepage: <https://frontendchecklist.io/mcp>
- Repository: <https://github.com/thedaviddias/Front-End-Checklist/tree/HEAD/packages/mcp>

## About

Gives an assistant access to the Front-End Checklist rule set, about 386 rules across HTML, CSS, JavaScript, performance, accessibility, SEO, security, images, testing, privacy and i18n. It can run a static heuristic review of pasted code, audit a public URL, and fetch, check, explain or fix individual rules. Curated workflows such as launch-checklist and core-web-vitals are also available.

The server is hosted at a public streamable HTTP endpoint. No sign-in or API key is needed. A local stdio version is also in the project repository. The code review is a conservative static pass, so an empty result does not prove the code is clean.

## What it can do

- Review pasted HTML, CSS, JS, React or Next.js code against many rules at once
- Audit a live public https page
- Search rules by keyword, category or priority
- Get a rule's full guidance, fix steps or explanation
- Check code against a specific rule
- Run curated workflows such as launch or security audits
- Generate quick reference checklists by category

## Tools (11)

- `review_code`: Static heuristic review of frontend code against multiple rules, returning prioritized issues. (read-only)
- `audit_url`: Fetch a public URL and audit its HTML against frontend rules. (read-only)
- `get_workflow`: Get an ordered sequence of rules for a checklist workflow such as seo-audit. (read-only)
- `get_checklist_rules`: Get full rule details for every rule in a curated checklist in one call. (read-only)
- `get_quick_reference`: Get a compact checklist of rules for a category, filterable by priority. (read-only)
- `get_rule`: Retrieve one rule by slug with content, prompts and metadata. (read-only)
- `search_rules`: Search and filter rules by query, category or priority. (read-only)
- `check_rule`: Check code against a specific rule or get verification guidance. (read-only)
- `fix_rule`: Get the fix and implementation prompt for a rule. (read-only)
- `explain_rule`: Get the educational explanation of why a rule matters. (read-only)
- `list_categories`: List rule categories with rule counts. (read-only)

## Example prompts

- "Use Front-End Checklist to review this React component and list the highest-confidence issues."
- "Audit https://example.com for accessibility, performance and SEO problems."
- "Explain the canonical URL rule and show how to fix it."
- "Run the launch-checklist workflow for my site."

## Install

### Claude Code

1. Run this in a terminal, in your project folder:

```bash
claude mcp add --transport http front-end-checklist https://mcp.frontendchecklist.io
```

2. Start Claude Code and type `/mcp`. **front-end-checklist** should show as connected.

Add `--scope user` to make it available in every project, not just this one.

### Claude Desktop

1. Open **Customize → Connectors**, click **+ Add**, then **Add custom connector**.

2. Name it **Front-End Checklist** and paste this URL:

```url
https://mcp.frontendchecklist.io
```

3. Click **Add**. Its tools appear in the chat’s tools menu.

Claude Desktop’s JSON config file only starts local servers. Remote servers go through Connectors, and connectors you add on claude.ai show up here too.

### claude.ai

1. Open the connector form on claude.ai. This button fills in the name and URL for you:

[Add to claude.ai](<https://claude.ai/customize/connectors?modal=add-custom-connector&connectorName=Front-End%20Checklist&connectorUrl=https%3A%2F%2Fmcp.frontendchecklist.io>) (opens connector settings)

2. Check that the URL reads `https://mcp.frontendchecklist.io` and click **Add**.

3. Turn it on in a chat from the tools menu.

Free plans allow one custom connector. On Team and Enterprise plans an owner adds it under **Organization settings → Connectors**.

### ChatGPT

1. On chatgpt.com, open **Settings → Security and login** and turn on **Developer mode**.

2. Go to `chatgpt.com/plugins` and click **+** to create an app for a remote MCP server.

3. Paste `https://mcp.frontendchecklist.io` as the server URL and choose **No authentication**.

Developer mode is available on the web for Plus, Pro, Business, Enterprise and Education accounts.

### Cursor

[Add to Cursor](<https://cursor.com/install-mcp?name=front-end-checklist&config=eyJ1cmwiOiJodHRwczovL21jcC5mcm9udGVuZGNoZWNrbGlzdC5pbyJ9>) (opens Cursor)

Or add it by hand to `~/.cursor/mcp.json` (all projects) or `.cursor/mcp.json` (this project):

`mcp.json`:

```json
{
  "mcpServers": {
    "front-end-checklist": {
      "url": "https://mcp.frontendchecklist.io"
    }
  }
}
```

### VS Code

[Install in VS Code](<https://vscode.dev/redirect/mcp/install?name=front-end-checklist&config=%7B%22type%22%3A%22http%22%2C%22url%22%3A%22https%3A%2F%2Fmcp.frontendchecklist.io%22%7D>) (opens VS Code)

Or from a terminal:

```bash
code --add-mcp '{"name":"front-end-checklist","type":"http","url":"https://mcp.frontendchecklist.io"}'
```

Or commit it to the repo in `.vscode/mcp.json`:

`.vscode/mcp.json`:

```json
{
  "servers": {
    "front-end-checklist": {
      "type": "http",
      "url": "https://mcp.frontendchecklist.io"
    }
  }
}
```

### Devin Desktop

1. Add it to `~/.config/devin/mcp_config.json` (macOS and Linux) or `%APPDATA%\devin\mcp_config.json` (Windows):

`mcp_config.json`:

```json
{
  "mcpServers": {
    "front-end-checklist": {
      "serverUrl": "https://mcp.frontendchecklist.io"
    }
  }
}
```

2. Refresh the MCP server list in Cascade.

Devin Desktop is the new name for Windsurf. It reads `serverUrl` (or `url`) for remote servers.

### Codex

```bash
codex mcp add front-end-checklist --url https://mcp.frontendchecklist.io
```

Or edit `~/.codex/config.toml` directly:

`config.toml`:

```toml
[mcp_servers.front-end-checklist]
url = "https://mcp.frontendchecklist.io"
```

### Gemini CLI

```bash
gemini mcp add --transport http front-end-checklist https://mcp.frontendchecklist.io
```

This adds it to the current project. Add `-s user` to use it everywhere.

### Any client

Most clients accept this shape. Some name the URL field differently: `serverUrl` in Devin Desktop, `httpUrl` in Gemini CLI’s settings file.

```json
{
  "mcpServers": {
    "front-end-checklist": {
      "type": "http",
      "url": "https://mcp.frontendchecklist.io"
    }
  }
}
```

Zed puts servers under `context_servers` in its settings. Cline needs `"type": "streamableHttp"`, or it assumes SSE.

Client only starts local servers? Bridge it with `npx -y mcp-remote https://mcp.frontendchecklist.io`.

## Recent changes

- 2026-10-06 21:22 UTC: Tracking started: 11 tools read. Source: automatic check.

More on the History tab, with descriptions before and after for the newest entries: https://mcp.tc/i/front-end-checklist#history (Atom feed: https://mcp.tc/i/front-end-checklist/history.xml). It records what mcp.tc's anonymous checks saw, every 3 hours where the tool list can be read without sign-in; it is not a security review.

## Details

- Server version: 2.0.1
- MCP protocol version: 2026-07-28
- Last checked: 2026-10-07 (reachable)
- Listed: 2026-10-05
- Updated: 2026-10-05

---
Source: https://mcp.tc/i/front-end-checklist (mcp.tc is an independent directory, not affiliated with this server's publisher). Corrections: https://mcp.tc/report