← 返回 Skills 市场

frontend-code-review

Name: frontend-code-review
Author: bovinphang

作者 Bovin Phang · GitHub ↗ · v1.0.0 · MIT-0

cross-platform ✓ 安全检测通过

257

总下载

当前安装

版本数

在 OpenClaw 中安装

/install frontend-code-review

功能描述

从架构、可维护性、类型安全、可访问性、样式一致性、性能和可测试性等角度审查前端代码，并将报告保存为 Markdown 文件。当用户要求代码审查、Review、评审代码质量时自动激活。

使用说明 (SKILL.md)

前端代码评审

在以下场景使用该 Skill：

评审 Vue、React、TypeScript、样式、hooks/composables 以及 UI 层代码
检查新代码是否符合团队标准
在合并前评审设计稿转代码的实现结果

评审维度

架构

组件边界是否清晰
展示逻辑与业务逻辑是否分离
是否有可复用抽象
是否存在上帝组件

类型安全

是否存在不必要的 any
props 类型是否明确
hooks/composables 返回值是否稳定
在可行情况下 API 契约是否有类型约束

渲染与状态

是否存在不必要的重复渲染
key 的使用是否稳定
可推导状态是否被重复存储
本地状态是否耦合过深

样式

已有 Token 时是否还在使用 magic number
类名是否与仓库约定一致
响应式处理是否明确
是否无必要地混用了多套样式体系

可访问性

语义结构是否合理
是否在需要时正确使用 label 和 aria
是否支持键盘操作
浮层和菜单的焦点管理是否正确

可维护性

文件体积是否合理
命名质量是否良好
是否有应该提取的重复逻辑
是否存在死代码、过期注释或临时性 hack

测试

是否缺少关键测试覆盖
是否存在脆弱的选择器或不稳定的测试模式

安全

无明显 XSS 风险（dangerouslySetInnerHTML / v-html 必须审查）
无敏感信息硬编码
无未校验的用户输入直接渲染

必检项（阻塞合并）

TypeScript 类型完整，无 any
无 XSS 风险
无敏感信息硬编码
核心逻辑有单元测试

质量项（建议修改）

组件复杂度合理（单文件 \x3C 300 行）
无重复代码（DRY 原则）
无未使用的 import

规范项（风格建议）

命名语义清晰
注释覆盖复杂逻辑

评审输出格式

# 代码审查报告

> 生成时间: YYYY-MM-DD HH:mm
> 评审工具: frontend-craft

## 🔴 必须修改 (N项)
- **[文件:行号]** 问题描述 → 建议修改

## 🟡 建议优化 (N项)
- ...

## 🔵 可选优化项 (N项)
- ...

## 🟢 做得好的地方
- ...

## 风险等级：低 / 中 / 高

**总体评价**: 可合并 / 待修改后合并 / 需要重构

报告文件输出

评审完成后，必须将报告内容使用 Write 工具保存为 Markdown 文件：

目录：项目根目录下的 reports/（如不存在则创建）
文件名：code-review-YYYY-MM-DD-HHmmss.md（使用当前时间戳）
保存后告知用户报告文件路径

要具体且可执行。不要只给出"优化性能"这类空泛建议，而不指出具体代码模式。

安全使用建议

This skill appears coherent and focused on reviewing frontend code and saving a Markdown report. Before installing/use: 1) Confirm the agent has explicit read access to the repository you want reviewed and that you are comfortable with the agent reading those files (sensitive data in code will be visible). 2) Ensure the environment provides the expected 'Write' tool or file-write capability so reports can be created at reports/code-review-YYYY-MM-DD-HHmmss.md. 3) If you do not want the agent to access private repos or secrets, test the skill on a non-sensitive sample project first. 4) If you are concerned about autonomous runs, restrict invocation or monitor when the skill is activated. Overall the skill is internally consistent (benign) but exercise normal caution about exposing source code to any automated agent.

功能分析

Type: OpenClaw Skill Name: frontend-code-review Version: 1.0.0 The skill is a standard frontend code review tool designed to analyze code for quality, security, and maintainability. It provides structured instructions for an AI agent to generate Markdown reports and save them locally to a 'reports/' directory. No malicious behaviors, data exfiltration, or suspicious execution patterns were identified in SKILL.md or _meta.json.

能力评估

ℹ Purpose & Capability

The name/description (frontend code review across architecture, types, accessibility, etc.) matches the SKILL.md instructions. The skill does not request credentials, binaries, or installs — which is proportional. One implicit requirement: to perform reviews it needs read access to the project's source files (the SKILL.md assumes the agent can inspect the repo) and a way to write files (the 'Write tool') — these accesses are reasonable for a code-review skill but are not explicitly declared.

✓ Instruction Scope

Instructions are focused on reviewing front-end code and producing a Markdown report. They do not instruct reading unrelated system paths, exfiltrating data, or calling external endpoints. The SKILL.md does assume the agent will read project source files and will save the report under reports/ using a Write tool; it does not give open-ended permissions or vague ‘gather whatever context you need’ directives.

✓ Install Mechanism

No install spec or code files are present (instruction-only), so nothing is written to disk or fetched during install. This is the lowest-risk install posture and is coherent with the skill's function.

✓ Credentials

The skill requests no environment variables, credentials, or config paths. That is appropriate for a purely local/source-based code review tool. Note: because it reads project files, any secrets present in source will be visible to the agent — the skill itself does not request secret access tokens.

✓ Persistence & Privilege

always is false and autonomous invocation is allowed (default), which is standard for skills. The skill does not request persistent system-wide privileges or modifications to other skills/configurations.

如何使用

确保已安装 OpenClaw（本地或 Docker 部署）
在对话框中输入安装命令：/install frontend-code-review
安装完成后，直接呼叫该 Skill 的名称或使用 /frontend-code-review 触发
根据 Skill 的参数说明提供必要输入，即可获得结构化输出

版本历史

v1.0.0

Version 1.1.0 introduces a structured, standards-driven approach to frontend code review. - Adds a detailed skill description covering review criteria: architecture, type safety, rendering, styles, accessibility, maintainability, testing, and security. - Defines mandatory, recommended, and stylistic review checklists for consistent evaluations. - Specifies a unified Markdown report output format, including risk grading and actionable feedback. - Automates saving review reports to the project's /reports directory, with clear filename conventions. - Designed to activate automatically for Vue, React, TypeScript, and UI-layer code review requests.

元数据

Slug frontend-code-review

版本 1.0.0

许可证 MIT-0

累计安装 1

当前安装数 1

历史版本数 1

常见问题