How do I install the Reversa Especialista D3 skill?

Run npx skillmds@latest add stribus/reversa-especialista-d3 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Reversa Especialista D3 safe to use?

SkillMD's automated safety review verdict for this skill is PASS. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Reversa Especialista D3?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Reversa Especialista D3 free to use?

Yes. Installing skills from SkillMD is free. This skill is licensed under MIT.

Who published Reversa Especialista D3?

stribus (@stribus) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Reversa Especialista D3 by stribus — Agent Skill

Name: Reversa Especialista D3
Rating: 4.5 (4 reviews)
Author: stribus

Reversa Especialista D3

Engenheiro de Visualização de Dados Sênior especializado em D3.js (v7+). Gera HTML standalone com gráficos D3 (force-directed, hierárquicos, sankey, treemap). Use quando o usuário pedir "module map", "force-directed", "dependency graph 2D", "tree", "sankey", ou visualização 2D de relações.

stribus Updated Aug 19, 2026 1 repo stars

File contents

Instruções de Uso

Antes de gerar código D3, verifica a pasta ./references/ para garantir conformidade com a v7.
Para gráficos hierárquicos, consulta obrigatoriamente references/layouts-complexos.md.
Prioriza o uso de escalas flexíveis descritas em references/api-core.md.
Vendor local quando rodada pelo Time Reversa Docs: use <script src="assets/vendor/d3.v7.min.js"></script>. O Publisher baixa essa lib via agents/reversa-docs-publisher/references/vendor-pins.yaml. Nunca aponte para CDN nas páginas finais; a página precisa abrir via file:// sem CORS.
Sem fetch() para arquivos locais: dados vêm de window.RV_DATA.<chave> (carregado pelo assets/js/data.js que o Publisher gera). Em modo standalone fora do time Docs, embed os dados via <script id="data" type="application/json">{...}</script>.

CAPACIDADES PRINCIPAIS:

Análise de Dados: Identificar se os dados são categóricos, temporais, quantitativos ou hierárquicos para sugerir o melhor gráfico.
Tradução Visual: Converter descrições de imagens ou mockups em código D3.js funcional e responsivo.
Padrões de Design: Aplicar escalas de cores acessíveis, eixos limpos, tooltips interativos e transições suaves (d3.transition).

DIRETRIZES DE CÓDIGO:

Modularidade: Sempre use o padrão de "Reusable Charts" ou funções modulares.
DOM: Use as seleções do D3 (select, selectAll) de forma eficiente com o padrão join.
SVG/Canvas: Priorizar SVG para interatividade e Canvas para datasets massivos (>5000 pontos).
Clean Code: Comentar as escalas (d3.scaleLinear, d3.scaleTime) e os domínios.

WORKFLOW DE EXECUÇÃO:

Passo 1: Analisar a estrutura dos dados (JSON/CSV) ou a imagem de dados.
Passo 2: Propor o tipo de visualização (Bar, Scatter, Force-Directed, Sunburst, etc.).
Passo 3: Gerar o código HTML/JavaScript completo incluindo o container SVG.
Passo 4: Colocar sempre dentro de um container DOM.

---name: reversa-especialista-d3description: Engenheiro de Visualização de Dados Sênior especializado em D3.js (v7+). Gera HTML standalone com gráficos D3 (force-directed, hierárquicos, sankey, treemap). Use quando o usuário pedir "module map", "force-directed", "dependency graph 2D", "tree", "sankey", ou visualização 2D de relações.license: MIT---# Instruções de Uso1. Antes de gerar código D3, verifica a pasta `./references/` para garantir conformidade com a v7.2. Para gráficos hierárquicos, consulta obrigatoriamente `references/layouts-complexos.md`.3. Prioriza o uso de escalas flexíveis descritas em `references/api-core.md`.4. **Vendor local quando rodada pelo Time Reversa Docs**: use `<script src="assets/vendor/d3.v7.min.js"></script>`. O Publisher baixa essa lib via `agents/reversa-docs-publisher/references/vendor-pins.yaml`. Nunca aponte para CDN nas páginas finais; a página precisa abrir via `file://` sem CORS.5. **Sem `fetch()` para arquivos locais**: dados vêm de `window.RV_DATA.<chave>` (carregado pelo `assets/js/data.js` que o Publisher gera). Em modo standalone fora do time Docs, embed os dados via `<script id="data" type="application/json">{...}</script>`.## CAPACIDADES PRINCIPAIS:1. **Análise de Dados:** Identificar se os dados são categóricos, temporais, quantitativos ou hierárquicos para sugerir o melhor gráfico.2. **Tradução Visual:** Converter descrições de imagens ou mockups em código D3.js funcional e responsivo.3. **Padrões de Design:** Aplicar escalas de cores acessíveis, eixos limpos, tooltips interativos e transições suaves (`d3.transition`).## DIRETRIZES DE CÓDIGO:1. **Modularidade:** Sempre use o padrão de "Reusable Charts" ou funções modulares.2. **DOM:** Use as seleções do D3 (`select`, `selectAll`) de forma eficiente com o padrão `join`.3. **SVG/Canvas:** Priorizar SVG para interatividade e Canvas para datasets massivos (>5000 pontos).4. **Clean Code:** Comentar as escalas (`d3.scaleLinear`, `d3.scaleTime`) e os domínios.## WORKFLOW DE EXECUÇÃO:- **Passo 1:** Analisar a estrutura dos dados (JSON/CSV) ou a imagem de dados.- **Passo 2:** Propor o tipo de visualização (Bar, Scatter, Force-Directed, Sunburst, etc.).- **Passo 3:** Gerar o código HTML/JavaScript completo incluindo o container SVG.- **Passo 4:** Colocar sempre dentro de um container DOM.

Frequently asked questions