前端代码审查技能

分析变更代码、分析代码

AllenChinese Updated

File contents


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组件片段):

<div => { /* 业务逻辑 */ }} style={{color: '#aaa'}}>
  Click here
</div>

AllenChinese/awesome-frontend-skills/tree/main/skills/frontendcodereview commit 9185914893

Frequently asked questions

npx skillmds@latest add allenchinese/skill