원클릭으로 Manus에서 모든 스킬 실행

시작하기

frontend-code-review

스타68

포크8

업데이트2026년 1월 6일 08:59

当用户需要对前端代码进行全面审查时使用此技能，包括 React、Vue、Angular 或原生 JavaScript/TypeScript 项目。适用于代码审查、Pull Request 评审、性能审计、安全检查等场景。

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

bamzc

bamzc/claude-skills-frontend

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

前端代码审查技能

技能用途

对前端代码进行系统化审查，涵盖代码质量、性能、安全、可访问性等多个维度。支持 React、Vue、Angular 和原生 JavaScript/TypeScript 项目。

审查工作流程

第一步：识别项目类型和范围

执行以下识别工作：

确定框架类型（React、Vue、Angular、原生 JS/TS）
评估代码规模（单组件、功能模块、完整应用）
检查明显的语法错误、格式问题或导入错误

第二步：多维度系统审查

按照以下维度逐一审查代码：

代码质量

检查命名是否语义化且一致
识别代码重复和可重构的机会
确认函数/组件是否遵循单一职责原则
评估文件组织和模块结构的合理性

功能实现

验证业务逻辑正确性
检查边界情况和错误处理
审查异步操作处理（Promise、async/await）
确认加载状态和错误状态的用户反馈机制

性能优化

识别不必要的组件重渲染
检查列表渲染的 key 使用是否正确
评估对打包体积的影响
审查图片优化策略（格式、懒加载、响应式）
检查网络请求效率（缓存、去重、防抖节流）

安全性

检测 XSS 漏洞（未转义输入、dangerouslySetInnerHTML 使用）
验证输入验证和数据清洗
审查敏感数据处理（localStorage、API 令牌）
检查 CSRF 保护机制
评估第三方依赖的安全风险

可访问性 (a11y)

检查语义化 HTML 的使用
验证 ARIA 属性的正确性
测试键盘导航支持
检查颜色对比度
确认图片 alt 文本和表单 label

框架特定模式

React:

检查 Hook 使用（useEffect 依赖数组、自定义 Hook 设计）
识别闭包陷阱
验证受控与非受控组件的正确使用
评估 Context 使用的适当性
审查状态管理设计（本地 vs 全局）

Vue 3 Composition API:

检查 ref/reactive 使用是否合理
验证 computed/watch 使用是否正确
评估组件通信方式（props/emit/provide/inject）
检查生命周期钩子使用
审查组合函数（Composables）抽取是否合理

TypeScript:

验证类型定义的准确性和完整性
识别 any 类型的过度使用
检查泛型使用的合理性
评估接口/类型的可复用性

浏览器兼容性

检查目标浏览器支持的特性
验证 CSS 供应商前缀
评估 polyfill 必要性
审查响应式设计实现

第三步：生成结构化报告

使用以下格式输出审查结果：

## 🔍 代码审查报告

### 文件：[文件路径]

#### ✅ 优秀实践

列出代码中做得好的地方：
- 优雅的解决方案
- 良好的设计模式
- 清晰的代码结构
- 周到的抽象设计

#### ⚠️ 需要改进的问题

| 类别 | 问题描述 | 改进建议 | 严重程度 |
|------|---------|---------|----------|
| 性能 | [具体问题] | [改进方案] | 🔴 高 / 🟡 中 / 🟢 低 |

#### 📊 代码评分

> ### 🎯 综合评分：X.X / 10
> **等级：[🏆S/🥇A/🥈B/🥉C/⚠️D/❌F]（[等级描述]）** | **状态：[✅可直接上线/⚠️需修复后上线/❌需要重构]**

| 维度 | 得分 | 评价 |
|------|------|------|
| 代码质量 | X/10 | [简要评价] |
| 功能实现 | X/10 | [简要评价] |
| 性能优化 | X/10 | [简要评价] |
| 安全性 | X/10 | [简要评价] |
| 可访问性 | X/10 | [简要评价] |

