# 前端代码审查技能

> 分析变更代码、分析代码

- Skill: `allenchinese/skill` (Agent Skill)
- Install (CLI): `npx skillmds@latest add allenchinese/skill`
- Raw SKILL.md: https://api.skillmd.com/api/skills/allenchinese/skill/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: AllenChinese (https://skillmd.com/u/allenchinese)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/allenchinese/skill

---


---
name: Frontend Code Review
description: 专业前端代码审查技能，系统化检测HTML/CSS/JS/TS等前端代码的质量、性能、安全及可维护性问题，适用于PR审查、CI/CD集成及开发自查场景
---

# Frontend Code Review

## 描述
本技能提供结构化、多维度的前端代码智能审查服务。基于现代前端工程规范（ESLint/Prettier/WCAG/A11y等标准），自动识别代码缺陷并生成可操作的改进建议，助力团队提升代码质量与协作效率。

## 使用场景
- 开发者提交PR时触发自动化审查
- 本地开发中对当前文件/选中代码段进行实时检查
- 团队建立统一代码规范时作为参考基准
- CI/CD流水线中嵌入质量门禁
- 新成员代码规范培训辅助工具

## 指令
执行审查时请严格遵循以下流程：
1. **范围确认**：识别代码类型（React/Vue/Svelte/原生JS等）及技术栈上下文
2. **分层扫描**：
   - 📏 代码规范：缩进/命名/注释/ESLint规则符合度
   - 🧱 架构设计：组件拆分合理性、状态管理、DRY原则、模块化
   - ⚡ 性能隐患：重排重绘、内存泄漏、未优化资源、长任务、Bundle体积
   - ♿ 可访问性：语义化标签、ARIA属性、键盘导航、颜色对比度（WCAG 2.1）
   - 🔒 安全风险：XSS/CSRF隐患、敏感信息硬编码、eval使用、依赖漏洞
   - 🌐 兼容性：目标浏览器支持、Polyfill缺失、CSS前缀
   - 🧪 测试覆盖：关键逻辑测试用例、Mock合理性
3. **问题分级**：按`严重（阻断）/警告（需修复）/建议（优化）`标注优先级
4. **生成报告**：
   - 每个问题包含：行号定位、问题类型、具体描述、修复示例代码、权威规范链接
   - 附加整体评分（1-5星）与3条可落地的核心优化建议
   - 所有结论需引用规范条款/性能数据，避免主观表述

## 示例
**输入**（React组件片段）：
```jsx
<div onClick={() => { /* 业务逻辑 */ }} style={{color: '#aaa'}}>
  Click here
</div>