← Back to Skills Marketplace
bovinphang

frontend-code-review

by Bovin Phang · GitHub ↗ · v1.0.0 · MIT-0
cross-platform ✓ Security Clean
257
Downloads
0
Stars
1
Active Installs
1
Versions
Install in OpenClaw
/install frontend-code-review
Description
从架构、可维护性、类型安全、可访问性、样式一致性、性能和可测试性等角度审查前端代码，并将报告保存为 Markdown 文件。当用户要求代码审查、Review、评审代码质量时自动激活。
README (SKILL.md)

前端代码评审

在以下场景使用该 Skill：

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

评审维度

  1. 架构
  • 组件边界是否清晰
  • 展示逻辑与业务逻辑是否分离
  • 是否有可复用抽象
  • 是否存在上帝组件
  1. 类型安全
  • 是否存在不必要的 any
  • props 类型是否明确
  • hooks/composables 返回值是否稳定
  • 在可行情况下 API 契约是否有类型约束
  1. 渲染与状态
  • 是否存在不必要的重复渲染
  • key 的使用是否稳定
  • 可推导状态是否被重复存储
  • 本地状态是否耦合过深
  1. 样式
  • 已有 Token 时是否还在使用 magic number
  • 类名是否与仓库约定一致
  • 响应式处理是否明确
  • 是否无必要地混用了多套样式体系
  1. 可访问性
  • 语义结构是否合理
  • 是否在需要时正确使用 label 和 aria
  • 是否支持键盘操作
  • 浮层和菜单的焦点管理是否正确
  1. 可维护性
  • 文件体积是否合理
  • 命名质量是否良好
  • 是否有应该提取的重复逻辑
  • 是否存在死代码、过期注释或临时性 hack
  1. 测试
  • 是否缺少关键测试覆盖
  • 是否存在脆弱的选择器或不稳定的测试模式
  1. 安全
  • 无明显 XSS 风险（dangerouslySetInnerHTML / v-html 必须审查）
  • 无敏感信息硬编码
  • 无未校验的用户输入直接渲染
  1. 必检项（阻塞合并）
  • TypeScript 类型完整，无 any
  • 无 XSS 风险
  • 无敏感信息硬编码
  • 核心逻辑有单元测试
  1. 质量项（建议修改）
  • 组件复杂度合理（单文件 \x3C 300 行）
  • 无重复代码（DRY 原则）
  • 无未使用的 import
  1. 规范项（风格建议）
  • 命名语义清晰
  • 注释覆盖复杂逻辑

评审输出格式

# 代码审查报告

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

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

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

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

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

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

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

报告文件输出

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

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

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

Usage Guidance
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.
Capability Analysis
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.
Capability Assessment
ℹ 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.
How to Use
  1. Make sure OpenClaw is installed (local or Docker)
  2. Run the install command in chat: /install frontend-code-review
  3. After installation, invoke the skill by name or use /frontend-code-review
  4. Provide required inputs per the skill's parameter spec and get structured output
Version History
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.
Metadata
Slug frontend-code-review
Version 1.0.0
License MIT-0
All-time Installs 1
Active Installs 1
Total Versions 1
Frequently Asked Questions

What is frontend-code-review?

从架构、可维护性、类型安全、可访问性、样式一致性、性能和可测试性等角度审查前端代码，并将报告保存为 Markdown 文件。当用户要求代码审查、Review、评审代码质量时自动激活。 It is an AI Agent Skill for Claude Code / OpenClaw, with 257 downloads so far.

How do I install frontend-code-review?

Run "/install frontend-code-review" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.

Is frontend-code-review free?

Yes, frontend-code-review is completely free, licensed under MIT-0. You can download, install and use it at no cost.

Which platforms does frontend-code-review support?

frontend-code-review is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).

Who created frontend-code-review?

It is built and maintained by Bovin Phang (@bovinphang); the current version is v1.0.0.

More Skills
self-improving agent
Captures learnings, errors, and corrections to enable continuous improvement. Use when: (1) A command or operation fails unexpectedly, (2) User corrects Clau...
⬇ 463283 · by pskoett
Skill Vetter
Security-first skill vetting for AI agents. Use before installing any skill from ClawdHub, GitHub, or other sources. Checks for red flags, permission scope, and suspicious patterns.
⬇ 259410 · by spclaudehome
Polymarket
Query Polymarket prediction markets. Check odds, find trending markets, search events, track price movements.
⬇ 232503 · by joelchance
Self-Improving + Proactive Agent
Self-reflection + Self-criticism + Self-learning + Self-organizing memory. Agent evaluates its own work, catches mistakes, and improves permanently. Use when...
⬇ 200423 · by ivangdavila
Github
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
⬇ 191113 · by steipete
ontology
Typed knowledge graph for structured agent memory and composable skills. Use when creating/querying entities (Person, Project, Task, Event, Document), linkin...
⬇ 190156 · by oswalpalash

💬 Comments