Front-End Checklist：开源的前端质量检查清单
Front-End Checklist
面向人类与 AI 智能代理的开源前端质量规范系统。它将前端最佳实践转化为一套可落地的评审工作流：你可以在网页浏览、通过兼容 MCP 的工具自动执行，或是直接在本文 README 中查阅。
配套项目：UX Patterns for Devs。帮助开发者先选择合适的 UI 模式，再使用 Front-End Checklist 校验落地质量。
[!IMPORTANT]
网页端适合浏览与筛选；MCP 服务端供智能代理自动化流程；如需在一处查看完整清单，请使用这份 README。
你能获得什么
- 共计 385 条英文规范，划分为 11 个有效分类
- 托管服务端对外提供 11 个 MCP 工具
- 每条规范配套说明、修复方案以及校验步骤
如何使用这份清单
- 通过下方分类导航，直接跳转至你需要核查的清单板块。
- 根据项目、评审需求或合并请求，逐项核对适用条目。
- 需要完整指引、示例、校验步骤与 AI 提示词时，打开对应的规范详情页。
- 交互式浏览访问 frontendchecklist.io；若想让智能代理直接调用同一套规范库，请使用 mcp.frontendchecklist.io。
优先级标识说明
- ![Critical][critical_img]：会导致站点功能异常、涉及合规或安全风险，需优先修复。
- ![High][high_img]：严重影响用户体验、无障碍访问、性能或搜索引擎收录。
- ![Medium][medium_img]：重要最佳实践，应当纳入常规前端质量评审。
- ![Low][low_img]：优化建议，视场景选用，紧急程度较低。
选择适合你的工作方式
在线浏览
先选定合适的交互模式
Front-End Checklist 用于校验实现质量。如果你还在确定界面方案，可以使用 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 的智能代理接入 Front-End Checklist，用于前端代码评审、规范检索、项目审计与问题修复，覆盖 React、Next.js、HTML、CSS、JavaScript、无障碍、性能、SEO、安全、图片、隐私、国际化、测试等领域。
[!TIP]
推荐初次使用方式：让支持 MCP 的智能代理读取组件、页面代码或线上网址，明确要求调用 Front-End Checklist MCP，优先输出可信度最高的前端问题。部分客户端会延迟加载 MCP 工具，在提示词中写明服务名称有助于工具正常触发。
可用能力：
- 根据清单评审粘贴的代码或文件内容
- 审计公开可访问的线上网址
- 查询单条规范，同步获取修复方案
- 通过关键词、分类、优先级检索规范
- 获取定向审计所需工作流程与速查清单
智能代理调用指引：
- 粘贴 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 the canonical URL rule and suggest a fix with code examples.
通过 Skills 扩展使用
如果你需要在支持该体系的工具中复用审计流程、获取定向规范指引，可以安装 Front-End Checklist skills。
安装命令：
npx skills add frontendchecklist/skills
npx skills add frontendchecklist/skills --skill https
关键入口：
典型场景：
- 基于完整 Front-End Checklist 规范库执行全面前端审计
- 使用
https 这类专项 skill 开展单一领域安全审查
- 借助对应规范的 skill，了解规范制定原因以及修复手段
https://github.com/thedaviddias/Front-End-Checklist
https://frontendchecklist.io/