Repolode
Enviar
nicobailon

nicobailon/visual-explainer

Uma skill de agente que faz agentes de programação renderizarem diagramas, revisões de diff, planos e tabelas como páginas HTML estilizadas, em vez de arte ASCII.

Ver no GitHub
Estrelas
10,550
Forks
677
Issues abertas
0
Último commit
há 4 horas

O que é?

visual-explainer é uma skill de agente para assistentes de programação como Claude Code, Codex CLI, Cursor e Pi. Quando alguém pede para explicar uma arquitetura, revisar um diff ou comparar requisitos com um plano, o agente cria uma página HTML independente e a abre no navegador, em vez de imprimir diagramas ASCII ou tabelas largas no terminal que ficam quebradas ao se ajustar à largura da tela.

A skill oferece slash commands para tarefas comuns: gerar diagramas web, planos visuais de implementação, apresentações de slides, vídeos MP4 narrados, revisões de diff, verificações de planos em relação à base de código, resumos de projetos, comparações de opções e checagens de fatos em documentos. As páginas têm vários estilos de layout e onze paletas de cores selecionáveis, e os diagramas são feitos à mão em SVG inline e podem percorrer um processo passo a passo.

A skill principal não requer etapa de build e precisa apenas de um navegador. Os componentes opcionais incluem um servidor MCP local via stdio, uma ferramenta de extensão do Pi e um exportador de PPTX que usa dependências pequenas do Node, sem garantia de sucesso.

Recursos principais

  • 01Gera páginas HTML independentes para diagramas, tabelas e revisões, em vez de conteúdo ASCII.
  • 02Oferece slash commands para revisão de diff, revisão de planos, resumo de projetos, comparações e apresentações de slides.
  • 03Disponibiliza onze paletas de cores selecionáveis e vários estilos de layout de página.
  • 04Desenha diagramas SVG inline feitos à mão, que podem percorrer um processo passo a passo.
  • 05Inclui utilitários opcionais de servidor MCP, ferramenta do Pi e exportação para PPTX.

Casos de uso

  • Explicar a arquitetura de um sistema ou um fluxo de autenticação aos colegas de equipe.
  • Revisar um diff extenso ou comparar requisitos com um plano de implementação.
  • Transformar uma tabela de comparação complexa gerada por um agente em uma página fácil de ler.
  • Criar uma apresentação de slides ou um vídeo curto narrado a partir de uma base de código ou funcionalidade.

Início rápido

  1. 1

    Adicione o marketplace ao Claude Code

    /plugin marketplace add nicobailon/visual-explainer
  2. 2

    Instale o plugin visual-explainer

    /plugin install visual-explainer@visual-explainer-marketplace
  3. 3

    Peça ao seu agente para criar um diagrama ou fazer uma revisão, e uma página HTML será aberta no navegador

Antes de usar

  • A exportação de vídeo requer a instalação separada de ffmpeg, Chrome e playwright-core.
  • A exportação para PPTX é um utilitário que funciona da melhor forma possível, e o HTML continua sendo a fonte de referência.

Tópicos

#agent-skill#html#diagrams#code-review#claude-code#visualization#mcp

Perguntas frequentes

O que é visual-explainer?
Uma skill de agente que faz agentes de programação renderizarem diagramas, revisões de diff, planos e tabelas como páginas HTML estilizadas, em vez de arte ASCII. visual-explainer é uma skill de agente para assistentes de programação como Claude Code, Codex CLI, Cursor e Pi. Quando alguém pede para explicar uma arquitetura, revisar um diff ou comparar requisitos com um plano, o agente cria uma página HTML independente e a abre no navegador, em vez de imprimir diagramas ASCII ou tabelas largas no terminal que ficam quebradas ao se ajustar à largura da tela.
visual-explainer é gratuito? Qual é a licença?
visual-explainer é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
visual-explainer ainda é mantido?
Manutenção ativa. O último commit de visual-explainer foi em 20 de out. de 2026.
Para que posso usar visual-explainer?
Explicar a arquitetura de um sistema ou um fluxo de autenticação aos colegas de equipe. Revisar um diff extenso ou comparar requisitos com um plano de implementação. Transformar uma tabela de comparação complexa gerada por um agente em uma página fácil de ler. Criar uma apresentação de slides ou um vídeo curto narrado a partir de uma base de código ou funcionalidade.
Como instalar visual-explainer?
Adicione o marketplace ao Claude Code: /plugin marketplace add nicobailon/visual-explainer Instale o plugin visual-explainer: /plugin install visual-explainer@visual-explainer-marketplace Peça ao seu agente para criar um diagrama ou fazer uma revisão, e uma página HTML será aberta no navegador
Onde consigo visual-explainer?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/nicobailon/visual-explainer

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados