القائمة
对前端代码进行全面的代码审查，包括代码规范、性能优化、可访问性、安全性、TypeScript类型检查、React/Vue等框架最佳实践。在以下场景使用：(1) 审查前端代码质量，(2) 检查性能问题，(3) 验证可访问性，(4) 发现安全漏洞，(5) TypeScript类型检查，(6) 框架特定最佳实践检查
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
使用 ImageMagick 压缩本地图片文件，使用 ffmpeg 压缩本地视频文件。当 Codex 需要缩小 JPEG、PNG、WebP、HEIC、TIFF、MP4、MOV、MKV 或其他本地媒体体积时使用；适用于批量压缩文件夹、分享前缩放图片、将照片或截图默认转换为同目录同名 WebP、将视频默认压缩为同路径 MP4/H.265，保留源文件时输出到 compressed 压缩目录并镜像源目录结构，并在压缩成功后检查输出尺寸、重试 0KB 输出、默认删除或替换原文件并汇报压缩前后体积变化。
在用户需要查询 YAPI 接口文档、确认请求参数、查看响应结构、按路径或标题定位接口定义、核对某个接口的 body schema、或希望从 YAPI 拉取最新文档时使用。只要用户提到"查 YAPI""接口文档""请求参数""响应体""某个 path 的定义""YAPI 上这个接口怎么写"，即使没有明确点名这个 skill，也应优先使用。
根据 git diff 分析变更并生成符合 Conventional Commits 规范的提交信息。当用户提到"写commit"、"提交信息"、"commit message"、"帮我提交"、"整理改动"、"拆分提交"、暂存区代码变更、或需要按约定式提交规范撰写消息时使用此技能。生成后展示给用户确认，不主动执行 git commit。
自动生成周报。当用户说"写周报"、"生成本周总结"时触发。
蓝湖应用开发技能，用于构建和管理蓝湖相关的应用功能
| name | frontend-code-review |
| description | 对前端代码进行全面的代码审查，包括代码规范、性能优化、可访问性、安全性、TypeScript类型检查、React/Vue等框架最佳实践。在以下场景使用：(1) 审查前端代码质量，(2) 检查性能问题，(3) 验证可访问性，(4) 发现安全漏洞，(5) TypeScript类型检查，(6) 框架特定最佳实践检查 |
对前端代码进行全面的代码审查，确保代码质量、性能、可访问性、安全性和最佳实践符合行业标准。
按照上述8个维度逐项检查每个文件：
生成结构化的审查报告，包含：
审查单个文件：
请审查这个文件：/path/to/component.tsx
审查多个文件：
请审查以下文件：
- /path/to/component1.tsx
- /path/to/component2.vue
- /path/to/utils.ts
审查代码片段：
请审查这段代码：
[粘贴代码]
特定维度审查：
请重点检查这个组件的性能问题
## 代码审查报告
### 概述
- 审查文件数：5
- 发现问题：12
- 阻塞问题：1
- 严重问题：3
- 一般问题：5
- 建议：3
### 组件：UserProfile.tsx
#### P0 - 阻塞
1. **安全风险**：第45行使用dangerouslySetInnerHTML渲染用户输入
```typescript
// 问题代码
<div dangerouslySetInnerHTML={{ __html: user.bio }} />
// 建议修复
<div>{user.bio}</div>
// 或如果需要富文本，使用DOMPurify清理
<div dangerouslySetInnerHTML={{
__html: DOMPurify.sanitize(user.bio)
}} />
// 问题代码
useEffect(() => {
fetchUserData();
}); // 缺少依赖，每次渲染都会执行
// 建议修复
useEffect(() => {
fetchUserData();
}, [userId]);
## 参考资料
- [React官方文档 - 最佳实践](https://react.dev/learn)
- [Vue.js风格指南](https://vuejs.org/style-guide/)
- [TypeScript深度手册](https://basarat.gitbook.io/typescript/)
- [Web可访问性指南(WCAG)](https://www.w3.org/WAI/WCAG21/quickref/)
- [OWASP前端安全](https://owasp.org/www-project-web-security-testing-guide/)
- [Google Web性能优化](https://web.dev/performance-scoring/)