메뉴
对前端代码进行全面的代码审查，包括代码规范、性能优化、可访问性、安全性、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/)