Repolode
Enviar
nicobailon

nicobailon/visual-explainer

Una skill para agentes que hace que los agentes de programación presenten diagramas, revisiones de diff, planes y tablas en páginas HTML con estilo, en lugar de arte ASCII.

Ver en GitHub
Estrellas
10,550
Forks
677
Issues abiertos
0
Último commit
hace 4 horas

¿Qué es?

visual-explainer es una skill para asistentes de programación como Claude Code, Codex CLI, Cursor y Pi. Cuando se les pide explicar una arquitectura, revisar un diff o comparar requisitos con un plan, los agentes generan una página HTML independiente y la abren en el navegador, en vez de mostrar diagramas ASCII o tablas anchas en la terminal que se ajustan mal.

La skill incluye comandos slash para tareas habituales: generar diagramas web, planes visuales de implementación, presentaciones, videos MP4 narrados, revisiones de diff, comprobaciones de planes frente al código base, resúmenes de proyectos, comparaciones de opciones y verificaciones de datos en documentos. Las páginas ofrecen varios estilos de diseño y once paletas de colores intercambiables. Los diagramas son SVG inline dibujados a mano y permiten avanzar paso a paso por un proceso.

La skill principal no requiere pasos de compilación, solo un navegador. Entre los componentes opcionales hay un servidor MCP local mediante stdio, una herramienta de extensión para Pi y un exportador de PPTX de funcionalidad limitada que usa dependencias pequeñas de Node.

Funciones clave

  • 01Genera páginas HTML independientes para diagramas, tablas y revisiones, en lugar de contenido ASCII.
  • 02Incluye comandos slash para revisar diffs y planes, resumir proyectos, comparar opciones y crear presentaciones.
  • 03Ofrece once paletas de colores intercambiables y varios estilos de diseño para las páginas.
  • 04Dibuja diagramas SVG inline a mano que permiten avanzar paso a paso por un proceso.
  • 05Incluye utilidades opcionales: un servidor MCP, una herramienta para Pi y la exportación a PPTX.

Casos de uso

  • Explicar la arquitectura de un sistema o un flujo de autenticación al equipo.
  • Revisar un diff extenso o comparar los requisitos con un plan de implementación.
  • Convertir una tabla comparativa compleja generada por un agente en una página fácil de leer.
  • Crear una presentación o un video corto narrado a partir de un código base o una funcionalidad.

Inicio rápido

  1. 1

    Añade el marketplace a Claude Code

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

    Instala el plugin visual-explainer

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

    Pídele a tu agente que cree un diagrama o haga una revisión; se abrirá una página HTML en tu navegador

Antes de usarlo

  • Para exportar vídeo, debes instalar ffmpeg, Chrome y playwright-core por separado.
  • La exportación a PPTX es una utilidad que funciona según las posibilidades disponibles; HTML sigue siendo la fuente de referencia.

Temas

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

Preguntas frecuentes

¿Qué es visual-explainer?
Una skill para agentes que hace que los agentes de programación presenten diagramas, revisiones de diff, planes y tablas en páginas HTML con estilo, en lugar de arte ASCII. visual-explainer es una skill para asistentes de programación como Claude Code, Codex CLI, Cursor y Pi. Cuando se les pide explicar una arquitectura, revisar un diff o comparar requisitos con un plan, los agentes generan una página HTML independiente y la abren en el navegador, en vez de mostrar diagramas ASCII o tablas anchas en la terminal que se ajustan mal.
¿visual-explainer es gratuito? ¿Qué licencia tiene?
visual-explainer es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿visual-explainer sigue mantenido?
Mantenimiento activo. El último commit de visual-explainer fue el 20 oct 2026.
¿Para qué puedo usar visual-explainer?
Explicar la arquitectura de un sistema o un flujo de autenticación al equipo. Revisar un diff extenso o comparar los requisitos con un plan de implementación. Convertir una tabla comparativa compleja generada por un agente en una página fácil de leer. Crear una presentación o un video corto narrado a partir de un código base o una funcionalidad.
¿Cómo se instala visual-explainer?
Añade el marketplace a Claude Code: /plugin marketplace add nicobailon/visual-explainer Instala el plugin visual-explainer: /plugin install visual-explainer@visual-explainer-marketplace Pídele a tu agente que cree un diagrama o haga una revisión; se abrirá una página HTML en tu navegador
¿Dónde consigo visual-explainer?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/nicobailon/visual-explainer

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados