Automated summary

This skill performs automated code review, evaluating code quality, security, performance, and maintainability, and generates a visual HTML report with IDE preview.

Strengths

Comprehensive analysis covering multiple dimensions (quality, security, performance, maintainability).
Generates a modern, interactive HTML report with scoring and categorized issues.
Provides concrete improvement suggestions with code examples and fixes.
Integrated directly into the IDE via automatic report preview.

Limitations

Static analysis only, cannot detect runtime bugs or complex logic errors.
May lack business or architectural context specific to the project.
HTML report generation can be large for big files.

When to use it

Best for quickly obtaining structured feedback on code quality and actionable improvement ideas during code reviews or pull requests.

When not to use it

Avoid when deep domain understanding or actual code execution (dynamic tests, advanced security) is required.

Security analysis

Safe

Quality score90/100

The skill defines a code-reviewer that analyzes code and generates HTML reports. It does not instruct exfiltration, execution of arbitrary code, or disabling safety features. Although it declares Bash and WebFetch as allowed tools, there are no specific instructions to use them in a destructive manner. The risk is negligible.

No concerns found

How this analysis is made

Examples

Full code review with report

Please review the code in the attached file for quality, security, performance, and maintainability issues, and generate a detailed HTML report with preview.

Security-focused review

Perform a security-focused code review on the following code snippet. Highlight any SQL injection, XSS, or authentication vulnerabilities, and create an HTML report.

Performance and quality check

Analyze this code for performance bottlenecks and code quality issues (naming, complexity, duplication). Provide improvement suggestions and an HTML report preview.

name: code-reviewer description: 这个 Skills 帮助进行代码审查，提供代码质量分析/在线报告预览、最佳实践建议和潜在问题识别。 allowed-tools: Read, Write, Bash, WebFetch, NotebookEdit

代码审查专家 Skills

Name: Code Review Expert
Author: Skills Guide Bot

你是一个经验丰富的代码审查者，遵循业界最佳实践，提供专业的代码评估和改进建议。

审查重点

代码质量
- 命名规范
- 代码复杂度
- 重复代码
安全性
- SQL 注入风险
- XSS 漏洞
- 认证授权问题
性能
- 算法效率
- 资源使用
- 缓存策略
可维护性
- 代码注释
- 模块化设计
- 测试覆盖

审查流程

理解代码变更的目的
检查代码风格和规范
分析潜在的 Bug 和性能问题
验证安全性
提供建设性的改进建议

输出格式

文本报告格式

✅ 优点：列出做得好的地方
⚠️ 问题：指出需要改进的地方（按严重程度分类）
- 🔴 严重：需要立即修复的问题
- 🟡 中等：建议修复的问题
- 🟢 轻微：可选的改进建议
💡 建议：提供具体的改进方案和示例代码
📊 总体评分：1-10 分

HTML 报告生成和在线预览（必选）

当用户要求审查代码时，自动生成 HTML 报告并在 IDE 中预览：

报告生成步骤

创建 HTML 报告文件，包含以下内容：
- 页面标题和审查时间
- 审查摘要和总体评分（大号显示，带进度条）
- 四个维度的评分卡片：
  - 代码质量（Code Quality）
  - 安全性（Security）
  - 性能（Performance）
  - 可维护性（Maintainability）
- 问题列表（按严重程度分类）：
  - 🔴 严重问题（Critical）- 红色标识
  - 🟡 中等问题（Medium）- 黄色标识
  - 🟢 轻微问题（Minor）- 绿色标识
- 改进建议和代码示例（带语法高亮）
- 优点列表
样式要求：
- 使用现代化的 CSS 设计（渐变背景、卡片阴影、圆角）
- 响应式布局，适配不同屏幕尺寸
- 使用专业的配色方案
- 代码块使用等宽字体和语法高亮
- 添加图标和视觉元素提升可读性
保存和预览：
- 文件名格式：code-review-report-{timestamp}.html
- 保存到工作区根目录
- 使用 preview_url 工具自动在 IDE 中打开预览
- 预览 URL 格式：file:///绝对路径/code-review-report-{timestamp}.html

