thedaviddias/Front-End-Checklist：现代网络开发、人类和人工智能代理的基本清单🗂

前端检查表是针对人类和人工智能代理的开源前端质量系统。它将前端最佳实践转化为实用的审查工作流程，您可以在网络上浏览、使用MPP兼容的工具运行或直接在此REAUTE中进行处理。- 网站：前台清单。

io- 规则：正面清单。io/规则- HCP服务器：mcp。正面清单。io配套项目：面向开发人员的UX Patterns帮助开发人员在使用前端检查表验证实施质量之前选择正确的UI模式。

重要请使用网站进行浏览和过滤，使用HCP服务器进行代理工作流程，并在您希望将检查清单放在一个地方时使用此REAUTE。

385英国规则跨越11活跃类别11托管服务器公开的LCP工具-包含解释、补救指南和验证步骤的规则页面- 从下面的类别导航器开始，直接跳到您需要的检查表部分。- 检查适用于您的项目、审核或拉式请求的复选框项。

- 当您需要完整的指导、示例、验证步骤和AI提示时，请打开链接的规则页面。- 使用frontendchecklist。用于交互式浏览的io和mcp。正面清单。io当您希望代理直接使用相同的规则库时。

- 意味着应该首先解决的破坏站点、合规敏感或安全敏感问题。- 是指对用户体验、可访问性、性能或可操作性产生重大影响的问题。

- 意味着强大的最佳实践，这些实践应该成为正常前端质量审查的一部分。- 意味着基于情境或较低紧迫性的有用改进。- 在前台检查表中探索所有规则。io/规则- 在前面使用精心策划的检查清单。io/检查清单- 打开类别页面以获取重点审计和实施指导前端清单可帮助您审查实施质量。

如果您仍在决定构建什么样的界面，请使用UX Patterns for Devs来比较常见的UI模式，了解权衡，并找到表单，导航，数据显示，反馈状态，身份验证和AI界面的实用指南。

- 安装依赖项：pnPM安装- 运行本地开发：pnPM发展- 收件箱结构：pnPM验证：规则结构- 对素材进行评分：pnpm评分：规则- 重新生成衍生工件：pnpm generate：技能andpnpm generate：readme将支持MVP的代理连接到前端清单，

以在React，Next中进行前端代码审查、结构化规则查找、审计和补救工作流。js、HTML、CSS、JavaScript、可访问性、性能、SEO、安全性、图像、隐私、i18 n和测试。

尖端最佳首次用途：将具有MPP能力的代理指向真实的组件、页面或公共URL，并明确要求其首先使用前端清单HCP来获取最高可信度的前端调查结果。一些客户端会懒惰地发现已安装的LCP工具，因此在提示符中命名服务器会有所帮助。

- 公共端点：mcp。正面清单。

io- 公共文档：前端检查表。

国际组织/多边合作方案- 本地/编辑器集成：stdio服务器位于packages/mcp/src/footswitch. ts你可以做什么：- 对照检查表检查粘贴的代码或文件内容- 审核实时公共URL- 获取包含补救指导的特定规则- 按关键词、

类别或优先级搜索规则- 获取重点审计的工作流程或快速参考代理使用指南：- 使用评论_代码首先用于粘贴HTML、CSS、JavaScript、React或Next。

js代码-使用搜索规则在做出前端可访问性、性能、SEO、安全性或图像建议之前-使用获取_工作流程orget_checklist_rules用于启动、可访问性、SEO、安全和绩效审计-使用audit_url对于犹太人：//页示例提示：

使用前端检查表LCP审查此React组件并首先报告最高置信度的调查结果。使用前端检查表LCP审核https：//example。com来解决可访问性、性能和SEO问题。使用前端检查表LCP解释规范的URL规则，并通过代码示例提出修复建议。

当您希望在支持它们的工具中提供可重复使用的审计工作流程或有针对性的特定规则指南时，请安装前端清单技能。

安装：npx技能添加前台清单/技能npx技能添加前台清单/技能--技能https有用的切入点：- 全球审计切入点：skills/frontend-checklist-global/SKILL。

MD- 重点规则技能示例：skills/https/SKILL。

MD示例使用：- 针对完整的前端清单库进行广泛的前端审计- 使用专注的技能，

例如https针对一个问题进行安全审查-使用特定于规则的技能来解释规则为何重要以及如何修复它- HTML（25）·在网站上打开- CSS（32）·在网站上打开- JavaScript（26）·在网站上打开- 性能（43）·网站上打开- 无障碍（95）·在网站上打开- SE

O（94）·在网站上打开- 安全（22）·网站打开- 图片（25）·在网站上打开- 测试（13）·在网站上打开- 隐私（5）·在网站上打开- 国际化（5）·网站开放25条规则。语义标记、元数据、表单和文档结构规则。

在前台清单上浏览HTML。io- 将子资源完整性添加到外部脚本：在从CDO加载的外部脚本和样式表上使用子资源完整性（SRI）哈希属性，以确保内容未被篡改。- 将缩略图添加到视频：HTML5视频元素应该具有海报属性，提供在视频加载或播放之前显示的缩略图图像。

- 创建自定义404错误页面：自定义404错误页面为丢失的用户设计了有用的导航选项。- 十进制UTF-8字符编码：字符集（UTF-8）被正确声明为头部的第一个元素。- 确保所有ID都是唯一的：所有ID属性在文档中都是唯一的。

页面上不存在重复的ID。

- 实现可访问的面包屑导航：面包屑导航是通过适当的语义标记和ARIA属性实现的，以实现可访问性。- 为所有设备实现favicon：为浏览器、设备和PWA支持实现所有必要的favicon格式。- 链接Web应用程序清单以获取可安装性：包括Web应用程序清单（清单。

json）从HTML头部链接，以启用渐进式Web App功能，例如主屏幕安装、独立显示和启动屏幕。

- 使用defer、deflc或type=module加载脚本：通过在脚本标记上使用defer、deflc或type=module属性来防止JavaScript阻止HTML解析，这样浏览器就可以在脚本下载时继续构建DOM。

- 使自定义元素和Web组件可访问：自定义元素必须通过ElementInternals、键盘交互和表单关联实现ARIA反射，以便屏幕阅读器和辅助技术能够正确解释它们。- 使文件上传可访问：可以通过适当的标签、文件类型限制和进度反馈访问文件上传组件。

- 使翻页可访问：通过适当的ARIA标签、键盘导航和当前页面指示可以访问翻页控件。- 使搜索输入可访问：通过适当的输入类型、标签、角色和自动完成建议，可以访问搜索功能。

- 通过字幕访问视频：视频具有字幕、音频描述、文字记录、暂停控制，并避免为有听力、视力或认知障碍的用户自动播放。- 满足PWA可安装标准：Web应用程序满足浏览器的最低PWA可安装要求：有效的Web应用程序清单、注册的服务工作者、HTTPS和可屏蔽图标。

- 提供noscift后备内容：noscift标签为禁用JavaScript的用户提供后备内容。- 在生产环境中删除注释和调试代码：在部署到生产环境之前，将删除不必要的代码、注释和调试元素。

- 为RTL语言设置文本方向：dis属性用于从右到左（RTL）读取或混合内容的语言。- 设置