**主要扣分项**：[具体说明扣分原因]

#### 📝 改进建议

- **优先修复**：[关键问题列表]
- **后续优化**：[可选改进方向]

评分等级标准：

等级	分数范围	状态	含义
🏆 S	9.5-10	✅ 可直接上线	卓越，可作为最佳实践范本
🥇 A	8.5-9.4	✅ 可直接上线	优秀，生产级代码
🥈 B	7.0-8.4	⚠️ 修复后上线	良好，少量问题需修复
🥉 C	5.5-6.9	⚠️ 修复后上线	一般，需要认真修复优化
⚠️ D	4.0-5.4	❌ 需要重构	较差，建议较大范围重构
❌ F	< 4.0	❌ 需要重构	不合格，建议重写

严重程度定义：

🔴 高：安全漏洞、严重 bug、崩溃风险 → 必须修复
🟡 中：性能问题、代码规范、可维护性 → 建议修复
🟢 低：代码风格、优化建议 → 可选改进

第四步：积极认可优秀实践

在报告中突出强调：

优雅的解决方案和设计模式
良好的编码实践
结构清晰的代码组织
周到的抽象和封装

审查深度调整策略

根据以下因素调整审查深度和重点：

代码规模：小改动快速审查核心问题，大功能进行全面深度审查
代码上下文：生产环境代码采用严格标准，原型代码可适度宽容
时间限制：时间紧张时按优先级审查（安全 > 性能 > 规范 > 风格）

补充资源

详细的审查检查清单和工具推荐请参考 references/checklist.md。

이 저장소의 다른 Skills

같은 저장소

agentation

bamzc/claude-skills-frontend

Add Agentation visual feedback toolbar to any React project

2026-02-0368

amis-builder

bamzc/claude-skills-frontend

amis 低代码框架专家和知识库。**严格触发条件**：用户必须明确提到 'amis'、'低代码'、'百度 amis' 等关键词。**核心能力**：(1) 回答 amis 使用问题（组件用法、属性配置、表达式、事件等），(2) 生成 amis JSON schema（CRUD、表单、卡片、对话框等），(3) 生成 amis 静态 HTML 预览页面（仅当用户明确要求 amis + 预览/静态HTML 时），(4) 调试和优化 amis 配置。**严格禁止触发**：(1) 用户未提及 amis 或低代码，(2) 用户明确要求其他框架（React、Vue、Angular、Vite 等工程化项目），(3) 用户只说'生成表单'但没提 amis。**关键词**：amis、低代码、百度 amis、aisuda、amis schema、amis 组件、amis 预览。

2026-01-2868

name	frontend-code-review
description	当用户需要对前端代码进行全面审查时使用此技能，包括 React、Vue、Angular 或原生 JavaScript/TypeScript 项目。适用于代码审查、Pull Request 评审、性能审计、安全检查等场景。
license	MIT
author	Bamzc

前端代码审查技能

技能用途

对前端代码进行系统化审查，涵盖代码质量、性能、安全、可访问性等多个维度。支持 React、Vue、Angular 和原生 JavaScript/TypeScript 项目。

审查工作流程

第一步：识别项目类型和范围

执行以下识别工作：

确定框架类型（React、Vue、Angular、原生 JS/TS）
评估代码规模（单组件、功能模块、完整应用）
检查明显的语法错误、格式问题或导入错误

第二步：多维度系统审查

按照以下维度逐一审查代码：

代码质量

检查命名是否语义化且一致
识别代码重复和可重构的机会
确认函数/组件是否遵循单一职责原则
评估文件组织和模块结构的合理性

功能实现

验证业务逻辑正确性
检查边界情况和错误处理
审查异步操作处理（Promise、async/await）
确认加载状态和错误状态的用户反馈机制

性能优化

识别不必要的组件重渲染
检查列表渲染的 key 使用是否正确
评估对打包体积的影响
审查图片优化策略（格式、懒加载、响应式）
检查网络请求效率（缓存、去重、防抖节流）

