Synthèse automatique

Ce skill effectue une revue de code automatisée, évaluant la qualité, la sécurité, les performances et la maintenabilité, et génère un rapport HTML visuel avec prévisualisation dans l'IDE.

Points forts

Analyse complète couvrant plusieurs dimensions (qualité, sécurité, performance, maintenabilité).
Génération d'un rapport HTML moderne et interactif avec notation et catégorisation des problèmes.
Suggestions concrètes avec exemples de code et correctifs proposés.
Intégration directe dans l'IDE via prévisualisation automatique du rapport.

Limites

Analyse statique uniquement, ne détecte pas les bugs d'exécution ou de logique complexe.
Peut manquer de contexte métier ou architectural spécifique.
La génération du rapport HTML peut être volumineuse pour de gros fichiers.

Quand l'utiliser

Idéal pour obtenir rapidement un retour structuré sur la qualité du code et des pistes d'amélioration lors de revues de code ou de pull requests.

Quand l'éviter

À éviter pour des analyses nécessitant une compréhension approfondie du domaine ou une exécution réelle du code (tests dynamiques, sécurité avancée).

Analyse de sécurité

Sûr

Score qualité90/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.

Aucun point d'attention détecté

Comment cette analyse est faite

Exemples

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: Expert en Révision de Code
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 中打开预览
告知用户报告已生成并可以查看

Du fichier au premier essai

Le téléchargement contient exactement le contenu affiché sur cette fiche. Cette copie peut différer de la dernière version du dépôt source.

Consulter la source et ses fichiers annexes

Ce téléchargement contient uniquement SKILL.md. Les scripts, références, modèles et dépendances éventuels ne sont pas inclus. Récupérez les fichiers nécessaires depuis la source en conservant leur arborescence avant de poursuivre.

1. Télécharger le fichier

Télécharger SKILL.md

Depuis la racine d’un projet de test, enregistrez le fichier sous .skill-downloads/code-review-expert-mma3jrro/SKILL.md, ou utilisez la commande suivante. Ce dossier sert à examiner la skill avant son installation.

Commande pour macOS/Linux ou WSL : un shell POSIX et curl sont nécessaires. Sous Windows sans WSL, utilisez le bouton de téléchargement et créez le dossier manuellement.

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. Vérifier les prérequis

Lisez SKILL.md avant de l’utiliser. Si le fichier cite des scripts ou services externes, examinez-les et préparez les accès nécessaires dans votre environnement de test.

Outils déclarés par l’auteur (à vérifier dans votre agent) : Read, Write, Bash, WebFetch, NotebookEdit

Aucune section de prérequis reconnue dans ce fichier. Cela ne signifie pas qu’il est autonome : les bibliothèques, outils et accès peuvent être cités ailleurs dans le contenu ou dans le dépôt source.

Les plateformes de la fiche sont des indications du catalogue. Les chemins ci-dessous suivent la documentation des outils ; ils ne prouvent pas que cette skill y a été exécutée. Aucune version minimale de ces outils n’est attestée pour cette fiche.

3. Charger la skill

Après vérification, copiez le dossier complet dans le projet avec l’une des commandes ci-dessous, puis ouvrez une nouvelle session de l’outil. La commande s’arrête si un dossier du même nom existe déjà : comparez les fichiers avant de le remplacer.

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 doit déjà être installé. La procédure locale install/read est contrôlée avec OpenSkills 1.5.0, qui exige Node.js ≥ 20.6.0. Aucun slug du catalogue n’est résolu automatiquement.

Installation officielle d’OpenSkills

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

openskills read 'code-review-expert-mma3jrro'

La lecture doit afficher le contenu du fichier installé et son dossier de base. Elle ne lance ni la skill ni ses dépendances.

Pour un agent qui lit AGENTS.md, synchronisez ensuite l’index. Cette commande modifie AGENTS.md : relisez le diff avant de l’utiliser.

openskills sync

Mode manuel ou autre outil : joignez SKILL.md à une conversation, ou ouvrez-le dans un agent capable de lire les fichiers. Ajoutez les ressources annexes nécessaires. Il n’existe pas de dossier universel reconnu par tous les outils.

4. Faire un premier essai

Utilisez une entrée courte et fictive : un endpoint d’API, un petit document ou un brief d’interface. Dans une nouvelle conversation, joignez le fichier ou donnez son chemin à l’agent, puis adaptez cette demande :

Lis .skill-downloads/code-review-expert-mma3jrro/SKILL.md et applique ses instructions à cet exemple : [décrire une entrée de test]. Indique les fichiers, dépendances ou accès qui manquent. Produis le résultat demandé par la skill sans inventer de données ni exécuter de script non examiné.

Résultat attendu : une sortie correspondant aux instructions de la skill, ou une liste précise des prérequis manquants. Une simple confirmation de lecture ne valide pas le premier usage. Si une ressource externe est indisponible, ce parcours reste à tester.

Skills similaires

Bonnes pratiques React Hook Form

Developpement

Maîtrisez React Hook Form : évitez les anti-patterns, gérez les abonnements, et traitez correctement reset, dirty state et entrées contrôlées.

Claude CodeCursorWindsurf+2intermediateSûr 108,623

Skills Guide Bot

Migration Emotion vers Mantine

Developpement

Migrer les styled-components Emotion vers des composants Mantine avec style props et modules CSS. Pour convertir .styled.tsx ou supprimer les imports @emotion.

Claude CodeCursorWindsurf+1intermediateSûr 48,981

Skills Guide Bot

Détecteur de dérive de périmètre

Developpement

Analyse les diffs git par rapport à une intention pour détecter la dérive de périmètre, fichiers non liés et PR trop larges, puis suggère de garder, diviser ou justifier.

Claude CodeCursorCodexintermediateSûr 135,015

Skills Guide Bot

Expert en Révision de Code

Recommandé pour

Synthèse automatique

Points forts

Limites

Analyse de sécurité

Exemples

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

代码审查专家 Skills

审查重点

审查流程

输出格式

文本报告格式

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

报告生成步骤

HTML 模板结构

工具使用说明

必须使用的工具

预览流程

审查示例

命名规范检查

安全性检查

性能优化检查

评分标准

总体评分（1-10分）

各维度评分

使用示例

Du fichier au premier essai

1. Télécharger le fichier

2. Vérifier les prérequis

3. Charger la skill

4. Faire un premier essai

Bonnes pratiques React Hook Form

Migration Emotion vers Mantine

Détecteur de dérive de périmètre