MCP Front-End-Checklist 面向人与AI的前端质量清单

前端上线前到底该检查什么？很多团队靠记忆或零散的清单，结果漏了 SEO、可访问性、性能、安全里的某一项，上线后才后悔。Front-End-Checklist 把现代前端最佳实践系统化成一份可执行的检查体系，既给人用，也给 AI agent 用。

Front-End-Checklist 是面向“人和 AI 智能体”的开源前端质量系统。它把 386 条英文规则、11 个分类整理成可浏览、可过滤、可接入工作流的清单，并额外提供 MCP 服务让 agent 直接参与 review。

项目基本信息

一、项目介绍

它提供三种使用入口：网站用于浏览和过滤，MCP 服务用于 agent 工作流，README 用于一次性通读。每条规则都配有解释、修复建议与验证步骤，甚至给出可直接套用的 AI 提示词。

二、核心优势

• 386 条规则、11 个分类，覆盖全面。
• 同时服务人类与 AI：MCP 服务暴露 11 个工具。
• 规则页带解释、修复指引与验证步骤。
• MIT 协议，可自由集成到 CI。

三、适用场景

• 上线前的前端质量门禁（PR / 审计）。
• 让编码 agent 在提交前自动对照清单。
• 团队统一前端交付标准。

四、安装教程

# 作为技能接入编码助手
npx skills add frontendchecklist/skills
npx skills add frontendchecklist/skills --skill https

也可直接使用托管版网站或 MCP 服务（mcp.frontendchecklist.io）。常见报错：npx skills 首次运行会拉取资源，网络慢时耐心等待；企业内网建议改用自托管 MCP。

五、使用示例

把清单接进 agent 后，让它在 PR 里自检：

对照 Front-End Checklist 的 SEO 与安全分类，审查本次改动

示意输出：

✓ 标题/描述已配置
✓ 图片有 alt
⚠ 缺少 CSP 头 → 建议添加

六、常见问题

• Q：规则会过时吗？ A：社区持续维护，且分门别类便于局部更新。
• Q：能进 CI 吗？ A：可以通过 MCP 或脚本化调用做自动化卡点。
• Q：语言？ A：规则以英文为主。

七、总结

Front-End-Checklist 把“上线前该查什么”变成一套可机读、可自动化的体系。对人它是清单，对 AI 它是工具——双轨设计让它比单纯文档更有用。