front-end-checklist
一个包含385条规则的前端质量检查清单，用于代码审查与质量审计。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：front-end-checklist。 它的用途是：一个包含385条规则的前端质量检查清单，用于代码审查与质量审计。 完整的 Skill 内容见：https://321skill.com/skills/front-end-checklist/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“请使用Front-End Checklist MCP工具，审查我刚写的这个React组件代码，重点检查可访问性和性能方面的问题。”，它会连接到MCP服务器，调用相关的规则库，对你的代码进行结构化分析，并列出不符合最佳实践的具体条目、解释原因并提供修复建议。
介绍
Front-End Checklist 是一个开源的前端质量体系，旨在将前端开发的最佳实践转化为可执行的审查工作流。它解决了开发者在项目开发、代码审查或上线前审计时，难以系统性地检查前端代码质量、性能、可访问性、SEO和安全等综合问题。
该清单提供了涵盖11个类别的385条英文规则，每条规则都附有详细的解释、修复指导和验证步骤。你可以通过其网站进行交互式浏览和筛选，也可以直接阅读README文件获取完整的清单内容。更重要的是，它提供了MCP服务器，允许AI智能体直接调用这些规则，在你的开发环境中进行自动化审查。
它非常适合前端开发、全栈开发、测试工程师以及项目经理等角色，用于在开发周期中确保代码质量，或在发布前进行系统性审计。对于智能体开发者而言，这也是一个高质量、结构化的规则知识库，可以集成到自己的AI工具中。
使用建议是，对于人工审查，建议使用网站进行交互式筛选；对于集成到自动化流程或希望AI助手参与审查，则优先使用其MCP服务器。在开始编码前，可以先参考其配套项目“UX Patterns for Devs”来确定合适的UI模式，再使用本清单来验证实现质量。
核心特点
它不仅是一个静态的检查列表，更是一个可通过MCP协议被AI智能体直接调用的结构化规则库，实现了前端质量审查的“人机协同”。其规则库庞大且分类细致（11类385条），并提供了从解释、修复到验证的完整指导链路。
注意事项
主要面向Web前端技术栈（HTML/CSS/JS及相关框架），对于原生移动应用或桌面应用开发场景的针对性较弱。
常见问题
Front-End Checklist 怎么用？
可通过网站浏览规则，使用README清单手动检查，或通过MCP服务器让AI智能体自动调用规则进行审查。
这个清单包含哪些方面的检查？
涵盖性能、可访问性、SEO、安全、代码质量、i18n、测试等11个前端核心领域。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/front-end-checklist/raw/index.md 读取 front-end-checklist 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/front-end-checklist/raw/index.md（查看排版版本）