Thedaviddias Front End Checklist
合集@thedaviddias7.4万+开源协议: MIT
在审查与避免对表单字段使用 autofocus 相关的渲染 HTML、交互组件或设计系统模式时使用。先检查原生语义，再根据需要检查键盘行为、焦点流程、可访问名称…
code-splitting
@thedaviddias
编程协作开源协议: MIT
/**
* 在审阅大型 SPA 打包文件、新增依赖或感觉 hydration 缓慢的路由时使用。聚焦于初始视图所不需要、可以延后到路由切换、用户交互或基于视口的加载之后再加…
*/color-contrast
@thedaviddias
编程协作开源协议: MIT
/**
* 适用于所有可见文本和文本图像、UI 组件边框（输入框、按钮）、焦点指示器、传达含义的图标以及理解内容所必需的图形对象。不适用于未激活/已禁用的 UI 组件或纯装…
*/color-oklch
@thedaviddias
设计多媒体开源协议: MIT
/**
* 在构建设计令牌系统、创建无障碍调色板、以编程方式生成色阶，或迁移设计系统以支持广色域显示时使用。
*/compression
@thedaviddias
编程协作开源协议: MIT
/**
* 在排查与启用基于文本的压缩相关的页面加载缓慢、资源体积过大或渲染延迟时使用。在给出改动建议前，请先在 DevTools、Lighthouse 或线上数据中核实真…
*/consent-mode
@thedaviddias
编程协作开源协议: MIT
/**
* 在排查与“实现 Google Consent Mode v2”相关的页面加载缓慢、资源过重或渲染延迟时使用。在给出修改建议之前，应先在 DevTools、Lig…
*/consistent-help
@thedaviddias
编程协作开源协议: MIT
/**
* 当跨多页面流程（如结账、引导、账号恢复或支持流程）审查支持 UI 时使用。在同一变体下比较多个页面，而不是单独审查单一页面。
*/console-cleanup
@thedaviddias
编程协作开源协议: MIT
/**
* 用于审查与"在生产环境中移除 console 语句"相关的脚本、客户端组件、打包产物或运行时行为时使用。应同时检查源代码与浏览器执行路径，以便定位真正的瓶颈或 …
*/const-let
@thedaviddias
编程协作开源协议: MIT
/**
* 在审查与「优先使用 const 和 let 而非 var」相关的脚本、客户端组件、打包产物或运行时行为时使用。需要同时检查源代码和浏览器执行路径，以便修复能针对…
*/contact-page
@thedaviddias
编程协作开源协议: MIT
/**
* 在审计与创建全面的联系页面相关的元数据、可抓取性、结构化数据或可索引性时使用。需验证渲染后的 HTML 与 HTTP 响应，而不仅依赖源文件。
*/container-queries
@thedaviddias
编程协作开源协议: MIT
/**
* 用于审查与组件级响应式相关的样式表、组件样式和响应行为时使用。使用容器查询实现组件级响应式。在提出修复方案之前，应在跨断点和交互状态下检查渲染后的布局。
*/content-dates
@thedaviddias
编程协作开源协议: MIT
/**
* 在审计文章或博客页面的日期标记、生成带有 datePublished/dateModified 的 Article JSON-LD，或检查 CMS 模板是否正确…
*/content-security-policy
@thedaviddias
编程协作开源协议: MIT
/**
* 用于审查与实施内容安全策略相关的响应头、表单、Cookie 或第三方集成时使用。在类生产环境中验证浏览器与 HTTP 的实际生效行为。
*/content-without-css
@thedaviddias
编程协作开源协议: MIT
/**
* 在审阅渲染后的 HTML、布局组件或设计系统模式时使用，以检查其含义是否依赖于视觉呈现。需要检查 DOM 顺序、语义结构、表单关联，以及由 CSS 生成内容（g…
*/contract-testing
@thedaviddias
编程协作开源协议: MIT
/**
* 在为前后端 API 边界搭建集成测试、评估两个服务是否可独立安全部署，或用契约测试替换缓慢的端到端测试时使用。
*/cookie-consent
@thedaviddias
编程协作开源协议: MIT
/**
* 在对网站进行 GDPR/CCPA 合规审查时使用，特别是检查是否在设置非必要 cookie 之前获得了 cookie 同意。
*/critical-images
@thedaviddias
编程协作开源协议: MIT
/**
* 用于审查与“优先加载关键图像”相关的图像资源、标记以及 CDN 或构建转换。综合检查编码尺寸、渲染尺寸、加载策略和对首屏体验的影响。
*/critical-request-chains
@thedaviddias
编程协作开源协议: MIT
/**
* 用于审计页面加载缓慢、资源过重或与最小化关键请求链相关的渲染延迟。在建议更改之前，请先在 DevTools、Lighthouse 或线上数据中验证实际的瓶颈。
*/cross-browser-testing
@thedaviddias
编程协作开源协议: MIT
/**
* 在审查与“在所有主流浏览器上进行测试”相关的 CI 覆盖、自动化检查或测试策略时使用。重点关注该规则是否被持续验证，而非仅仅停留在文档层面。
*/cross-origin-isolation
@thedaviddias
编程协作开源协议: MIT
/**
* 用于审查对安全敏感的 Web 应用、SharedArrayBuffer 使用、Worker 密集型应用、编辑器或需要跨源隔离的测量功能时使用。需要同时检查响应头…
*/cross-origin-security
@thedaviddias
编程协作开源协议: MIT
/**
* 在审查与安全处理跨源请求相关的脚本、客户端组件、打包产物或运行时行为时使用。需同时检查源码和浏览器执行路径，以便修复真正影响性能或导致缺陷的环节。
*/css-at-property
@thedaviddias
编程协作开源协议: MIT
/**
* 用于实现动画渐变、涉及自定义属性值的复杂 CSS 过渡，或构建在自定义属性误用时应产生可见错误的类型化设计令牌系统。
*/css-containment
@thedaviddias
编程协作开源协议: MIT
/**
* 用于审查与「使用 CSS containment 限制重绘范围」相关的样式表、组件样式以及响应式行为。在提出修复方案之前，请先在各个断点和交互状态下检查渲染后的…
*/css-critical
@thedaviddias
流程自动化开源协议: MIT
/**
* 用于审查与内联关键 CSS（以加快渲染）相关的样式表、组件样式以及响应式行为。在提出修复方案前，需先检查渲染布局在不同断点和交互状态下的表现。
*/css-custom-properties
@thedaviddias
编程协作开源协议: MIT
/**
* 在审查与设计令牌相关的样式表、组件样式和响应式行为时使用。在提出修复方案之前，先在不同断点和交互状态下检查渲染后的布局。
*/