# Front-End Checklist

> Reviews your frontend code and live pages against the Front-End Checklist rules for accessibility, performance, SEO and security.

Front-End Checklist is David Dias's open-source checklist for modern web development, and this is its hosted MCP server. It connects your agent to the checklist's rules for React, Next.js, HTML, CSS, JavaScript, accessibility, performance, SEO, security, images, privacy, i18n and testing, so it can review code and live pages against them and explain how to fix what it finds.

What you can do with it
- Review pasted HTML, CSS, JavaScript, React or Next.js code and get prioritized issues with fix guidance
- Audit a live public HTTPS page without pasting its source
- Follow a curated workflow, such as the launch checklist, for accessibility, SEO, security or performance
- Search the rules by keyword, category or priority, and check a snippet against a single rule
- Get step-by-step fixes and plain explanations of why a rule matters
- Generate a compact checklist for one category, in Markdown or as a task list, for CI or team handoffs

How it connects
- A hosted MCP server at https://mcp.frontendchecklist.io
- No sign-in or API key: the rules are public
- Name it in your ask ("Use the Front-End Checklist MCP to…") so agents that load tools lazily pick it up

Good to know
- Read-only: it only reads its public rules database
- Code you send for review goes to the server, which the maker says doesn't store or log it
- Reviews are static heuristics, not an exhaustive audit
- The server collects anonymous usage counters
- Open source under the MIT licence

- Type: Plugin
- Made by: thedaviddias
- Category: Design
- Formats: Remote MCP
- Version: 2.0.1
- Website: https://frontendchecklist.io/mcp
- Source: https://github.com/thedaviddias/front-end-checklist/tree/HEAD/packages/mcp
- Page: https://pluginboard.ai/plugins/front-end-checklist

## Works with

- ChatGPT
- Claude
- Muse
- Grok Bot
- Gemini
- Grok
- GitHub Copilot
- Cursor
- Claude Code
- Codex
- Antigravity
- Gemini CLI
- Replit
- OpenClaw
- OpenCode
- Hermes Agent

## Install

### ChatGPT

In ChatGPT on the web: Plugins → + → Add custom MCP server, then paste https://mcp.frontendchecklist.io under Connection. Business and Enterprise plans; Pro can add read-only servers.

### Claude

In Claude (web or desktop): Customize → Connectors → Add custom connector, then paste https://mcp.frontendchecklist.io

### Muse

In Muse: In a Muse chat, ask it to create a custom connector for the MCP server at https://mcp.frontendchecklist.io. Then tap Connect on the card it shows and sign in, or add your key.

### Grok Bot

In Grok Bot: In a chat with your Bot, say "Add this MCP server: https://mcp.frontendchecklist.io". It confirms the details with you and sets it up, and the tools are ready from your next message.

### Gemini

In Gemini: At gemini.google.com: Settings → Connected Apps → Add a custom app, then paste https://mcp.frontendchecklist.io

### Grok

In Grok on the web: At grok.com/connectors: New Connector → Custom, then enter https://mcp.frontendchecklist.io and sign in if it asks.

### GitHub Copilot

Add to VS Code: vscode:mcp/install?%7B%22name%22%3A%22front-end-checklist%22%2C%22type%22%3A%22http%22%2C%22url%22%3A%22https%3A%2F%2Fmcp.frontendchecklist.io%22%7D

Copilot CLI:

```shell
copilot mcp add --transport http front-end-checklist https://mcp.frontendchecklist.io
```

### Cursor

Add to Cursor: cursor://anysphere.cursor-deeplink/mcp/install?name=front-end-checklist&config=eyJ1cmwiOiJodHRwczovL21jcC5mcm9udGVuZGNoZWNrbGlzdC5pbyJ9

Add to .cursor/mcp.json:

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

### Claude Code

Run in your terminal:

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

### Codex

Run in your terminal:

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

### Antigravity

Add to ~/.gemini/config/mcp_config.json:

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

### Gemini CLI

Run in your terminal:

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

### Replit

In Replit: At replit.com/integrations, open MCP Servers → + Add MCP server, paste https://mcp.frontendchecklist.io (add any headers under Advanced settings), then click Test & save.

### OpenClaw

Run in your terminal:

```shell
openclaw mcp add front-end-checklist --url https://mcp.frontendchecklist.io --transport streamable-http
```

If it needs a key or sign-in: For https://mcp.frontendchecklist.io, add --header NAME=value for each header it needs, or --auth oauth and then run openclaw mcp login front-end-checklist.

### OpenCode

Run in your terminal:

```shell
opencode mcp add front-end-checklist --url https://mcp.frontendchecklist.io
```

If it needs a key: For https://mcp.frontendchecklist.io, add --header 'NAME=value' for each header it needs. Add --global to use it in every project.

### Hermes Agent

Run in your terminal:

```shell
hermes mcp add front-end-checklist --url https://mcp.frontendchecklist.io
```

Add to ~/.hermes/config.yaml:

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

If it signs in with OAuth: If https://mcp.frontendchecklist.io asks you to sign in, add --auth oauth to the command, or auth: oauth to its entry.

---
From Pluginboard (https://pluginboard.ai).