Front-End Checklist 前端检查清单

项目概览

Front-End Checklist 是一套开源的前端质量检查体系，把现代 Web 开发中的最佳实践整理成可勾选、可检索的规则清单。它既可以在网页上交互浏览，也可以通过 MCP 服务交给 AI 智能体执行，还能直接在本仓库 README 中逐条核对。

• 官网：frontendchecklist.io
• 规则库：frontendchecklist.io/rules
• MCP 服务：mcp.frontendchecklist.io

规则覆盖范围

当前共 386 条英文规则，分布在 11 个类别中：

• HTML（25）：语义化标记、元数据、表单与文档结构
• CSS（32）：样式组织与兼容性
• JavaScript（26）：脚本质量与安全
• Performance（44）：加载与渲染性能
• Accessibility（95）：无障碍访问
• SEO（94）：搜索引擎优化
• Security（22）：安全防护
• Images（25）：图片资源处理
• Testing（13）：测试相关
• Privacy（5）：隐私合规
• Internationalization（5）：国际化

每条规则都标注优先级（Critical / High / Medium / Low），并提供说明、修复建议与验证步骤。

三种使用方式

1. 网页浏览

在官网按类别筛选规则，适合人工审计和团队讨论。

2. 通过 MCP 交给智能体

将支持 MCP 的智能体连接到 mcp.frontendchecklist.io，即可让它按同一套规则审查代码或线上页面。常见能力包括：

• review_code：审查粘贴的 HTML/CSS/JS/React/Next.js 代码
• search_rules：按关键词、类别或优先级检索规则
• audit_url：审计公开的 https 页面
• get_workflow / get_checklist_rules：获取专项审计流程

示例提示词：

Use the Front-End Checklist MCP to review this React component and report the highest-confidence findings first.

3. 安装 Skills

在支持 Skills 的工具中安装可复用的审计工作流：

npx skills add frontendchecklist/skills
npx skills add frontendchecklist/skills --skill https

本地开发与贡献

仓库使用 pnpm 管理，常见命令包括：

pnpm install
pnpm dev
pnpm validate:rule-structure
pnpm score:rules
pnpm generate:skills
pnpm generate:readme

适用建议

如果团队正在建立前端质量基线，可以把该清单作为 PR 评审模板；如果已经在用 AI 编码助手，接入 MCP 后可以让智能体在提交前自动跑一遍规则检查。注意规则为英文，中文团队可结合自身规范做本地化裁剪。