让AI真正看懂你的前端代码：两个Code Review Skill推荐

你上次让AI review前端代码，它指了几十个问题，你一个个看过去发现全是”考虑加个memo”、”建议抽离子组件”这种隔靴搔痒的建议？真正紧急的线上bug级的缺陷一个没提。

不是AI不够聪明——是它没有一套前端专属的检查清单。

frontend-code-review 这个Skill，就是专门干这个的。

它的工作方式很直接：给你一份针对React/TypeScript/Vite项目的检查清单，涵盖代码质量、性能、业务逻辑三个维度。每次你让它review代码，它就照着清单一条条过，发现问题直接标紧急程度，输出格式固定，不用你再去猜它想说什么。

我研究了几个实现，比较成熟的有两个：

langflow-ai/langflow 版本：来自开源Langflow项目自带的前端review体系，针对他们的技术栈（React 19 + TypeScript 5.4 + Vite 7 + Zustand + shadcn-ui）做了深度定制，检查项包括重渲染、memoization、数据流、国际化硬编码等，每条规则都有参考文档。

sangrokjung/claude-forge 版本：更通用，兼容任何React项目，支持两种review模式——待提交变更review（拦截即将上线的代码）和指定文件review（定向检查某个模块）。输出格式是固定的模板，紧急问题和改进建议分两块，结构清晰。

安装方式都是一行：

npx skills add langflow-ai/langflow --skill frontend-code-review -g
# 或通用版
npx skills add sangrokjung/claude-forge --skill frontend-code-review -g

触发方式也很简单——直接说”帮我review一下src/frontend/下的代码”，或者在commit前说”看看这次改动有什么问题”。

实际用下来，最有价值的是它对性能问题的捕捉。比如在React组件里写了内联对象作为prop，它会明确指出这里会触发重渲染，给出具体的代码位置和修复建议，而不是泛泛说”注意性能”。

对于团队来说，这套review体系的价值在于：把前端review的标准从”靠人肉眼扫”变成”有清单可依”。新人 onboarding 之后直接能用这套标准review，不用先花时间熟悉团队规范。

适合人群：日常用Claude Code/Cursor写React项目、经常需要review前端代码的开发者，以及希望建立前端质量门禁的团队。

GitHub仓库：
– langflow版本：https://github.com/langflow-ai/langflow/tree/main/.agents/skills/frontend-code-review
– claude-forge版本：https://github.com/sangrokjung/claude-forge

GitHub: https://github.com/langflow-ai/langflow/tree/main/.agents/skills/frontend-code-review