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).

Ir para a instalação

Repositório: sandeco/reversa
Última atividade na origem: 31 de julho de 2026 às 03:02
Idioma detectado do SKILL.md: português
Estrelas: 1.591
Forks: 411

Opções de instalação

Por padrão, está selecionado o prompt que primeiro revisa a origem. Você pode mudar para um comando direto ou baixar uma cópia local.

Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.

Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.

npx skills add https://github.com/sandeco/reversa --skill reversa-especialista-d3

O comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.

Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.

Revise os arquivos de origem

Leia o SKILL.md e os arquivos complementares exibidos pelo SkillsMP antes de decidir se vai instalar.

Explorador de arquivos

5 arquivos

SKILL.md

Instruções da origem · Visualização somente leitura

name	reversa-especialista-d3
description	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).
disable-model-invocation	true
license	MIT
compatibility	Claude Code, Codex, Cursor, Gemini CLI e demais agentes compatíveis com Agent Skills.
metadata	{"author":"sandeco","version":"1.0.0","framework":"reversa","team":"shared-skills","role":"d3-renderer"}

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.

Voltar à pesquisa Voltar à instalação

reversa-add

Emenda curta na feature ativa do ciclo forward: registra o ajuste no requirements.md, implementa e fecha a ação no mesmo passo. Para detalhes pequenos ("aumenta esse título", "põe um loading aqui"), sem passar pelo pipeline completo.

2026-09-03

reversa-coding

Executa o actions.md em código: marca checkboxes [X], escreve progress.jsonl e gera legacy-impact.md e regression-watch.md. Funciona ancorado no legado (`_reversa_sdd/`) ou greenfield (`/reversa-new`). Último passo do ciclo forward.

2026-09-03

reversa-debugger-fix

Corretor de bugs do Reversa: reproduz, investiga causa raiz, oferece debate opt-in, cria testes de reprodução e regressão, aplica o change set em dois gates aprovados, dá o veredito de spec e fecha pela closure policy. Exige bug registrado via /reversa-debugger.

2026-09-03

Ver todas deste repositório

name	reversa-especialista-d3
description	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).
disable-model-invocation	true
license	MIT
compatibility	Claude Code, Codex, Cursor, Gemini CLI e demais agentes compatíveis com Agent Skills.
metadata	{"author":"sandeco","version":"1.0.0","framework":"reversa","team":"shared-skills","role":"d3-renderer"}

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.

reversa-especialista-d3

Informações da origem

Opções de instalação

Revise os arquivos de origem

Instruções de Uso

CAPACIDADES PRINCIPAIS:

DIRETRIZES DE CÓDIGO:

WORKFLOW DE EXECUÇÃO:

Mais deste repositório

Instruções de Uso

CAPACIDADES PRINCIPAIS:

DIRETRIZES DE CÓDIGO:

WORKFLOW DE EXECUÇÃO:

Mais deste repositório