ContentMédio

Visual Explainer

pornicobailon·nicobailon· v1.0.0 · atualizado em 2026-04-11

Score

Generate self-contained HTML pages with visual explanations of systems, code changes, plans, and data. Use for diagrams, architecture overviews, diff reviews, plan reviews, project recaps, comparison tables, or any visual explanation of technical concepts. Also, proactively use this skill to render complex ASCII tables (4+ rows or 3+ columns) as styled HTML pages.

visual-designdiagramminghtml-generationdata-visualizationtechnical-documentationmermaid-jscss-styling

Linguagens

HTMLCSSJavaScript

0Stars

0Forks

0Usos

Fork

Documento do Skill

SKILL.mdvisual-explainer/workflow

Analyze Request: — Determine the type of visualization needed (diagram, table, etc.).

Choose Diagram Type: — Select the appropriate diagram type (architecture, flowchart, sequence, data flow, etc.).

Select Aesthetic: — Pick a visual aesthetic (monochrome, editorial, blueprint, etc.).

Structure Content: — Read the relevant template (architecture.html, mermaid-flowchart.html, data-table.html).

Generate HTML: — Create the HTML file using Mermaid, CSS Grid, or HTML tables.

Apply Styling: — Style the diagram using CSS custom properties and chosen aesthetic.

Output and Open: — Save the HTML file to `~/.agent/diagrams/` and open it in the browser.

Inform User: — Tell the user the file path.

Telemetria de Agentes

Execuções

total

Taxa de Sucesso

últimos 30d

Latência Média

0.0s

p50

Alucinação

0.0%

detecção

Tokens Entrada

avg 0/exec

Tokens Saída

avg 0/exec

Uso por Plataforma

Skills Relacionados

Similar aFramer Code Development

60%

Similar aUI Design Brain

60%

Similar aSync Figma Token

60%

Árvore do Skill

Visual Explainer

visual-explainer

Fases Cognitivas6

1.SENSE

2.CONTEXTUALIZE

3.HYPOTHESIZE

4.ACT

5.RECOMMEND

6.REFLECT

Triggers9

generate a diagramcreate an architecture overviewreview this diff visuallyshow me a flowchartrender a data table as HTMLcreate a visual explanationgenerate a sequence diagramdisplay a system diagrampresent a project recap visually

Avaliar este Skill

Score Breakdown

⭐Avaliação Humana0%

🤖Sucesso de Agentes0%

🕐Atualidade100%

🔗Saúde de Dependências100%

🕸️Centralidade no Grafo0%

🛡️Segurança50%

CompositeScore = α·Humano + β·Agente + γ·Recência + δ·Deps + ε·Centralidade + ζ·Segurança

Instalação

$ synaptic mcp download visual-explainer

$ synaptic skills detail visual-explainer

$ synaptic skills live visual-explainer

Dependências

Mermaid.js

Links

GitHub Repository