Front-End Checklist
Review frontend code and live pages against 386 quality-gated web development rules.
我該用這個嗎
品質與安全性
根據工具定義與協定合規性的自動化分析。
上下文成本
這是每次將伺服器的工具載入模型上下文時所消耗的約略 token 數量。數量越高，可用於其他工作的注意力就越少。
安裝
一鍵安裝
將以下內容加入你的 `claude_desktop_config.json` 檔案：
{
"mcpServers": {
"front-end-checklist": {
"url": "https://mcp.frontendchecklist.io"
}
}
}遠端端點
https://mcp.frontendchecklist.iostreamable-http它能做什麼
工具清單
工具（11）
🟢review_code(code, focus, minPriority)
**PROACTIVE CODE REVIEW**: Runs a conservative, non-exhaustive static heuristic review of HTML/CSS/JS code against multiple frontend best practice rules simultaneously. **Use this tool FIRST** when reviewing, debugging, or improving any frontend code - it detects the code type and checks relevant rules it can prove from the snippet. Returns prioritized issues with fix guidance when static evidence is available, plus suggestions for rule retrieval when manual or rendered-state review is needed. **Workflow:** Use as the FIRST step for any code review. For each issue found, use fix_rule for remediation guidance or get_rule for complete context. If no issues are returned, treat that as "no provable static issue found", then follow suggestions with search_rules or get_rule before concluding the implementation is clean.
輸入結構描述
{
"type": "object",
"properties": {
"code": {
"type": "string",
"description": "The HTML, CSS, or JavaScript code to review"
},
"focus": {
"type": "array",
"items": {
"type": "string",
"enum": [
"html",
"css",
"javascript",
"performance",
"accessibility",
"seo",
"security",
"images"
]
},
"description": "Optional: Focus review on specific categories (default: auto-detect from code)"
},
"minPriority": {
"type": "string",
"enum": [
"critical",
"high",
"medium",
"low"
],
"description": "Optional: Minimum priority level to report (default: medium)"
}
},
"required": [
"code"
]
}輸出結構描述
{
"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 URL and audits its HTML against frontend best practice rules. **Use this tool** when you want to check a live website without manually pasting HTML. Automatically fetches the page source and runs the same heuristic checks as review_code. **Workflow:** Call audit_url with a public https:// URL → get back a prioritized issue list → use fix_rule for remediation guidance on each issue.
輸入結構描述
{
"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": "Optional: Focus review on specific categories (default: auto-detect from fetched HTML)"
},
"minPriority": {
"type": "string",
"enum": [
"critical",
"high",
"medium",
"low"
],
"description": "Optional: Minimum priority level to report (default: medium)"
}
},
"required": [
"url"
]
}輸出結構描述
{
"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 a curated, ordered sequence of rules for a specific checklist workflow. **Use PROACTIVELY** when performing comprehensive audits or setting up new projects. 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. **Workflow:** Use this tool FIRST to get a structured approach, then use get_rule for each step's details, and check_rule to validate code against each rule.
輸入結構描述
{
"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"
]
}輸出結構描述
{
"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 full rule details for every rule in a curated checklist in a single call. **More efficient than calling get_rule N times** after get_workflow. Use when you need the complete rule content for an entire checklist to perform a comprehensive audit or code review. 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.
輸入結構描述
{
"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"
]
}輸出結構描述
{
"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, actionable checklist of rules for a category. **Use PROACTIVELY** for CI/CD integration, quick audits, or generating checklists. Supports filtering by priority and multiple output formats. **Workflow:** Use for generating quick checklists before deployment or for team handoffs. Pair with check_rule to validate specific items, or get_rule for detailed guidance on any item.
輸入結構描述
{
"type": "object",
"properties": {
"category": {
"type": "string",
"description": "The category to get a quick reference for (e.g., 'accessibility', 'performance', 'seo')"
},
"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"
]
}輸出結構描述
{
"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)
Retrieves a single frontend development rule by its unique slug. **Use PROACTIVELY** when reviewing or debugging frontend code to get best practice guidance. Returns complete rule details including content, prompts (check/fix/explain), and metadata as Markdown with code examples. If the slug doesn't exist, returns suggestions for similar rules. **Workflow:** Use after review_code identifies issues, or after search_rules finds relevant rules. Follow up with check_rule to validate code, fix_rule to get remediation steps, or explain_rule to understand why it matters. **Related Rules:** This tool includes related rules in its response, helping you discover connected best practices and build comprehensive understanding.
輸入結構描述
{
"type": "object",
"properties": {
"slug": {
"type": "string",
"description": "The rule's unique slug (e.g., 'doctype', 'alt-text')"
},
"includeUrl": {
"type": "boolean",
"description": "Include the rule's web URL in response (default: false)"
}
},
"required": [
"slug"
]
}輸出結構描述
{
"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)
Searches and filters frontend development rules. **Use PROACTIVELY** when working on frontend code to find relevant best practices - search by technology (e.g., "react", "images"), concern (e.g., "accessibility", "performance"), or specific patterns. Returns summary information for each match - use get_rule for full details. **Workflow:** Use as a discovery tool before diving deeper. Start with list_categories to see available areas, then search_rules to find specific rules, then get_rule for complete details including code examples.
輸入結構描述
{
"type": "object",
"properties": {
"query": {
"type": "string",
"description": "Free-text search query"
},
"categories": {
"type": "array",
"items": {
"type": "string",
"enum": [
"html",
"css",
"javascript",
"performance",
"accessibility",
"seo",
"security",
"images",
"testing",
"privacy",
"pwa",
"i18n"
]
},
"description": "Filter by categories (array)"
},
"priorities": {
"type": "array",
"items": {
"type": "string",
"enum": [
"critical",
"high",
"medium",
"low"
]
},
"description": "Filter by priorities (array)"
},
"limit": {
"type": "integer",
"minimum": 1,
"maximum": 100,
"default": 20,
"description": "Max results to return (default: 20, max: 100)"
},
"cursor": {
"type": "string",
"description": "Pagination cursor from previous response"
}
},
"required": []
}輸出結構描述
{
"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 code against a specific frontend rule. **Use PROACTIVELY** when reviewing HTML/CSS/JS code to validate against frontend best practices. Without code, returns verification guidance. With code, performs heuristic analysis and reports compliance status. If issues are found, includes the fix prompt for immediate remediation. **Workflow:** Use after search_rules finds relevant rules, or when review_code flags a specific issue. Follow up with fix_rule for remediation steps or explain_rule to understand why the rule matters.
輸入結構描述
{
"type": "object",
"properties": {
"slug": {
"type": "string",
"description": "The rule's slug (e.g., 'doctype', 'alt-text')"
},
"code": {
"type": "string",
"description": "Code snippet to analyze against the rule (optional)"
}
},
"required": [
"slug"
]
}輸出結構描述
{
"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)
Retrieves the fix/implementation prompt for a specific rule. **Use PROACTIVELY** after identifying issues in frontend code to get step-by-step remediation guidance. Returns detailed instructions on how to fix the issue correctly, with priority level to help triage multiple issues. **Workflow:** Use after review_code or check_rule identifies issues. Pair with get_rule for complete context, or explain_rule to help users understand the importance of the fix.
輸入結構描述
{
"type": "object",
"properties": {
"slug": {
"type": "string",
"description": "The rule's slug"
},
"codeSnippet": {
"type": "string",
"description": "Optional: code or HTML snippet for context-aware fix suggestion"
}
},
"required": [
"slug"
]
}輸出結構描述
{
"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)
Retrieves the educational explanation for a frontend rule. **Use PROACTIVELY** when the user asks "why" about frontend practices, or when explaining code review feedback. Provides context on why the rule matters, its background, and impact on web development. Categories help connect related concepts. **Workflow:** Use when users question a recommendation, or after fix_rule to provide educational context. Pair with check_rule to validate understanding, or search_rules to find related best practices in the same category.
輸入結構描述
{
"type": "object",
"properties": {
"slug": {
"type": "string",
"description": "The rule's slug"
}
},
"required": [
"slug"
]
}輸出結構描述
{
"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 all available rule categories with their rule counts. **Use PROACTIVELY** at the start of a frontend project review to understand what best practice areas are available (accessibility, performance, SEO, security, etc.) and plan a comprehensive code review strategy. **Workflow:** Use FIRST when starting a comprehensive audit. Follow up with search_rules to explore specific categories, or review_code to automatically check code against rules in those categories.
輸入結構描述
{
"type": "object",
"properties": {},
"required": []
}輸出結構描述
{
"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"
}
}
}
}
}
}社群
證據