Coding

Code Review Visualizer

Try it

Generate HTML code review pages with risk tags, diff highlights, and file-level annotations. 当用户需要代码审查可视化、PR审查报告、代码diff高亮、风险标签标注、审查页面生成时使用。

What it does

Generate HTML code review pages with risk tags, diff highlights, and file-level annotations. 当用户需要代码审查可视化、PR审查报告、代码diff高亮、风险标签标注、审查页面生成时使用。

The skill document

Code Review Visualizer

生成带风险标签、diff 高亮、文件级标注的 HTML 代码审查页。将传统的纯文本 diff 和 markdown 审查意见转化为可视化、可交互的 HTML 审查页面，让审查者一眼看清代码变更的形状和风险分布。

何时使用

  • 代码审查（Code Review）时，需要比纯文本 diff 更直观的审查报告
  • 需要向团队解释一个 PR 的变更范围和风险等级
  • 需要生成带逐文件 diff + 风险标注 + 修改动机的 PR 描述
  • 新人 onboarding 时解释某个模块的调用链路和信任边界

核心能力

1. PR 审查摘要页

  • PR 标题 + 动机 + TL;DR
  • 风险热力图：safe / worth a look / needs attention 三级标签
  • 逐文件 diff，带语法高亮和风险标签
  • Before/After 行为对比

2. PR 描述生成

  • 动机（Why）— 解决了什么问题
  • 逐文件 Walkthrough — 按阅读顺序排列，带 why
  • Before/After 行为对比表
  • 审查重点提示

3. 代码理解页

  • 模块调用链路可视化（boxes & arrows）
  • 信任边界标注
  • 逐步骤代码 Walkthrough，可展开/折叠源码

输出格式

始终输出一个自包含的 HTML 文件，可通过 `` 工具呈现，或直接发送给用户浏览器打开。

HTML 结构：

  • 单文件，无外部依赖（所有 CSS/JS 内联）
  • 响应式布局，手机可看
  • 使用 GitHub 风格 diff 配色（绿=新增，红=删除）
  • 风险标签用颜色区分：🟢 safe / 🟡 worth a look / 🔴 needs attention

HTML 模板

<!DOCTYPE html>


PR #XXX — Review Summary


  <!-- Content goes here -->

使用指南

场景 1：PR 审查摘要

用户提供 PR diff 或 git 输出，生成包含以下结构的 HTML：

  1. PR 标题 + 描述 — TL;DR 一句话总结
  2. 风险地图 — 按文件列出风险等级
  3. 逐文件 diff — 带语法高亮的 diff，标注风险标签
  4. 审查建议 — 告诉审查者应该重点关注哪里

场景 2：PR 描述生成

用户提供分支名和变更文件列表，生成：

  1. Why — 变更动机，Before/After 对比
  2. File-by-file — 按阅读顺序排列的文件说明
  3. Where to focus — 审查者应关注的文件

场景 3：代码 Walkthrough

用户提供代码文件或模块路径，生成：

  1. 请求路径 — 从入口到出口的数据流
  2. 逐步骤代码 — 可展开的源码块 + 注解
  3. 信任边界 — 标注安全边界和外部依赖

注意事项

  • 所有 CSS 和 JS 必须内联，不引用外部资源
  • diff 颜色使用 GitHub 暗色主题配色
  • 风险标签只用三种：🟢 safe / 🟡 worth a look / 🔴 needs attention
  • 移动端必须可读（响应式网格）
  • 如果 diff 太长，只显示关键变更行（上下文行省略）

Related skills

code-visual-review

Generate visual HTML pages for code review (diff + risk tags), code walkthrough (call chains + trust boundaries), and architecture analysis (module dependencies + tech debt). Three modes with shared dark-theme template.

1 installs

Ai Code Review Expert

Get senior-engineer-level code reviews with severity ratings, security checks, and ready-to-paste PR comments.

25 installs1 stars

Code Reviewer

Review code against Android/iOS/TypeScript/Go/general rules. Triggers: review, code review, check my changes, 帮我看看代码, commit hash, PR URL. Read-only, never modifies code.

16 installs

AI Code Review RiskRadar

AI Code Review and Code Risk Review quality gate for Git Diff, release readiness, regression testing, security testing, dependency impact, runtime risk, LLM...

3 installs

Code Review Auditor

Review code for bugs, security, architecture, smells, patterns, performance, tests, and refactor plans

2 installs

code-review-and-qual

Conducts multi-axis code review. Use before merging any change. Use when reviewing code written by yourself, another agent, or a human. Use when you need to assess code quality across multiple dimensi Use when 需要Development领域自动化处理、数据分析和流程编排时使用。不适用于无明确需求的模糊场景。