一个 Openclaw 技能，可将纯文本 git diff 和代码审查笔记转换为包含风险指标和语法高亮演练的交互式、独立 HTML 可视化页面。
安装与下载
1. ClawHub CLI
从源直接安装技能的最快方式。
npx clawhub@latest install code-review-visualizer
2. 手动安装
将技能文件夹复制到以下位置之一
~/.openclaw/skills/ <project>/skills/ 优先级：工作区 > 本地 > 内置
3. 提示词安装
将此提示词复制到 OpenClaw 即可自动安装。
请帮我使用 Clawhub 安装 code-review-visualizer。如果尚未安装 Clawhub，请先安装（npm i -g clawhub）。
更倾向于下载？
获取包含原生技能文件的ZIP压缩包。
什么是 Code Review Visualizer？
Code Review Visualizer 是为 Openclaw Skills 量身定制的实用工具，旨在弥合密集、原始的终端 diff 与人类可读的代码审查之间的鸿沟。它自动生成格式精美的单文件 HTML 报告，用于概述 pull requests、映射架构风险级别并按时间顺序呈现代码修改。
通过利用嵌入式样式和响应式设计模式，该工具使开发人员和维护人员能够快速评估变更范围，通过修改前后的行为对比掌握逻辑修改，并在任何桌面或移动浏览器上审查代码，而无需依赖外部依赖项。
Code Review Visualizer 应用场景
- 简化 Pull Request 审查： 将冗长的、多文件的 git diff 输入转换为包含风险热图的高可读性视觉摘要。
- 团队协作与新人入职： 创建复杂模块的交互式演练会议，向新入职的工程人员解释调用路径、信任边界和数据流。
- 风险分布审计： 用颜色编码的警报标记关键文件，以显现需要密切关注、值得一看或完全安全的逻辑。
- 自动生成 PR 描述： 生成逻辑阅读路径以及修改动机，以便将其嵌入回版本控制平台。
Code Review Visualizer 工作原理
- 输入接收： 该技能接收用户提供的原始代码文本、分支名称、文件列表或 git patch diff 输出。
- 上下文分析： 底层引擎解析变更、对语法进行分类、映射架构依赖关系并计算风险因素。
- 风险与标签分配： 文件被分类到特定的风险层级，并由明确的视觉指标表示：安全、值得一看或需要关注。
- HTML 编译： 系统将所有必需的 CSS 网格布局、颜色基础和结构逻辑直接嵌入到单个模板中。
- 自包含导出： 最终输出以完全自包含的 HTML 文档形式干净利落地交付，可直接通过浏览器或本地 canvas 工具进行渲染。
Code Review Visualizer 配置指南
要在您的 Openclaw 环境中激活该可视化工具，请在您的配置清单中声明该技能依赖项，或在 agent 执行期间动态触发它。确保您的 agent 工作流具有适当的文件系统权限以输出本地化的 HTML 产物。
# Verify git diffs are available to pass to the skill pipeline
git diff main..feature-branch > changes.diff
# Invoke Openclaw agent with the code-review-visualizer asset configuration
openclaw run code-review-visualizer --input changes.diff
Code Review Visualizer 数据架构与分类体系
该技能一贯使用嵌入式布局模型来结构化其生成的输出。它使用以下布局层次结构来格式化信息：
| Section | Component Type | Content Elements |
|---|---|---|
| Header Meta | Core Info Block | PR Title, Author, TL;DR Summary, and Motivation Context |
| Risk Heatmap | Visual Badges | Categorized file array mapped via green (safe), yellow (worth a look), and red (needs attention) states |
| File Walkthrough | Code Blocks | Syntax-highlighted Github-style diff panels with expanding source snippets |
| Architecture Map | Call Path Layout | Trust boundary markers, external dependency borders, and data flow steps |
Code Review Visualizer 高级特性
- 零依赖自包含： 内联编译所有层叠样式表 (CSS)、结构网格和逻辑，以实现离线便携性。
- 响应式组件架构： 在桌面视图和移动视口中都能完美格式化文本、并排的行为表和展开的代码容器。
- 智能 Diff 截断： 自动裁剪海量的 diff 流以仅保留关键的操作行，并为省略的行添加清晰的上下文指标。
- 信任边界高亮： 实现专用的 canvas 样式以调出高安全性部分、不可信的数据输入点和网络边界。
SKILL.md
加载中
Openclaw 相关技能
CoreCoder 编码代理技能
CoreCoder 是一种高级 AI 编码代理技能，实现了 Claude Code 的七种架构模式，用于精确的代码修改、子代理隔离和多层上下文优化。
Workday Music Greeter
根据一天中的不同时间，通过更改音乐场景、拉取匹配的 GIF 以及发送自动化的每日问候邮件，自动同步您的工作日环境。
jiebang-file-process
一个高效的实用工具技能，基于 Jiebang API 进行文本哈希、Base64 编码/解码和 URL 转换。
精选*
