thedaviddias/front-end-checklist

现代网页开发的必备清单，适用于人类和人工智能代理

---

前端检查表是面向人类和人工智能代理的开源前端质量系统。它将前端最佳实践转化为实用的审查工作流程，您可以在网上浏览、使用兼容MCP的工具，或直接在本README中完成。

---

引言

• 网站：frontendchecklist.io
• 规则：frontendchecklist.io/rules
• MCP服务器：mcp.frontendchecklist.io

配套项目：开发者用户体验模式帮助开发者在使用前端检查表验证实现质量前选择合适的界面模式。

[!重要] 使用网站进行浏览和筛选，MCP服务器用于代理工作流程，想要将清单集中在一个地方时使用这个README。

你得到了什么

• 386 英国规则跨越11活跃类别
• 11 由托管服务器公开的MCP工具
• 包含说明、修复指导和验证步骤的规则页面

如何使用这份清单

1. 从下面的分类导航器开始，直接跳转到你需要的清单部分。

---

Front-End Checklist is the open-source front-end quality system for humans and AI agents. It turns front-end best practices into a practical review workflow you can browse on the web, run through with MCP-compatible tools, or work through directly in this README.

---

Introduction

• Website: frontendchecklist.io
• Rules: frontendchecklist.io/rules
• MCP server: mcp.frontendchecklist.io

Companion project: UX Patterns for Devs helps developers choose the right UI pattern before using Front-End Checklist to verify implementation quality.

[!IMPORTANT] Use the website for browsing and filtering, the MCP server for agent workflows, and this README when you want the checklist in one place.

What you get

• 386 English rules across 11 active categories
• 11 MCP tools exposed by the hosted server
• Rule pages with explanations, remediation guidance, and verification steps

How to use this checklist

1. Start with the category navigator below and jump straight to the part of the checklist you need.
2. Work through the checkbox items that apply to your project, audit, or pull request.
3. Open the linked rule pages when you need the full guidance, examples, verification steps, and AI prompts.
4. Use frontendchecklist.io for interactive browsing, and mcp.frontendchecklist.io when you want agents to use the same rule corpus directly.

Priority legend

• ![Critical][critical_img] means site-breaking, compliance-sensitive, or security-sensitive issues that should be fixed first.
• ![High][high_img] means issues with major impact on user experience, accessibility, performance, or discoverability.
• ![Medium][medium_img] means strong best practices that should be part of normal frontend quality review.
• ![Low][low_img] means useful improvements that are situational or lower urgency.

Choose your workflow

Browse online

• Explore all rules at frontendchecklist.io/rules
• Use curated checklists at frontendchecklist.io/checklists