Front-End Checklist

by @thedaviddias · io.github.thedaviddias/front-end-checklist

Review frontend code and live pages against 386 quality-gated web development rules.

OnlineRemote
Category
Developer tools
Connection
Remote (HTTP)
Tools
11 reported
Status
Online

Connect it to your AI

Claude Code

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

Claude, ChatGPT, Cursor and other apps

Add it as a custom connector with this URL (Streamable HTTP):

https://mcp.frontendchecklist.io/

Cursor, VS Code and other apps (mcp.json)

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

Tools it offers

11 tools, as the server itself reported during our check on Oct 31, 2026.

  • review_codeRuns a non-exhaustive static heuristic review of pasted HTML, CSS, or JavaScript against multiple frontend best practices and returns prioritized issues, fix guidance, and suggestions for manual verification. Use it when
  • audit_urlFetches a public HTTPS page and performs a non-exhaustive static review of its HTML, returning prioritized issues and fix guidance. Use it when the user requests an audit of a deployed public page. Localhost, private net
  • get_workflowReturns the ordered steps of a curated audit workflow, including rule slugs, priorities, and categories. Use it when the user requests a structured audit such as a pre-launch checklist. Available workflows: accessibility
  • get_checklist_rulesReturns titles, priorities, verification and remediation prompts for every rule in a curated checklist. Use it when the user requests guidance for an entire checklist. includeContent optionally adds each rule’s long-form
  • get_quick_referenceReturns a compact checklist for one frontend category, filtered by priority and formatted as JSON, Markdown, or a task list. Use it when the user requests a concise checklist for a deployment, review, or team handoff.
  • get_ruleReturns complete guidance for one known rule slug: requirements, rationale, verification and remediation prompts, code examples, sources, and related rules. Use it when the user requests detailed guidance for a specific
  • search_rulesFinds frontend rules by keywords, category, and priority, returning paginated slugs, titles, and short summaries. Use it when the user requests relevant practices for a technology, concern, or pattern, such as web fonts
  • check_ruleChecks a code snippet against one named frontend rule using static heuristics and returns findings and verification guidance. Without code, returns manual verification guidance. Use it when the user requests a check of a
  • fix_ruleReturns step-by-step remediation guidance and priority for one named frontend rule. Use it when the user requests implementation or fix instructions for a known issue. Optional codeSnippet provides context; the tool does
  • explain_ruleExplains one frontend rule, including its background, impact on users and the business, and related categories. Use it when the user asks why a practice matters or requests educational context. It returns explanation gui
  • list_categoriesLists available frontend rule categories, their descriptions, and rule counts. Use it when the user asks what the checklist covers or needs valid category names.

Questions

What is the Front-End Checklist MCP server?

Review frontend code and live pages against 386 quality-gated web development rules. It is made by @thedaviddias and listed in the official MCP Registry as io.github.thedaviddias/front-end-checklist. MCP (Model Context Protocol) is the open standard that lets AI apps like Claude, ChatGPT and Cursor use outside tools.

How do I add Front-End Checklist to Claude?

In the Claude app or claude.ai, open Settings, then Connectors, choose "Add custom connector" and paste https://mcp.frontendchecklist.io/. In Claude Code, run: claude mcp add --transport http front-end-checklist https://mcp.frontendchecklist.io/

How do I add Front-End Checklist to ChatGPT?

ChatGPT can use remote MCP servers as connectors. In ChatGPT settings, under Apps and Connectors, turn on developer mode if asked, create a new connector and paste https://mcp.frontendchecklist.io/.

How do I add Front-End Checklist to Cursor?

Open Cursor settings, go to MCP, choose "Add new MCP server" (or edit ~/.cursor/mcp.json) and add: { "mcpServers": { "front-end-checklist": { "url": "https://mcp.frontendchecklist.io/" } } }

Does Front-End Checklist work right now?

Yes. It responded when we last checked on 31 Oct 2026. We check remote MCP servers every day.

What can Front-End Checklist do?

It gives your AI 11 tools, including review_code, audit_url, get_workflow, get_checklist_rules, get_quick_reference. The full list is on this page.

Is this your server? Get the badge for your README
chen.media/mcp badge

Markdown (GitHub README)

[![Listed on chen.media/mcp](https://chen.media/mcp/badge/github-thedaviddias-front-end-checklist.svg)](https://chen.media/mcp/github-thedaviddias-front-end-checklist)

HTML (switches to dark mode on its own)

<a href="https://chen.media/mcp/github-thedaviddias-front-end-checklist"><picture><source media="(prefers-color-scheme: dark)" srcset="https://chen.media/mcp/badge/github-thedaviddias-front-end-checklist.svg?theme=dark"><img src="https://chen.media/mcp/badge/github-thedaviddias-front-end-checklist.svg" alt="Listed on chen.media/mcp" height="40"></picture></a>

More in Developer tools

See all