安全性

检测 XSS 漏洞（未转义输入、dangerouslySetInnerHTML 使用）
验证输入验证和数据清洗
审查敏感数据处理（localStorage、API 令牌）
检查 CSRF 保护机制
评估第三方依赖的安全风险

可访问性 (a11y)

检查语义化 HTML 的使用
验证 ARIA 属性的正确性
测试键盘导航支持
检查颜色对比度
确认图片 alt 文本和表单 label

框架特定模式

React:

检查 Hook 使用（useEffect 依赖数组、自定义 Hook 设计）
识别闭包陷阱
验证受控与非受控组件的正确使用
评估 Context 使用的适当性
审查状态管理设计（本地 vs 全局）

Vue 3 Composition API:

检查 ref/reactive 使用是否合理
验证 computed/watch 使用是否正确
评估组件通信方式（props/emit/provide/inject）
检查生命周期钩子使用
审查组合函数（Composables）抽取是否合理

TypeScript:

验证类型定义的准确性和完整性
识别 any 类型的过度使用
检查泛型使用的合理性
评估接口/类型的可复用性

浏览器兼容性

检查目标浏览器支持的特性
验证 CSS 供应商前缀
评估 polyfill 必要性
审查响应式设计实现

第三步：生成结构化报告

使用以下格式输出审查结果：

## 🔍 代码审查报告

### 文件：[文件路径]

#### ✅ 优秀实践

列出代码中做得好的地方：
- 优雅的解决方案
- 良好的设计模式
- 清晰的代码结构
- 周到的抽象设计

#### ⚠️ 需要改进的问题

| 类别 | 问题描述 | 改进建议 | 严重程度 |
|------|---------|---------|----------|
| 性能 | [具体问题] | [改进方案] | 🔴 高 / 🟡 中 / 🟢 低 |

#### 📊 代码评分

> ### 🎯 综合评分：X.X / 10
> **等级：[🏆S/🥇A/🥈B/🥉C/⚠️D/❌F]（[等级描述]）** | **状态：[✅可直接上线/⚠️需修复后上线/❌需要重构]**

| 维度 | 得分 | 评价 |
|------|------|------|
| 代码质量 | X/10 | [简要评价] |
| 功能实现 | X/10 | [简要评价] |
| 性能优化 | X/10 | [简要评价] |
| 安全性 | X/10 | [简要评价] |
| 可访问性 | X/10 | [简要评价] |

**主要扣分项**：[具体说明扣分原因]

#### 📝 改进建议

- **优先修复**：[关键问题列表]
- **后续优化**：[可选改进方向]

评分等级标准：

等级	分数范围	状态	含义
🏆 S	9.5-10	✅ 可直接上线	卓越，可作为最佳实践范本
🥇 A	8.5-9.4	✅ 可直接上线	优秀，生产级代码
🥈 B	7.0-8.4	⚠️ 修复后上线	良好，少量问题需修复
🥉 C	5.5-6.9	⚠️ 修复后上线	一般，需要认真修复优化
⚠️ D	4.0-5.4	❌ 需要重构	较差，建议较大范围重构
❌ F	< 4.0	❌ 需要重构	不合格，建议重写

严重程度定义：

🔴 高：安全漏洞、严重 bug、崩溃风险 → 必须修复
🟡 中：性能问题、代码规范、可维护性 → 建议修复
🟢 低：代码风格、优化建议 → 可选改进

第四步：积极认可优秀实践

在报告中突出强调：

优雅的解决方案和设计模式
良好的编码实践
结构清晰的代码组织
周到的抽象和封装

审查深度调整策略

根据以下因素调整审查深度和重点：

代码规模：小改动快速审查核心问题，大功能进行全面深度审查
代码上下文：生产环境代码采用严格标准，原型代码可适度宽容
时间限制：时间紧张时按优先级审查（安全 > 性能 > 规范 > 风格）

补充资源

详细的审查检查清单和工具推荐请参考 references/checklist.md。