Front-End Checklist

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 you 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_codeRead-only

  Static heuristic review of frontend code against multiple rules, returning prioritized issues.

• audit_urlRead-only

  Fetch a public URL and audit its HTML against frontend rules.

• get_workflowRead-only

  Get an ordered sequence of rules for a checklist workflow such as seo-audit.

• get_checklist_rulesRead-only

  Get full rule details for every rule in a curated checklist in one call.

• get_quick_referenceRead-only

  Get a compact checklist of rules for a category, filterable by priority.

• get_ruleRead-only

  Retrieve one rule by slug with content, prompts and metadata.

• search_rulesRead-only

  Search and filter rules by query, category or priority.

• check_ruleRead-only

  Check code against a specific rule or get verification guidance.

• fix_ruleRead-only

  Get the fix and implementation prompt for a rule.

• explain_ruleRead-only

  Get the educational explanation of why a rule matters.

• list_categoriesRead-only

  List rule categories with rule counts.

Read from the live server on 7 Oct 2026. Read-only, Writes and Can delete are hints the server declares; your client decides whether to ask before running a tool.

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.

Set up

Every client connects to mcp.frontendchecklist.io. Pick yours; the page remembers your choice.

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

https://mcp.frontendchecklist.io

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

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

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

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

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

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

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

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

Embed

Show Front-End Checklist in a README or on your site. Each embed links to this page, uses the server’s own URL, and sets no cookies. How embeds work

The card, the iframe and the JSON are in English. Add ?lang=it, fr, de or es to their address for another language.

README badge Website card iframe JSON AI prompt

README badge

Markdown

[![Front-End Checklist on mcp.tc](https://mcp.tc/i/front-end-checklist/badge.svg)](https://mcp.tc/i/front-end-checklist)

HTML

<a href="https://mcp.tc/i/front-end-checklist"><img src="https://mcp.tc/i/front-end-checklist/badge.svg" alt="Front-End Checklist on mcp.tc" height="20"></a>

It follows the reader’s light or dark mode. Add ?theme=light or ?theme=dark to fix it, or ?style=compact to show the mark without the word.

Website card

HTML

<script src="https://mcp.tc/w/front-end-checklist.js" async></script>

The card appears where the tag is. Add data-theme="dark" or data-size="compact" to the tag to change it. The file holds everything it needs, so it makes no other requests and sets no cookies.

iframe

HTML

<iframe src="https://mcp.tc/embed/front-end-checklist" title="Front-End Checklist on mcp.tc" width="420" height="200" loading="lazy" allow="clipboard-write" style="border:0;border-radius:8px;max-width:100%"></iframe>

Use it on pages that don’t allow scripts. Add ?theme=light or ?theme=dark to the address to fix the colors.

JSON

The listing as data for your own pages and tools: name, tagline, the server’s own URL, tools and the “Add to” links. Any site can read it (CORS is open).

https://mcp.tc/i/front-end-checklist.json

What each field means

AI prompt

Paste this into an AI coding assistant, such as Claude Code or Cursor, and it adds the Front-End Checklist card to your site.

Markdown

Add the mcp.tc card for Front-End Checklist, an MCP server, to my website. It is one static script: no build step, no package to install, no cookies.

Put this tag where the card should appear. The card renders right before it:

```html
<script src="https://mcp.tc/w/front-end-checklist.js" async></script>
```

To show the card somewhere else, put this placeholder there and load the same script once, for example before `</body>`. Keep the link inside: visitors without JavaScript see it.

```html
<div data-mcptc="front-end-checklist"><a href="https://mcp.tc/i/front-end-checklist">Front-End Checklist on mcp.tc</a></div>
```

Options:
- `data-theme="light"` or `"dark"` on the tag or the placeholder fixes the colors. Without it, the card follows the visitor’s light or dark mode.
- `data-size="compact"` gives a smaller card without the tagline.
- The CSS variable `--mcptc-max-width` on the placeholder or a parent sets the width (default `520px`).
- `?lang=` on the script URL sets the card’s language: `en`, `it`, `fr`, `de` or `es`.

If the site has a Content Security Policy, allow `script-src https://mcp.tc` and `img-src data:` (the icon is inline).

For a README or other Markdown docs, use the badge instead:

```markdown
[![Front-End Checklist on mcp.tc](https://mcp.tc/i/front-end-checklist/badge.svg)](https://mcp.tc/i/front-end-checklist)
```

Reference: https://mcp.tc/embed

Change history

We read this server’s tool list every 3 hours and record what changes. Last read 8 Oct 2026, 07:29 UTC.

1. 6 Oct 2026, 21:22 UTC, Automatic check

   Tracking started: 11 tools.

FAQ