前端开发质量检查清单 - 385条规则覆盖11个核心领域

解决什么

前端开发涉及HTML语义、CSS性能、JavaScript最佳实践、无障碍访问、SEO优化、安全防护、图片处理等多个专业领域,团队常面临三大痛点:新人不知道该检查什么、老手凭经验遗漏细节、上线前缺乏系统化审查流程。Front-End Checklist 将分散的前端最佳实践整理成385条可操作的检查规则,按优先级(Critical/High/Medium/Low)分级,每条规则配有详细说明、修复指导和验证步骤,让代码审查从"凭感觉"变成"照清单"。

为何火

7.3万GitHub星标背后是前端工程化的刚需:项目提供了三种使用方式——网页版可交互浏览和筛选、README版适合离线查阅、MCP服务器版让Claude等AI代理直接调用规则库进行代码审查。2017年创建至今持续维护,2.0版本新增MCP协议支持,使其成为首批能被AI工具原生集成的前端知识库。HN社区讨论显示开发者关注实用性细节(如sitemap是否仍必要、iPhone X适配成本),项目恰好将这些争议点系统化为可查证的规则。

核心功能

规则库体系:11个类别覆盖HTML(25条)、CSS(32条)、JavaScript(26条)、性能(43条)、无障碍(95条)、SEO(94条)、安全(22条)、图片(25条)、测试(13条)、隐私(5条)、国际化(5条),每条规则包含优先级标签、问题说明、修复建议和验证方法。

多端使用:官网frontendchecklist.io提供分类浏览和搜索,可按项目类型生成定制检查清单;README版支持Markdown原生查看;MCP服务器暴露11个工具接口,支持review_code(审查代码片段)、audit_url(审查公开网址)、search_rules(搜索规则)等操作。

AI集成:通过MCP协议让Claude等AI助手直接调用规则库,开发者可用自然语言提问"用Front-End Checklist MCP审查这个React组件",AI会自动匹配相关规则并给出高置信度建议,无需人工翻查文档。

安装

网页版:直接访问 frontendchecklist.io 无需安装

本地开发:

git clone https://github.com/thedaviddias/Front-End-Checklist.git
cd Front-End-Checklist
pnpm install
pnpm dev  # 启动本地站点

MCP集成(需支持MCP的AI工具如Claude Desktop):

# 连接公共端点
mcp.frontendchecklist.io

# 或本地运行stdio服务器
node packages/mcp/src/cli.ts

适合谁

前端团队:建立统一的代码审查标准,新人培训时作为学习大纲,Code Review时作为检查依据,上线前作为质量门禁。

独立开发者:个人项目缺乏审查环节时,按清单自查可避免低级错误(如忘记设置viewport、缺少alt属性、未压缩图片)。

技术主管:制定团队规范时参考优先级分级,Critical级别强制执行,Medium级别纳入最佳实践,Low级别作为优化方向。

AI辅助开发者:配合Claude等工具使用MCP接口,让AI基于权威规则库给建议,而非仅靠训练数据猜测。

社区评价

HN讨论(193点赞81评论)显示开发者关注实用性:有人质疑sitemap在现代SEO中的价值,维护者解释分段sitemap能在Google Search Console中提供爬取/索引比率的可观测性,对调试收录问题仍有意义;关于iPhone X适配成本的讨论反映出清单需要平衡"最佳实践"与"投入产出比",项目通过优先级标签解决这一矛盾;有开发者指出robots.txt的Disallow不能阻止页面出现在搜索结果(Google可能基于外部链接仍索引),建议用noindex标签,这类细节正是清单的价值所在——将常见误区转化为可验证的规则。正面评价集中在"系统化"和"可操作性",负面意见主要是部分规则(如charset应通过HTTP头还是meta标签设置)存在争议,但社区认可保留两种方案的必要性(页面保存后会丢失HTTP头信息)。

选型对比

vs 商业工具(如Lighthouse):Lighthouse侧重自动化性能/无障碍检测并给出评分,Front-End Checklist提供更全面的人工审查维度(如HTML语义、CSS组织、隐私合规),两者互补——Lighthouse跑自动化测试,清单覆盖需要人工判断的部分。

vs 同类清单(如webdevchecklist.com):后者更新停滞,Front-End Checklist保持活跃维护,2.0版本新增MCP支持是独有优势,且规则数量(385条)和分类粒度(11个领域)更详尽。

取舍:清单优势在于系统性和AI集成,劣势是需要人工逐条检查(虽然MCP可辅助),适合追求质量的团队;如果只需快速自动化扫描,Lighthouse等工具更高效。

已知坑

语言限制:规则说明和官网均为英文,中文团队需自行翻译或依赖AI工具辅助理解,可fork仓库后本地化规则库。

MCP网络依赖:公共MCP端点mcp.frontendchecklist.io托管在境外,国内访问可能需要代理;可选择本地运行stdio服务器,但需要Node.js环境和手动配置AI工具。

规则争议:部分规则(如HN讨论的sitemap必要性)在不同场景下适用性不同,团队应根据项目特点调整优先级,而非盲目执行全部385条。

无自动化:清单本身不提供自动检测能力(除了通过MCP让AI辅助),需要配合Lighthouse、axe等工具实现部分规则的自动化验证,纯人工检查385条规则成本较高。

维护成本:前端技术快速演进(如React Server Components、View Transitions API),清单需要持续更新才能保持相关性,团队fork后需要关注上游更新或自行补充新规则。