Skill 广场
Web前端最佳实践审查 Skill

Web前端最佳实践审查.Skill

@addyosmani/best-practices

4.6优秀AI 评分基础检查通过源自 GitHub

输入前端代码或页面地址,执行安全、兼容性与质量审查,输出符合Lighthouse标准的修复建议与代码范式。

编程Web前端开发工程师全栈开发者前端技术负责人2026-09-29 更新main

Web前端最佳实践审查

本功能基于 Lighthouse 最佳实践标准,全面审查 Web 前端应用的安全性、浏览器兼容性和代码健康度。用户只需提供前端代码片段、配置文件或运行中的页面链接,它即可检测废弃 API、混合内容、缺少安全响应头、内存泄漏风险、不规范 HTML 结构及生产环境源码泄露问题,并提供标准修复示例与落地清单,帮助开发者在上线前消除隐患并提升整体质量。

常见场景

它能帮你做什么?

01

项目上线前安全审计:排查 CSP 配置、混合内容、SRI 校验与生产环境 Source Map 泄露风险。

02

老旧前端代码现代化改造:检测并替换 document.write、同步 XHR 等已废弃 API 及低效事件监听。

03

Lighthouse最佳实践提分:修复 HTML 语义化缺失、字符编码位置不当与视口配置错误等扣分项。

三步完成

怎么使用

1安装 Skill

把右侧安装请求发给你的 AI。

2说清楚目标

告诉 AI 你想完成什么,或直接贴入内容。

3检查结果

按需要继续调整语气、范围或格式。

复制就能用

你可以直接这样说

“请帮我审查这段 HTML 和 JavaScript 代码,排查是否存在不符合现代 Web 最佳实践的废弃 API 和安全问题。”

“我们的前端项目即将发布生产环境,请根据 Lighthouse 最佳实践检查这份 Vite 构建配置与 CSP 响应头。”

“检查这个组件里的事件监听和 DOM 操作代码,看看有没有潜在的内存泄漏风险并给出重构方案。”

适用人群

适合谁?

Web前端开发工程师全栈开发者前端技术负责人Web安全测试人员

上手门槛

使用难度

进阶

需要了解任务流程,页面已整理好使用步骤。

兼容范围

支持哪些 AI?

Codex可直接使用
Claude Code可直接使用
OpenClaw可直接使用
Hermes Agent可直接使用
国内 Agent可直接使用

中文用户增强

Skill Px 做了什么?

中文说明简化使用方式补充中文案例整理安装流程降低理解难度