前端检查清单 (Front-End Checklist)

前端检查清单（Front-End Checklist）是一个面向人类和 AI 智能体（AI agents）的开源前端质量系统。它将前端最佳实践转化为实用的审查工作流，你可以直接在网页上浏览、通过 MCP 兼容工具运行，或者直接阅读本 README 来进行检查。

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

姊妹项目：UX Patterns for Devs 可帮助开发者在通过前端检查清单验证实施质量之前，选择合适的 UI 模式。

[!IMPORTANT] 建议使用网站进行浏览和筛选，使用 MCP 服务器进行 AI 智能体工作流，并在此 README 中获取清单的汇总信息。

你能获得什么

• 涵盖 11 个活跃类别的 385 条英文规则
• 由托管服务器提供的 11 个 MCP 工具
• 包含说明、修复建议和验证步骤的规则页面

如何使用此清单

1. 从下方的分类导航开始，直接跳转到你需要检查的部分。
2. 针对适用于你的项目、审计或 Pull Request 的勾选项目逐一核对。
3. 当需要完整的指导、示例、验证步骤和 AI 提示词（prompts）时，点击链接查看对应的规则页面。
4. 使用 frontendchecklist.io 进行交互式浏览，当需要让智能体使用相同的规则库时，使用 mcp.frontendchecklist.io。

优先级说明

• ![Critical][critical_img] 表示会导致站点崩溃、合规性风险或安全隐患的问题，应优先修复。
• ![High][high_img] 表示对用户体验、无障碍访问（Accessibility）、性能或可发现性有重大影响的问题。
• ![Medium][medium_img] 表示作为常规前端质量审查一部分的强力推荐实践。
• ![Low][low_img] 表示属于场景化需求或优先级较低的有益改进。

选择你的工作流

在线浏览

• 在 frontendchecklist.io/rules 浏览所有规则
• 在 frontendchecklist.io/checklists 使用精选检查清单
• 打开分类页面进行专注的审计和实施指导

先选择合适的模式

前端检查清单旨在帮助你审查实施质量。如果你还在考虑构建哪种界面，请使用 UX Patterns for Devs 来对比常见的 UI 模式、理解其权衡，并查找关于表单、导航、数据展示、反馈状态、身份验证和 AI 界面设计的实用指南。

为清单做贡献

• 安装依赖：pnpm install
• 运行本地开发环境：pnpm dev
• 验证结构：pnpm validate:rule-structure
• 评分库内容：pnpm score:rules
• 重新生成派生制品：pnpm generate:skills 和 pnpm generate:readme

与 MCP 配合使用

将支持 MCP 的智能体连接到前端检查清单，以便在 React、Next.js、HTML、CSS、JavaScript、无障碍访问、性能、SEO、安全、图像、隐私、i18n 和测试方面进行代码审查、结构化规则查询、审计和修复工作流。

[!TIP] 最佳使用建议：将支持 MCP 的智能体指向实际的组件、页面或公共 URL，并明确要求其使用 Front-End Checklist MCP，以获得最高置信度的前端审计结果。由于某些客户端会延迟发现已安装的 MCP 工具，在提示词中指明服务器名称会有所帮助。

• 公共端点：mcp.frontendchecklist.io
• 公共文档：frontendchecklist.io/mcp
• 本地/编辑器集成：stdio 服务器位于 packages/mcp/src/cli.ts

你可以做什么：

• 针对粘贴的代码或文件内容进行清单审查
• 审计线上的公共 URL
• 获取包含修复指导的特定规则
• 按关键词、类别或优先级搜索规则
• 获取针对特定审计的工作流或快速参考

智能体使用指南：

• 针对粘贴的 HTML、CSS、JavaScript、React 或 Next.js 代码，优先使用 review_code
• 在提出前端无障碍访问、性能、SEO、安全或图像建议之前，使用 search_rules
• 在进行上线、无障碍访问、SEO、安全和性能审计时，使用 get_workflow 或 get_checklist_rules
• 针对公共 https:// 页面使用 audit_url

示例提示词：

• Use the Front-End Checklist MCP to review this React component and report the highest-confidence findings first.
• Use the Front-End Checklist MCP to audit https://example.com for accessibility, performance, and SEO issues.
• Use the Front-End Checklist MCP to explain...