An Openclaw skill that transforms plain text git diffs and code review notes into interactive, self-contained HTML visualization pages complete with risk indicators and syntax-highlighted walkthroughs.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install code-review-visualizer
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install code-review-visualizer using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Code Review Visualizer?
Code Review Visualizer is a purpose-built utility designed for Openclaw Skills to bridge the gap between dense, raw terminal diffs and human-readable code reviews. It automates the generation of beautifully formatted, single-file HTML reports that summarize pull requests, map architectural risk levels, and present code modifications chronologically.
By leveraging embedded styling and responsive design patterns, this tool enables developers and maintainers to rapidly assess change scopes, grasp logical modifications through before/after behavior comparisons, and review code on any desktop or mobile browser without relying on external dependencies.
Code Review Visualizer Use Cases
- Streamlining Pull Request Reviews: Transforming long, multi-file git diff inputs into highly scannable visual summaries containing risk heatmaps.
- Team Alignment & Onboarding: Creating interactive walkthrough sessions of intricate modules to explain call paths, trust boundaries, and data flow to new engineering hires.
- Risk Distribution Auditing: Tagging critical files with color-coded alerts to surface logic that demands closer attention, worth a look, or is completely safe.
- Automated PR Description Generation: Generating logical reading paths along with modification motivations to embed back into version control platforms.
How Code Review Visualizer Works
- Input Ingestion: The skill receives raw code text, branch names, file listings, or git patch diff outputs provided by the user.
- Contextual Analysis: The underlying engine parses the changes, classifies syntax, maps architectural dependencies, and calculates risk factors.
- Risk & Tag Assignment: Files are classified into specific risk tiers represented by explicit visual indicators: safe, worth a look, or needs attention.
- HTML Compilation: The system embeds all necessary CSS grid layouts, color foundations, and structure logic directly into a single template.
- Self-Contained Export: The final output is delivered cleanly as an entirely self-contained HTML document ready for rendering via browsers or local canvas utilities.
Code Review Visualizer Setup
To activate the visualizer within your Openclaw environment, declare the skill dependency inside your configuration manifest or trigger it dynamically during agent execution. Ensure your agent workflow has appropriate file system permissions to output localized HTML artifacts.
# 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 Data Schema & Taxonomy
The skill consistently structures its generated output using an embedded layout model. It formats information using the following layout hierarchy:
| 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 Advanced Features
- Zero-Dependency Self-Containment: Compiles all cascading stylesheets (CSS), structural grids, and logic inline to allow offline portability.
- Responsive Component Architecture: Formats text, side-by-side behavioral tables, and expanded code containers flawlessly across both desktop views and mobile viewports.
- Intelligent Diff Truncation: Automatically clips massive diff streams to preserve only the critical operational lines, adding clear context indicators for omitted lines.
- Trust Boundary Highlighting: Implements dedicated canvas styles to call out high-security sections, untrusted data entry points, and network boundaries.
SKILL.md
Loading
Related Openclaw Skills
Code Walkthrough
An AI agent skill that maps data flows, trace call stacks, and visualizes security boundaries into a single self-contained HTML page.
CoreCoder Coding Agent Skill
CoreCoder is an advanced AI coding agent skill implementing Claude Code's seven architectural patterns for precise code modification, sub-agent isolation, and multi-layered context optimization.
Financial Equity Research
An institutional-grade equity research agent skill that automates earnings analysis, coverage initiation, and financial model updates.
Financial Analysis & Modeling Suite
An institutional-grade financial modeling and analysis toolkit for generating, auditing, and updating DCF, LBO, comps, 3-statement models, and investor presentations.
Workday Music Greeter
Automatically syncs your workday environment by changing music scenes, pulling matching GIFs, and emailing automated daily greetings based on the time of day.
Jiebang SEO Analyzer
A comprehensive SEO audit and metadata extraction skill designed to evaluate webpage health and structural optimizations.
Featured*
