SkillProof tested Claude skills

Interactive Architecture Diagrams

Construye un diagrama de arquitectura HTML animado y navegable de un solo archivo más un .md complementario.

Por konraddzbik · konraddzbik/architecture-diagram-skill

Probado · Funciona ★ 8.8/10

Interactive Architecture Diagrams — Construye un diagrama de arquitectura HTML animado y navegable de un solo archivo más un .md complementario.

Qué hace

Genera un diagrama HTML interactivo autocontenido — pestañas de flujo, paquetes de datos SVG animados, un panel lateral con payloads por paso, conmutadores de modo (dev/prod, offline/online), nodos arrastrables, tema oscuro/claro — más un architecture.md complementario, a partir de una descripción en lenguaje sencillo de los servicios y flujos de un sistema. Se activa ante solicitudes para visualizar un mapa de servicios, flujo RAG/agéntico, pipeline CI/CD o topología de microservicios para un taller o revisión de diseño; opta explícitamente por no generar diagramas estáticos de Mermaid, diapositivas o PDFs.

Informe de la prueba

Se construyó un diagrama real de inicio de sesión OAuth2 de 3 nodos a partir de la plantilla incluida y se sirvió localmente: la navegación por pasos, el panel lateral de payload y el conmutador de modo dev/prod funcionaron en vivo en el navegador sin errores de consola — genuinamente más capaz que cualquier cosa que yo produciría sin guía. La documentación le costó puntos: el comando 'Claude Code — manual clone' del propio README clona la raíz del repositorio directamente en la carpeta de skills, lo que entierra SKILL.md dos directorios demasiado profundo y rompería silenciosamente la instalación si se siguiera literalmente.

Probado el: 2026-07-14 · Claude Code 2.x (agent harness)

Instalación

git clone https://github.com/konraddzbik/architecture-diagram-skill
cd architecture-diagram-skill
mkdir -p ~/.claude/skills
cp -r skills/architecture-diagram ~/.claude/skills/architecture-diagram

Comandos y prompts de ejemplo

  • /architecture-diagramConstruye un diagrama de arquitectura HTML animado y navegable de un solo archivo más un .md complementario.

Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):

  • Build a clickable diagram showing browser to auth gateway flow
  • Make an animated architecture diagram for our OAuth login
  • Create a step-through HTML diagram of our system's request path

Informe completo →