Front-End Checklist
Review frontend code and live pages against 386 quality-gated web development rules.
Should I use this
Quality & Safety
Findings (3)
- LOWTool 'get_rule' description lacks action verbin get_rule
- LOWTool 'fix_rule' description lacks action verbin fix_rule
- LOWTool 'explain_rule' description lacks action verbin explain_rule
Based on automated analysis of tool definitions and protocol compliance.
Context Cost
This is the approximate number of tokens consumed each time the server's tools are loaded into a model's context. Higher counts reduce the attention available for other tasks.
Install
One-Click Install
Add this to your `claude_desktop_config.json` file:
{
"mcpServers": {
"front-end-checklist": {
"url": "https://mcp.frontendchecklist.io"
}
}
}Remote endpoints
https://mcp.frontendchecklist.iostreamable-httpWhat it can do
Tool inventory
Tools (11)
🟢review_code(code, focus, minPriority)
Runs 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 the user requests a review, audit, or debugging of source code. An empty issue list means no provable static issue was found; it does not establish accessibility conformance or runtime correctness.
Input Schema
{
"type": "object",
"properties": {
"code": {
"type": "string",
"description": "The HTML, CSS, or JavaScript source to review (a snippet or a whole file)."
},
"focus": {
"type": "array",
"items": {
"type": "string",
"enum": [
"html",
"css",
"javascript",
"performance",
"accessibility",
"seo",
"security",
"images"
]
},
"description": "Only check these categories (default: auto-detected from the code)."
},
"minPriority": {
"type": "string",
"enum": [
"critical",
"high",
"medium",
"low"
],
"description": "Lowest priority to report (default: medium)."
}
},
"required": [
"code"
]
}Output Schema
{
"type": "object",
"properties": {
"summary": {
"type": "object",
"properties": {
"totalChecks": {
"type": "number"
},
"issuesFound": {
"type": "number"
},
"criticalIssues": {
"type": "number"
},
"highIssues": {
"type": "number"
},
"categories": {
"type": "array",
"items": {
"type": "string"
}
}
}
},
"issues": {
"type": "array",
"items": {
"type": "object",
"properties": {
"rule": {
"type": "string"
},
"title": {
"type": "string"
},
"priority": {
"type": "string",
"enum": [
"critical",
"high",
"medium",
"low"
]
},
"issue": {
"type": "string"
},
"fixPrompt": {
"type": "string"
}
}
}
},
"suggestions": {
"type": "array",
"items": {
"type": "string"
}
}
}
}🟢audit_url(url, focus, minPriority)
Fetches 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 networks, and plain HTTP URLs are refused. It does not execute the page, measure live Core Web Vitals, or certify accessibility.
Input Schema
{
"type": "object",
"properties": {
"url": {
"type": "string",
"description": "Public URL to audit. Must use https://. Private IPs and localhost are blocked."
},
"focus": {
"type": "array",
"items": {
"type": "string",
"enum": [
"html",
"css",
"javascript",
"performance",
"accessibility",
"seo",
"security",
"images"
]
},
"description": "Only check these categories (default: auto-detected from the fetched HTML)."
},
"minPriority": {
"type": "string",
"enum": [
"critical",
"high",
"medium",
"low"
],
"description": "Lowest priority to report (default: medium)."
}
},
"required": [
"url"
]
}Output Schema
{
"type": "object",
"properties": {
"summary": {
"type": "object",
"properties": {
"totalChecks": {
"type": "number"
},
"issuesFound": {
"type": "number"
},
"criticalIssues": {
"type": "number"
},
"highIssues": {
"type": "number"
},
"categories": {
"type": "array",
"items": {
"type": "string"
}
}
}
},
"issues": {
"type": "array",
"items": {
"type": "object",
"properties": {
"rule": {
"type": "string"
},
"title": {
"type": "string"
},
"priority": {
"type": "string",
"enum": [
"critical",
"high",
"medium",
"low"
]
},
"issue": {
"type": "string"
},
"fixPrompt": {
"type": "string"
}
}
}
},
"suggestions": {
"type": "array",
"items": {
"type": "string"
}
},
"source": {
"type": "object",
"properties": {
"url": {
"type": "string"
},
"fetchedAt": {
"type": "string"
},
"contentLength": {
"type": "number"
}
}
},
"error": {
"type": "string"
}
}
}🟢get_workflow(slug)
Returns 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-essentials, comprehensive-audit, core-web-vitals, html-foundations, image-optimization, javascript-resilience, launch-checklist, performance-quick-wins, privacy-and-consent, security-audit, seo-audit, testing-checklist.
Input Schema
{
"type": "object",
"properties": {
"slug": {
"type": "string",
"enum": [
"accessibility-essentials",
"comprehensive-audit",
"core-web-vitals",
"html-foundations",
"image-optimization",
"javascript-resilience",
"launch-checklist",
"performance-quick-wins",
"privacy-and-consent",
"security-audit",
"seo-audit",
"testing-checklist"
],
"description": "The checklist workflow slug. Available: 'accessibility-essentials', 'comprehensive-audit', 'core-web-vitals', 'html-foundations', 'image-optimization', 'javascript-resilience', 'launch-checklist', 'performance-quick-wins', 'privacy-and-consent', 'security-audit', 'seo-audit', 'testing-checklist'"
}
},
"required": [
"slug"
]
}Output Schema
{
"type": "object",
"properties": {
"slug": {
"type": "string"
},
"title": {
"type": "string"
},
"description": {
"type": "string"
},
"icon": {
"type": "string"
},
"estimatedTime": {
"type": "string"
},
"difficulty": {
"type": "string"
},
"totalRules": {
"type": "number"
},
"criticalCount": {
"type": "number"
},
"highCount": {
"type": "number"
},
"steps": {
"type": "array",
"items": {
"type": "object",
"properties": {
"slug": {
"type": "string"
},
"title": {
"type": "string"
},
"priority": {
"type": "string",
"enum": [
"critical",
"high",
"medium",
"low"
]
},
"order": {
"type": "number"
},
"category": {
"type": "string"
}
}
}
},
"error": {
"type": "object",
"properties": {
"message": {
"type": "string"
}
}
}
}
}🟢get_checklist_rules(checklist, includeContent)
Returns 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 body. Available checklists: accessibility-essentials, comprehensive-audit, core-web-vitals, html-foundations, image-optimization, javascript-resilience, launch-checklist, performance-quick-wins, privacy-and-consent, security-audit, seo-audit, testing-checklist.
Input Schema
{
"type": "object",
"properties": {
"checklist": {
"type": "string",
"enum": [
"accessibility-essentials",
"comprehensive-audit",
"core-web-vitals",
"html-foundations",
"image-optimization",
"javascript-resilience",
"launch-checklist",
"performance-quick-wins",
"privacy-and-consent",
"security-audit",
"seo-audit",
"testing-checklist"
],
"description": "Checklist slug. Available: 'accessibility-essentials', 'comprehensive-audit', 'core-web-vitals', 'html-foundations', 'image-optimization', 'javascript-resilience', 'launch-checklist', 'performance-quick-wins', 'privacy-and-consent', 'security-audit', 'seo-audit', 'testing-checklist'"
},
"includeContent": {
"type": "boolean",
"description": "Include full MDX body content (large). Default false returns title, description, prompts, and metadata only."
}
},
"required": [
"checklist"
]
}Output Schema
{
"type": "object",
"properties": {
"checklist": {
"type": "object",
"properties": {
"slug": {
"type": "string"
},
"title": {
"type": "string"
},
"description": {
"type": "string"
},
"totalRules": {
"type": "number"
},
"criticalCount": {
"type": "number"
},
"highCount": {
"type": "number"
}
}
},
"rules": {
"type": "array",
"items": {
"type": "object",
"properties": {
"slug": {
"type": "string"
},
"title": {
"type": "string"
},
"priority": {
"type": "string",
"enum": [
"critical",
"high",
"medium",
"low"
]
},
"category": {
"type": "string"
},
"prompts": {
"type": "object",
"properties": {
"check": {
"type": "string"
},
"fix": {
"type": "string"
},
"explain": {
"type": "string"
},
"codeReview": {
"type": "string"
},
"aiContext": {
"type": "string"
}
}
},
"url": {
"type": "string"
},
"content": {
"type": "string"
}
}
}
},
"error": {
"type": "object",
"properties": {
"message": {
"type": "string"
}
}
}
}
}🟢get_quick_reference(category, priorityFilter, format)
Returns 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.
Input Schema
{
"type": "object",
"properties": {
"category": {
"type": "string",
"description": "Category name, e.g. 'accessibility', 'performance', or 'seo' (see list_categories)."
},
"priorityFilter": {
"type": "string",
"enum": [
"all",
"critical",
"critical+high",
"critical+high+medium"
],
"description": "Filter by priority level (default: 'critical+high'). Use 'all' for comprehensive lists, 'critical' for essentials only."
},
"format": {
"type": "string",
"enum": [
"json",
"markdown",
"checklist"
],
"description": "Output format (default: 'json'). Use 'markdown' for readable docs, 'checklist' for copy-paste task lists."
}
},
"required": [
"category"
]
}Output Schema
{
"type": "object",
"properties": {
"category": {
"type": "string"
},
"displayName": {
"type": "string"
},
"priorityFilter": {
"type": "string"
},
"items": {
"type": "array",
"items": {
"type": "object",
"properties": {
"slug": {
"type": "string"
},
"title": {
"type": "string"
},
"priority": {
"type": "string",
"enum": [
"critical",
"high",
"medium",
"low"
]
},
"checkPrompt": {
"type": "string"
}
}
}
},
"totalCount": {
"type": "number"
},
"markdown": {
"type": "string"
},
"error": {
"type": "object",
"properties": {
"message": {
"type": "string"
}
}
}
}
}🟢get_rule(slug, includeUrl)
Returns 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 frontend rule. Unknown slugs return similar suggestions.
Input Schema
{
"type": "object",
"properties": {
"slug": {
"type": "string",
"description": "Rule slug: the kebab-case rule ID, e.g. 'alt-text' or 'doctype'. The ID must identify a rule in the published catalogue."
},
"includeUrl": {
"type": "boolean",
"description": "Include the rule's web URL in response (default: false)"
}
},
"required": [
"slug"
]
}Output Schema
{
"type": "object",
"properties": {
"slug": {
"type": "string"
},
"title": {
"type": "string"
},
"description": {
"type": "string"
},
"content": {
"type": "string"
},
"categories": {
"type": "array",
"items": {
"type": "string",
"enum": [
"html",
"css",
"javascript",
"performance",
"accessibility",
"seo",
"security",
"images",
"testing",
"privacy",
"pwa",
"i18n"
]
}
},
"primaryCategory": {
"type": "string"
},
"priority": {
"type": "string",
"enum": [
"critical",
"high",
"medium",
"low"
]
},
"prompts": {
"type": "object",
"properties": {
"check": {
"type": "string"
},
"fix": {
"type": "string"
},
"explain": {
"type": "string"
},
"codeReview": {
"type": "string"
},
"aiContext": {
"type": "string"
}
}
},
"aiContext": {
"type": "string"
},
"url": {
"type": "string"
},
"difficulty": {
"type": "string"
},
"estimatedTime": {
"type": "number"
},
"subcategory": {
"type": "string"
},
"relatedRules": {
"type": "array",
"items": {
"type": "object",
"properties": {
"slug": {
"type": "string"
},
"title": {
"type": "string"
},
"reason": {
"type": "string"
}
}
}
},
"sources": {
"type": "array",
"items": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"title": {
"type": "string"
},
"url": {
"type": "string"
},
"type": {
"type": "string"
},
"role": {
"type": "string"
},
"authority": {
"type": "string"
}
}
}
},
"sourceSummary": {
"type": "object",
"properties": {
"sourceCount": {
"type": "number"
},
"primarySourceCount": {
"type": "number"
},
"sourceRoleCount": {
"type": "number"
}
}
},
"message": {
"type": "string"
},
"suggestions": {
"type": "array",
"items": {
"type": "object",
"properties": {
"slug": {
"type": "string"
},
"title": {
"type": "string"
},
"similarity": {
"type": "number"
}
}
}
}
}
}🟢search_rules(query, categories, priorities, limit, cursor)
Finds 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 or accessible forms.
Input Schema
{
"type": "object",
"properties": {
"query": {
"type": "string",
"description": "Keywords to match, e.g. 'lazy loading images'. Omit to list rules by filters only."
},
"categories": {
"type": "array",
"items": {
"type": "string",
"enum": [
"html",
"css",
"javascript",
"performance",
"accessibility",
"seo",
"security",
"images",
"testing",
"privacy",
"pwa",
"i18n"
]
},
"description": "Only return rules in these categories."
},
"priorities": {
"type": "array",
"items": {
"type": "string",
"enum": [
"critical",
"high",
"medium",
"low"
]
},
"description": "Only return rules with these priorities."
},
"limit": {
"type": "integer",
"minimum": 1,
"maximum": 100,
"default": 20,
"description": "Max results to return (default: 20, max: 100)"
},
"cursor": {
"type": "string",
"description": "Cursor from a previous response, to fetch the next page of results."
}
},
"required": []
}Output Schema
{
"type": "object",
"properties": {
"rules": {
"type": "array",
"items": {
"type": "object",
"properties": {
"slug": {
"type": "string"
},
"title": {
"type": "string"
},
"priority": {
"type": "string",
"enum": [
"critical",
"high",
"medium",
"low"
]
},
"categories": {
"type": "array",
"items": {
"type": "string",
"enum": [
"html",
"css",
"javascript",
"performance",
"accessibility",
"seo",
"security",
"images",
"testing",
"privacy",
"pwa",
"i18n"
]
}
},
"primaryCategory": {
"type": "string"
}
}
}
},
"nextCursor": {
"type": "string"
},
"totalCount": {
"type": "number"
}
}
}🟢check_rule(slug, code)
Checks 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 specific rule or a proposed fix. Results do not establish rendered-state or runtime conformance.
Input Schema
{
"type": "object",
"properties": {
"slug": {
"type": "string",
"description": "Rule slug: the kebab-case rule ID, e.g. 'alt-text' or 'doctype'. The ID must identify a rule in the published catalogue."
},
"code": {
"type": "string",
"description": "Code to test against the rule. Omit to get manual verification steps."
}
},
"required": [
"slug"
]
}Output Schema
{
"type": "object",
"properties": {
"slug": {
"type": "string"
},
"title": {
"type": "string"
},
"checkPrompt": {
"type": "string"
},
"analysis": {
"type": "string"
},
"fixPrompt": {
"type": "string"
},
"message": {
"type": "string"
},
"suggestions": {
"type": "array",
"items": {
"type": "object",
"properties": {
"slug": {
"type": "string"
},
"title": {
"type": "string"
},
"similarity": {
"type": "number"
}
}
}
},
"categories": {
"type": "array",
"items": {
"type": "string",
"enum": [
"html",
"css",
"javascript",
"performance",
"accessibility",
"seo",
"security",
"images",
"testing",
"privacy",
"pwa",
"i18n"
]
}
}
}
}🟢fix_rule(slug, codeSnippet)
Returns 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 not edit files or apply changes.
Input Schema
{
"type": "object",
"properties": {
"slug": {
"type": "string",
"description": "Rule slug: the kebab-case rule ID, e.g. 'alt-text' or 'doctype'. The ID must identify a rule in the published catalogue."
},
"codeSnippet": {
"type": "string",
"description": "Code that violates the rule, so the fix guidance can reference it."
}
},
"required": [
"slug"
]
}Output Schema
{
"type": "object",
"properties": {
"slug": {
"type": "string"
},
"title": {
"type": "string"
},
"fixPrompt": {
"type": "string"
},
"priority": {
"type": "string",
"enum": [
"critical",
"high",
"medium",
"low"
]
},
"codeContext": {
"type": "string"
},
"message": {
"type": "string"
},
"suggestions": {
"type": "array",
"items": {
"type": "object",
"properties": {
"slug": {
"type": "string"
},
"title": {
"type": "string"
},
"similarity": {
"type": "number"
}
}
}
}
}
}🟢explain_rule(slug)
Explains 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 guidance rather than applying a fix.
Input Schema
{
"type": "object",
"properties": {
"slug": {
"type": "string",
"description": "Rule slug: the kebab-case rule ID, e.g. 'alt-text' or 'doctype'. The ID must identify a rule in the published catalogue."
}
},
"required": [
"slug"
]
}Output Schema
{
"type": "object",
"properties": {
"slug": {
"type": "string"
},
"title": {
"type": "string"
},
"explainPrompt": {
"type": "string"
},
"categories": {
"type": "array",
"items": {
"type": "string",
"enum": [
"html",
"css",
"javascript",
"performance",
"accessibility",
"seo",
"security",
"images",
"testing",
"privacy",
"pwa",
"i18n"
]
}
},
"message": {
"type": "string"
},
"suggestions": {
"type": "array",
"items": {
"type": "object",
"properties": {
"slug": {
"type": "string"
},
"title": {
"type": "string"
},
"similarity": {
"type": "number"
}
}
}
}
}
}🟢list_categories
Lists available frontend rule categories, their descriptions, and rule counts. Use it when the user asks what the checklist covers or needs valid category names.
Input Schema
{
"type": "object",
"properties": {},
"required": []
}Output Schema
{
"type": "object",
"properties": {
"categories": {
"type": "array",
"items": {
"type": "object",
"properties": {
"name": {
"type": "string"
},
"displayName": {
"type": "string"
},
"description": {
"type": "string"
},
"ruleCount": {
"type": "number"
},
"icon": {
"type": "string"
}
}
}
}
}
}Community
Evidence