用途
该技能面向现代 Web 开发，提供一套基于 Lighthouse 最佳实践审计的标准与模式，用于在安全、浏览器兼容性和代码质量方面统一落地最佳实践。当被要求“应用最佳实践”“安全审计”等任务时，可据此逐项检查与修改代码。
主要能力
安全
- 强制 HTTPS：避免混合内容，所有资源使用 https:// 加载；配置 HSTS 响应头（Strict-Transport-Security: max-age=31536000; includeSubDomains; preload）。
- 内容安全策略（CSP）：可通过 meta 标签或（推荐的）HTTP 响应头配置 default-src、script-src、style-src、img-src、connect-src、frame-ancestors、base-uri、form-action 等指令；内联脚本使用 nonce 放行。
- 安全响应头：X-Frame-Options: DENY 防点击劫持；X-Content-Type-Options: nosniff 防 MIME 嗅探；X-XSS-Protection: 1; mode=block（旧浏览器）；Referrer-Policy: strict-origin-when-cross-origin；Permissions-Policy 限制地理位置、麦克风、摄像头等。
- 依赖漏洞检查：使用 npm audit、yarn audit、npm audit fix、npm ls 检查与修复；可在 package.json 中配置 audit 与 update 脚本；避免原型污染风险模式（如直接 Object.assign 或 _.merge 用户输入），改用 JSON 深拷贝等更安全方式。
- 输入净化：避免 innerHTML / document.write 直接写入用户输入，优先使用 textContent；必须渲染 HTML 时使用 DOMPurify.sanitize。
- 安全 Cookie：服务端设置 Set-Cookie 时使用 Secure、HttpOnly、SameSite=Strict、Path=/。
浏览器兼容性
- 使用 HTML5 doctype（<!DOCTYPE html>）并声明 lang。
- 字符编码 meta charset="UTF-8" 放在 head 的第一个元素位置。
- 声明响应式 viewport：width=device-width, initial-scale=1。
- 使用特性检测而非浏览器检测（如 'IntersectionObserver' in window），CSS 使用 @supports。
- 按需加载 polyfill（条件加载或 polyfill.io）。
- 避免废弃 API：document.write、同步 XHR、Application Cache；改用动态脚本加载、异步 fetch、Service Workers。
- 触摸与滚轮事件使用 passive: true 监听器，需要 preventDefault 时显式设为 passive: false。
代码质量与错误处理
- 生产环境不残留 console 调试输出，使用 try/catch 捕获并上报错误，向用户展示友好提示。
- React 使用 ErrorBoundary（getDerivedStateFromError、componentDidCatch）兜底 UI。
- 全局监听 error 与 unhandledrejection 事件上报异常。
- Source map：生产环境使用 hidden-source-map 或关闭，避免源码暴露。
性能最佳实践
- 脚本使用 defer，避免阻塞；CSS 使用 link 标签并行加载而非 @import。
- 使用事件委托替代逐元素绑定事件处理器。
- 及时移除事件监听器或使用 AbortController 清理，避免内存泄漏。
代码质量（HTML）
- 保证 HTML 有效：避免重复 ID、非法子元素、非法嵌套（如 a 内嵌 button）。
- 使用语义化 HTML5 元素（header、nav、main、article、h1 等）。
- 图片保持正确宽高比，必要时使用 object-fit。
权限与隐私
- 权限请求应在用户操作上下文中触发并说明原因，而非页面加载时直接请求。
- 通过 Permissions-Policy 限制或按来源开放强大特性。
使用方式
该技能以检查清单与代码示例形式提供，可直接对照审计清单逐项核查：安全（HTTPS、依赖漏洞、CSP、安全头、source map 暴露）、兼容性（doctype、charset、viewport、废弃 API、passive 监听器）、代码质量（控制台错误、有效 HTML、语义化、错误处理、内存清理）、UX（无侵入式插页、上下文权限请求、清晰错误信息、图片宽高比）。
适用场景
- 对现有 Web 项目进行安全审计与最佳实践整改。
- 新项目搭建时统一安全头、CSP、兼容性与代码质量规范。
- 代码评审中检查依赖漏洞、废弃 API、事件监听器与错误处理。
限制
资料未提供该技能的具体安装命令、运行环境要求、支持的框架版本范围、收费方式与价格信息，暂未提供。