Une compétence Openclaw qui transforme les git diffs en texte brut et les notes de revue de code en pages de visualisation HTML interactives et autonomes, complétées par des indicateurs de risque et des guides avec coloration syntaxique.
Installer & Télécharger
1. ClawHub CLI
Le moyen le plus rapide d'installer une compétence directement depuis le registre.
npx clawhub@latest install code-review-visualizer
2. Installation manuelle
Copiez le dossier de la compétence dans l'un de ces emplacements
~/.openclaw/skills/ <project>/skills/ Priorité : Espace de travail > Local > Intégré
3. Installation du prompt
Copiez ce prompt dans OpenClaw pour l'installer automatiquement.
Aide-moi à installer code-review-visualizer via Clawhub. Si Clawhub n'est pas installé, installe-le d'abord (npm i -g clawhub).
Vous préférez télécharger ?
Obtenez les fichiers bruts de la compétence dans une archive ZIP.
Qu'est-ce que Code Review Visualizer ?
Code Review Visualizer est un utilitaire spécialement conçu pour Openclaw Skills afin de combler le fossé entre les diffs de terminaux denses et bruts et les revues de code lisibles par l'homme. Il automatise la génération de rapports HTML au format élégant et à fichier unique qui résument les pull requests, cartographient les niveaux de risque architectural et présentent les modifications de code de manière chronologique.
En tirant parti des styles intégrés et des modèles de conception réactive, cet outil permet aux développeurs et aux mainteneurs d'évaluer rapidement la portée des changements, de saisir les modifications logiques grâce à des comparaisons de comportement avant/après, et de réviser le code sur n'importe quel navigateur de bureau ou mobile sans dépendre de dépendances externes.
Cas d'utilisation de Code Review Visualizer
- Optimisation des revues de Pull Requests : Transformer de longues entrées git diff multi-fichiers en résumés visuels hautement scannables contenant des cartes de chaleur de risque.
- Alignement et intégration de l'équipe : Créer des sessions de présentation interactives de modules complexes pour expliquer les chemins d'appel, les limites de confiance et le flux de données aux nouvelles recrues de l'ingénierie.
- Audit de la répartition des risques : Marquer les fichiers critiques avec des alertes à code couleur pour faire ressortir la logique qui exige une attention plus particulière, qui vaut le coup d'œil ou qui est complètement sûre.
- Génération automatisée de descriptions de PR : Générer des chemins de lecture logiques ainsi que des motivations de modification pour les réintégrer dans les plateformes de contrôle de version.
Comment fonctionne Code Review Visualizer
- Ingestion des entrées : La compétence reçoit du texte de code brut, des noms de branches, des listes de fichiers ou des sorties de diff de patch git fournies par l'utilisateur.
- Analyse contextuelle : Le moteur sous-jacent analyse les changements, classifie la syntaxe, cartographie les dépendances architecturales et calcule les facteurs de risque.
- Attribution des risques et des tags : Les fichiers sont classés dans des niveaux de risque spécifiques représentés par des indicateurs visuels explicites : sûr, vaut le coup d'œil ou nécessite une attention particulière.
- Compilation HTML : Le système intègre toutes les mises en page de grille CSS nécessaires, les bases de couleur et la logique de structure directement dans un modèle unique.
- Exportation autonome : Le résultat final est livré proprement sous la forme d'un document HTML entièrement autonome, prêt à être rendu via des navigateurs ou des utilitaires canvas locaux.
Configuration de Code Review Visualizer
Pour activer le visualiseur dans votre environnement Openclaw, déclarez la dépendance de la compétence dans votre manifeste de configuration ou déclenchez-la dynamiquement pendant l'exécution de l'agent. Assurez-vous que le flux de travail de votre agent dispose des autorisations de système de fichiers appropriées pour générer des artefacts HTML localisés.
# 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
Schéma de données et taxonomie de Code Review Visualizer
La compétence structure systématiquement sa sortie générée à l'aide d'un modèle de mise en page intégré. Elle formate les informations en utilisant la hiérarchie de mise en page suivante :
| 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 |
Fonctionnalités avancées de Code Review Visualizer
- Autonomie sans dépendance : Compile toutes les feuilles de style en cascade (CSS), les grilles structurelles et la logique en ligne pour permettre une portabilité hors ligne.
- Architecture de composants réactifs : Formate le texte, les tableaux de comportement côte à côte et les conteneurs de code étendus de manière impeccable sur les vues de bureau et les fenêtres d'affichage mobiles.
- Troncation intelligente des diffs : Coupe automatiquement les flux de diff massifs pour ne conserver que les lignes opérationnelles critiques, en ajoutant des indicateurs de contexte clairs pour les lignes omises.
- Mise en valeur des limites de confiance : Implémente des styles canvas dédiés pour signaler les sections de haute sécurité, les points d'entrée de données non approuvés et les limites du réseau.
SKILL.md
Chargement
Compétences Openclaw associées
Code Walkthrough
Une skill d'AI agent qui cartographie les flux de données, trace les piles d'appels et visualise les frontières de sécurité dans une seule page HTML autocontenue.
CoreCoder Coding Agent Skill
CoreCoder est une compétence d'agent de codage IA avancée qui implémente les sept modèles d'architecture de Claude Code pour la modification précise du code, l'isolation des sous-agents et l'optimisation du contexte multicouche.
Financial Equity Research
Une compétence d'agent de recherche sur les actions de niveau institutionnel qui automatise l'analyse des résultats, l'initiation de la couverture et les mises à jour des modèles financiers.
Suite d'Analyse et de Modélisation Financière
Un kit d'outils de modélisation et d'analyse financière de niveau institutionnel pour générer, auditer et mettre à jour les modèles DCF, LBO, Comps, les états financiers et les présentations aux investisseurs.
Workday Music Greeter
Synchronise automatiquement l'environnement de votre journée de travail en changeant les scènes musicales, en récupérant des GIFs correspondants et en envoyant des e-mails de salutations quotidiens automatisés en fonction de l'heure de la journée.
Jiebang SEO Analyzer
Une compétence complète d'audit SEO et d'extraction de métadonnées conçue pour évaluer la santé des pages web et les optimisations structurelles.
jiebang-file-process
Un outil utilitaire efficace pour le hachage de texte, l'encodage/décodage Base64 et les transformations URL basées sur l'API Jiebang.
jiebang-data-formatter
Une compétence d'utilitaire de données complète permettant aux agents d'AI de formater, convertir et analyser de manière transparente les formats de données de développeurs populaires, notamment JSON, YAML, SQL, XML, les bases de numération, les entités HTML et les expressions Cron.
En vedette*