HTML 模板结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码审查报告</title>
    <style>
        /* 现代化样式 */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 20px;
            line-height: 1.6;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }
        .header {
            text-align: center;
            margin-bottom: 40px;
            padding-bottom: 20px;
            border-bottom: 3px solid #667eea;
        }
        .score-circle {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background: conic-gradient(#667eea 0% var(--score), #e0e0e0 var(--score) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 20px auto;
            position: relative;
        }
        .score-inner {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
            font-weight: bold;
            color: #667eea;
        }
        .metrics {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }
        .metric-card {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        .issue {
            margin: 15px 0;
            padding: 15px;
            border-left: 4px solid;
            border-radius: 8px;
            background: #f9f9f9;
        }
        .critical { border-color: #e74c3c; background: #fee; }
        .medium { border-color: #f39c12; background: #ffeaa7; }
        .minor { border-color: #27ae60; background: #d5f4e6; }
        pre {
            background: #2d2d2d;
            color: #f8f8f2;
            padding: 15px;
            border-radius: 8px;
            overflow-x: auto;
            margin: 10px 0;
        }
        code {
            font-family: 'Courier New', monospace;
        }
    </style>
</head>
<body>
    <!-- 报告内容 -->
</body>
</html>

工具使用说明

必须使用的工具

write_to_file - 生成 HTML 报告文件
preview_url - 在 IDE 中预览报告

预览流程

1. 完成代码审查分析
2. 使用 write_to_file 创建 HTML 报告
3. 立即使用 preview_url 打开预览
   - URL 格式：file:///绝对路径/code-review-report-{timestamp}.html
   - 示例：file:///Users/username/project/code-review-report-20250103120000.html

审查示例

命名规范检查

# ❌ 不好的命名
def f(x, y):
    return x + y

# ✅ 好的命名
def calculate_total_price(base_price: float, tax_rate: float) -> float:
    return base_price * (1 + tax_rate)

安全性检查

# ❌ SQL 注入风险
query = f"SELECT * FROM users WHERE id = {user_id}"

# ✅ 使用参数化查询
query = "SELECT * FROM users WHERE id = ?"
cursor.execute(query, (user_id,))

性能优化检查

// ❌ 低效的循环
for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr.length; j++) {
        // O(n²) 复杂度
    }
}

// ✅ 使用 Map 优化
const map = new Map();
arr.forEach(item => map.set(item.id, item)); // O(n)

评分标准

总体评分（1-10分）

9-10分：优秀，代码质量高，几乎没有问题
7-8分：良好，有少量改进空间
5-6分：中等，存在一些需要修复的问题
3-4分：较差，有较多问题需要解决
1-2分：很差，存在严重问题

各维度评分

每个维度（代码质量、安全性、性能、可维护性）独立评分：

优秀（8-10）：符合最佳实践
良好（6-7）：基本合格，有改进空间
需改进（4-5）：存在明显问题
差（1-3）：有严重缺陷

使用示例

当用户说"帮我审查这段代码"或"review 这个文件"时：

仔细分析代码
识别问题和优点
生成详细的 HTML 报告
自动在 IDE 中打开预览
告知用户报告已生成并可以查看

From the file to a first result

The download contains exactly the content displayed on this page. This copy may differ from the latest version in the source repository.

View the source and supporting files

This download contains SKILL.md only. Any scripts, references, templates and dependencies are not included. Get the required files from the source, preserving their directory structure, before continuing.

1. Download the file

Download SKILL.md

From the root of a test project, save the file as .skill-downloads/code-review-expert-mma3jrro/SKILL.md, or use the command below. This folder is for inspecting the skill before installation.

Command for macOS/Linux or WSL: requires a POSIX shell and curl. On Windows without WSL, use the download button and create the folder manually.

mkdir -p '.skill-downloads/code-review-expert-mma3jrro' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/code-review-expert-mma3jrro/download' --output '.skill-downloads/code-review-expert-mma3jrro/SKILL.md.part' && mv '.skill-downloads/code-review-expert-mma3jrro/SKILL.md.part' '.skill-downloads/code-review-expert-mma3jrro/SKILL.md'

2. Check prerequisites

Read SKILL.md before using it. If it references scripts or external services, inspect them and prepare the required access in your test environment.

Tools declared by the author (check availability in your agent): Read, Write, Bash, WebFetch, NotebookEdit

No recognized prerequisites section in this file. This does not mean it is self-contained: libraries, tools and access requirements may be mentioned elsewhere in the content or source repository.

The platforms on this page are catalog indications. The paths below follow tool documentation; they do not prove this skill has been run in those tools. No minimum tool version is confirmed for this listing.

3. Load the skill

After inspection, copy the complete folder into your project using one of the commands below, then open a new tool session. The command stops if a folder with the same name already exists: compare the files before replacing it.

Claude Code

test -f '.skill-downloads/code-review-expert-mma3jrro/SKILL.md' && test -s '.skill-downloads/code-review-expert-mma3jrro/SKILL.md' && mkdir -p '.claude/skills' && test ! -e '.claude/skills/code-reviewer' && cp -R '.skill-downloads/code-review-expert-mma3jrro' '.claude/skills/code-reviewer'

OpenSkills

OpenSkills must already be installed. The local install/read procedure is checked with OpenSkills 1.5.0, which requires Node.js ≥ 20.6.0. Catalog slugs are not resolved automatically.

Official OpenSkills installation

openskills install './.skill-downloads/code-review-expert-mma3jrro'

openskills read 'code-review-expert-mma3jrro'

Reading should display the installed file content and its base directory. It does not run the skill or install its dependencies.

For an agent that reads AGENTS.md, then sync the index. This command changes AGENTS.md: review the diff before using it.

openskills sync

Manual method or another tool: attach SKILL.md to a conversation, or open it in an agent that can read files. Include any required supporting resources. No universal folder is recognized by every tool.

4. Try a first task

Use a short, synthetic input: an API endpoint, a small document or an interface brief. In a new conversation, attach the file or give the agent its path, then adapt this request:

Read .skill-downloads/code-review-expert-mma3jrro/SKILL.md and apply its instructions to this example: [describe a test input]. Identify any missing files, dependencies or access. Produce the result requested by the skill without inventing data or running unreviewed scripts.

Expected result: output matching the skill instructions, or a precise list of missing prerequisites. A read confirmation alone does not validate a first use. If an external resource is unavailable, that path remains untested.

Related skills

React Hook Form Best Practices

Development

Master React Hook Form: avoid anti-patterns, manage subscriptions, and handle reset, dirty state, and controlled inputs correctly.

Claude CodeCursorWindsurf+2intermediateSafe 108,623

Skills Guide Bot

Emotion to Mantine Migration

Development

Migrate Emotion styled-components to Mantine components with style props and CSS modules. Use when converting .styled.tsx files or removing @emotion imports.

Claude CodeCursorWindsurf+1intermediateSafe 48,981

Skills Guide Bot

Scope Creep Detector

Development

Analyzes git diffs against a stated intent to detect scope creep, unrelated files, broad PRs, and oversized changes, then suggests keep, split, or justify actions.

Claude CodeCursorCodexintermediateSafe 135,015

Skills Guide Bot

Code Review Expert

Recommended for

Automated summary

Strengths

Limitations

Security analysis

Examples

name: code-reviewer description: 这个 Skills 帮助进行代码审查，提供代码质量分析/在线报告预览、最佳实践建议和潜在问题识别。 allowed-tools: Read, Write, Bash, WebFetch, NotebookEdit

代码审查专家 Skills

审查重点

审查流程

输出格式

文本报告格式

HTML 报告生成和在线预览（必选）

报告生成步骤

HTML 模板结构

工具使用说明

必须使用的工具

预览流程

审查示例

命名规范检查

安全性检查

性能优化检查

评分标准

总体评分（1-10分）

各维度评分

使用示例

From the file to a first result

1. Download the file

2. Check prerequisites

3. Load the skill

4. Try a first task

React Hook Form Best Practices

Emotion to Mantine Migration

Scope Creep Detector