Thedaviddias Front End Checklist
合集@thedaviddias7.4万+开源协议: MIT
在审查与避免对表单字段使用 autofocus 相关的渲染 HTML、交互组件或设计系统模式时使用。先检查原生语义，再根据需要检查键盘行为、焦点流程、可访问名称…
duplicate-js
@thedaviddias
编程协作开源协议: MIT
/**
* 在排查与移除重复的 JavaScript 库相关的页面加载缓慢、资源过重或渲染延迟时使用。在提出修改建议之前，请先通过 DevTools、Lighthouse …
*/e2e-testing
@thedaviddias
编程协作开源协议: MIT
/**
* 在审查 CI 覆盖范围、自动化检查或与“实施端到端测试”相关的测试策略时使用。重点关注规则是否被持续验证，而不仅仅是有文档记录。
*/editorial-policy
@thedaviddias
编程协作开源协议: MIT
/**
* 在对博客、新闻网站或 YMYL 内容网站进行信任信号审计、撰写编辑政策页面内容，或评估网站是否满足 Google 质量评估员的可信度标准时使用。
*/element-hiding
@thedaviddias
编程协作开源协议: MIT
/**
* 用于审查网站中由广告拦截过滤规则（针对常见广告相关的 class 名与 ID）所引发的布局与功能问题。
*/embedded-or-inline-css
@thedaviddias
编程协作开源协议: MIT
/**
* 用于审查与避免使用嵌入式和内联 CSS 相关的样式表、组件样式以及响应式行为。在提出修复方案前，先在不同断点和交互状态下检查渲染后的布局。
*/empty-heading
@thedaviddias
编程协作开源协议: MIT
/**
* 用于审查与「确保标题包含文本」相关的渲染后 HTML、交互组件或设计系统模式时使用。优先检查原生语义，然后根据需要检视键盘行为、焦点流转、可访问名称以及屏幕阅读…
*/empty-links
@thedaviddias
编程协作开源协议: MIT
/**
* 在审查与修复空链接和失效链接相关的渲染 HTML、交互组件或设计系统模式时使用。首先检查原生语义,然后在相关场景下检查键盘行为、焦点流、可访问名称以及屏幕阅读器…
*/error-handling
@thedaviddias
编程协作开源协议: MIT
/**
* 在审查与“实现适当的错误处理”相关的脚本、客户端组件、打包产物或运行时行为时使用。同时检查源代码与浏览器执行路径，以便修复真正针对性能瓶颈或缺陷。
*/error-images
@thedaviddias
编程协作开源协议: MIT
/**
* 用于审查与「优雅地处理图片加载错误」相关的图片资源、标记以及 CDN 或构建转换。综合检查编码后尺寸、渲染尺寸、加载策略及其对首屏内容的影响。
*/error-monitoring
@thedaviddias
编程协作开源协议: MIT
/**
* 用于在新项目中搭建生产可观测性体系、审视事件响应就绪情况，或排查为何错误未被检测到时使用。
*/es-modules
@thedaviddias
编程协作开源协议: MIT
/**
* 在审查与使用 ES 模块（import/export）相关的脚本、客户端组件、打包产物或运行时行为时使用。需同时检查源码与浏览器执行路径，以便定位真正的瓶颈或缺…
*/event-delegation
@thedaviddias
编程协作开源协议: MIT
/**
* 在审查与“为动态内容使用事件委托”相关的脚本、客户端组件、打包产物或运行时行为时使用。同时检查源代码与浏览器中的执行路径，以确保修复针对的是真正的瓶颈或缺陷。
*/external-links
@thedaviddias
编程协作开源协议: MIT
/**
* 用于审计内容页面的引用质量、为事实主张建议权威来源链接，或检查页面外部链接属性（nofollow、noopener）是否正确设置。
*/faq
@thedaviddias
设计多媒体开源协议: MIT
/**
* 在向落地页或博客文章添加 FAQ 部分、从现有问答内容生成 FAQPage JSON-LD，或验证带 FAQ 部分的页面上的结构化数据在语法和语义上是否正确时使…
*/favicon
@thedaviddias
编程协作开源协议: MIT
/**
* 用于检查站点是否正确配置了 favicon、审计 `<head>` 中的 `<link rel='icon'>` 标签，或为新项目搭建 favicon 基础设施…
*/favicons
@thedaviddias
编程协作开源协议: MIT
/**
* 用于审查与「为所有设备实现 favicon」相关的模板、渲染后的 HTML 或共享组件时使用。验证最终面向浏览器的标记，而不仅仅是源码框架中的抽象。
*/fetchpriority-attribute
@thedaviddias
编程协作开源协议: MIT
/**
* 用于优化 Largest Contentful Paint（LCP）、减少资源争用造成的渲染阻塞，或微调关键渲染路径中的资源加载顺序。
*/figure-figcaption
@thedaviddias
编程协作开源协议: MIT
/**
* Use when reviewing image assets, markup, and CDN or build transforms related to
*/file-upload-accessibility
@thedaviddias
编程协作开源协议: MIT
/**
* 在审查与“让文件上传具备可访问性”相关的模板、渲染后的 HTML 或共享组件时使用。请验证最终面向浏览器的标记，而非仅校验源码中的框架抽象。
*/filename-quality
@thedaviddias
编程协作开源协议: MIT
/**
* 在审查图像资源、标记以及 CDN 或构建相关的转换时使用，应检查图像文件名是否具有描述性。需同时核对编码后大小、渲染尺寸、加载策略以及首屏（above-the-…
*/find-npm-packages
@thedaviddias
流程自动化开源协议: MIT
/**
* 当你需要为某个前端清单规则查找 2–3 个最流行且维护良好的 npm 包、验证它们是否满足质量阈值，并将它们添加到规则的 frontmatter 时使用。
*/first-contentful-paint
@thedaviddias
编程协作开源协议: MIT
/**
* 用于审查与“优化首次内容绘制 (FCP)”相关的慢速页面加载、庞大资源或渲染延迟问题。在给出改进建议之前，请先在 DevTools、Lighthouse 或线上…
*/flashing-content
@thedaviddias
编程协作开源协议: MIT
/**
* 在审查渲染后的 HTML、交互组件或与「防止引发癫痫的闪烁内容」相关的设计系统模式时使用。优先检查原生语义，然后按需检视键盘行为、焦点流转、可访问名称以及屏幕阅…
*/flexbox-patterns
@thedaviddias
编程协作开源协议: MIT
/**
* 在审查与“应用 Flexbox 最佳实践”相关的样式表、组件样式和响应式行为时使用。提出修复方案前，请检查不同断点及交互状态下的渲染布局。
*/