Habilidades do Agente de Visualização de Gráficos

Habilidades de Visualização de Gráficos

Transformando dados em uma linguagem visual para um pensamento mais claro.

Visão Geral

Na era da tomada de decisão baseada em dados, a visualização e análise de dados eficientes e precisas são fundamentais. O AntV oferece um conjunto profissional de soluções de visualização, fornecendo um toolkit robusto e um conjunto abrangente de habilidades para todo o fluxo de trabalho — desde o design de gráficos e exploração interativa até a análise aprofundada de dados. Ele capacita os usuários a transformar rapidamente conjuntos de dados complexos em gráficos visuais intuitivos, reduzindo significativamente a barreira de criação por meio de especificações de design inteligentes e uma rica biblioteca de componentes. Seja para relatórios diários, dashboards dinâmicos ou análises interativas sofisticadas, o AntV oferece suporte confiável. Ao integrar capacidades de IA, essas ferramentas simplificam e automatizam ainda mais a geração e otimização de visualizações. Isso permite que os analistas se concentrem mais em descobrir insights e impulsionar decisões de negócios, tornando verdadeiramente os dados visíveis e compreensíveis.

[!WARNING] Este projeto apenas mescla código gerado por IA.

Como contribuir:

1. Envie uma issue descrevendo o problema claramente
2. Atribua-a ao @copilot com seus requisitos

Uso

Adicione este marketplace ao Claude Code:

/plugin marketplace add antvis/chart-visualization-skills

Ou você pode instalar diretamente as habilidades para seus múltiplos agentes:

npx skills add antvis/chart-visualization-skills

Habilidades Disponíveis

• 📊 chart-visualization: Uma habilidade abrangente de geração de gráficos alimentada pelo AntV que oferece mais de 26 tipos de gráficos para visualização inteligente de dados.

Chart Visualization seleciona inteligentemente o tipo de gráfico mais apropriado entre mais de 26 opções disponíveis, extrai parâmetros com base em especificações detalhadas e gera imagens de gráficos de alta qualidade. Abrange séries temporais, comparações, partes de um todo, relacionamentos, geográficos, hierárquicos, estatísticos e visualizações especializadas.

• 🎨 infographic-creator: Cria infográficos bonitos com base no conteúdo de texto fornecido. Use quando os usuários solicitarem a criação de infográficos.

Infographic Creator usa o AntV Infographic para transformar dados, informações e conhecimento em uma linguagem visual perceptível. Combina design visual com visualização de dados, fornecendo mais de 50 modelos, incluindo listas, sequências, hierarquias, comparações, relações e gráficos. Comprime informações complexas com símbolos intuitivos para ajudar o público a entender e lembrar rapidamente os pontos-chave.

• 🖼️ icon-retrieval: Pesquisa e recupera strings SVG de ícones da biblioteca de ícones. Retorna até 5 ícones correspondentes por padrão (personalizável).

Icon Search ajuda os usuários a encontrar ícones apropriados para vários casos de uso, incluindo infográficos, desenvolvimento web, design e muito mais. Pesquise por palavras-chave para descobrir ícones disponíveis e recuperar suas strings SVG diretamente. Cada pesquisa retorna até 5 ícones correspondentes por padrão (personalizável via parâmetro topK) com suas URLs e conteúdo SVG completo.

• 📝 narrative-text-visualization: Gera visualizações de texto narrativo estruturadas a partir de dados usando a Sintaxe T8.

Narrative Text Visualization (T8) transforma dados não estruturados em relatórios narrativos semanticamente ricos usando a Sintaxe T8 - uma linguagem declarativa semelhante a Markdown para criar narrativas de dados com anotações de entidades. É amigável a LLMs e agnóstico a framework, funcionando perfeitamente com HTML, React e Vue. Perfeito para criar relatórios de análise de dados, resumos e documentos de insights com entidades como métricas, valores, tendências e dimensões devidamente rotuladas. Os recursos incluem mini gráficos integrados, estilização padronizada e formatação profissional. Suporta fontes de dados autênticas e fornece renderização leve e agnóstica a tecnologia.

• 📋 antv-s2-expert: Assistente de desenvolvimento de tabelas de análise cruzada multidimensional S2. Use quando os usuários precisarem de ajuda com tabelas dinâmicas S2, planilhas de tabela ou qualquer desenvolvimento relacionado ao @antv/s2.

AntV S2 Expert ajuda os usuários a desenvolver com o mecanismo de tabela de análise cruzada multidimensional S2. Fornece orientação abrangente sobre o mecanismo central @antv/s2, as vinculações de framework @antv/s2-react e @antv/s2-vue, os componentes de análise avançada @antv/s2-react-components e a renderização do lado do servidor @antv/s2-ssr. Abrange tabelas dinâmicas, planilhas de tabela, células personalizadas, temas, eventos, interações, ordenação, totais, dicas de ferramentas, linhas/colunas congeladas, ícones, paginação e muito mais.

• 🕸️ antv-g6-graph: Gerador de código de visualização de grafos G6 v5. Use quando os usuários precisarem gerar grafos G6 — grafos de rede, grafos de árvore, fluxogramas, mapas mentais e qualquer visualização de dados relacional ou estruturada em grafos com a biblioteca G6.

AntV G6 Graph gera código G6 v5 preciso e executável seguindo as melhores práticas. Abrange a inicialização central do grafo, estruturas de dados (nós, arestas, combos), mais de 10 algoritmos de layout (force, dagre, circular, grid, mindmap, fishbone, etc.), todos os tipos integrados de nó/aresta/combo, gerenciamento de estado, mais de 15 comportamentos (drag-canvas, zoom-canvas, click-select, lasso, etc.), mais de 10 plugins (minimapa, dica de ferramenta, barra de ferramentas, legenda, barra de tempo, etc.), desenvolvimento de elementos personalizados, transformações e animação. Barreiras de proteção integradas evitam armadilhas comuns de migração v4→v5, como usar construtores G6.Graph() depreciados, APIs graph.data() ou configuração de comportamento baseada em Modo.

• 📈 antv-g2-chart: Gerador de código de gráficos G2 v5. Use quando os usuários precisarem gerar gráficos G2 — gráficos de barras, gráficos de linhas, gráficos de pizza, gráficos de dispersão, gráficos de área, mapas de calor e qualquer visualização de dados estatísticos com a biblioteca G2.

AntV G2 Chart gera código G2 v5 preciso e executável seguindo as melhores práticas do Modo de Especificação. Abrange mais de 30 tipos de gráficos (intervalo, linha, área, ponto, retângulo, célula, treemap, sankey, chord, wordCloud, gauge e muito mais), transformações de dados (stackY, dodgeX, binX, fold, etc.), sistemas de coordenadas (cartesiano, polar, theta, radial), escalas, interações (brush, slider, filtro de legenda), componentes (eixo, legenda, dica de ferramenta, anotação) e composições de múltiplas visões. Barreiras de proteção integradas evitam armadilhas comuns de migração v4→v5, como usar APIs encadeadas depreciadas, nomes de paleta inválidos ou referenciar d3 no código do usuário.

Resultados da Avaliação

A abordagem de Harness Engineering foi rigorosamente testada em 174 casos de teste de geração de gráficos, demonstrando melhorias significativas em relação aos métodos de linha de base:

Os resultados mostram que a Harness Engineering permite que LLMs atinjam uma precisão quase pronta para produção (até 98,2%), superando significativamente a abordagem de linha de base Context7.

[!TIP] Mais habilidades em breve.

Uso como Biblioteca

Pode ser usado como uma biblioteca em seus projetos Node.js com CLI e API.

Uso via CLI

Também fornecemos uma ferramenta CLI chamada antv para uso fácil no seu terminal, instale globalmente:

npm install -g @antv/chart-visualization-skills

Recuperar ou listar habilidades por consulta:

# Recuperar habilidades por consulta (apenas metadados)
antv retrieve \"bar chart\" --library g2 --topk 10

# Recuperar habilidades com conteúdo markdown completo (restrições principais automaticamente anexadas)
antv retrieve \"bar chart\" --library g2 --content

# Recuperar habilidades e saída como JSON
antv retrieve \"bar chart\" --library g2 --output json

# Obter uma habilidade pelo seu ID exato
antv get g2-mark-interval-basic --library g2

# Listar todas as habilidades disponíveis
antv list --library g2 --category core

# Listar habilidades e saída como JSON
antv list --output json

# Mostrar informações da habilidade (restrições principais do SKILL.md)
antv info --library g2

# Mostrar informações da habilidade como JSON
antv info --library g2 --output json

Uso do comando:

Usage: antv [options] [command]

Ferramenta CLI para recuperação de habilidades de visualização de gráficos AntV

Opções:
  -V, --version               exibe o número da versão
  -h, --help                  exibe ajuda para o comando

Comandos:
  retrieve [options] <query>  Pesquisa habilidades que correspondem a uma consulta
  get [options] <id>          Obtém uma habilidade pelo seu ID exato
  list [options]              Lista todas as habilidades disponíveis
  info [options]              Mostra informações da habilidade do SKILL.md
  help [command]              exibe ajuda para o comando

Opções para retrieve:
  --library <lib>             Filtrar por biblioteca (ex: g2, g6)
  --topk <n>                  Número de resultados a retornar (padrão: 7)
  --content                   Incluir corpo do conteúdo markdown nos resultados; as restrições principais (Seção 1-2 do SKILL.md) são sempre anexadas como o primeiro resultado
  --output <format>           Formato de saída: json | text (padrão: \"text\")

Nota: --content sempre anexa as restrições principais da biblioteca (Seção 1 e 2 do SKILL.md, até o marcador <!-- CONSTRAINTS:END -->) como o primeiro resultado, garantindo que o modelo receba as regras essenciais juntamente com os documentos de referência.

Uso da API

import { retrieve } from '@antv/chart-visualization-skills';

// Apenas metadados (sem conteúdo)
const skills = retrieve('bar chart', { library: 'g2', topK: 5 });

// Com conteúdo markdown completo (restrições principais automaticamente anexadas como primeiro resultado)
const skills = retrieve('bar chart', { library: 'g2', topK: 5, content: true });

// Com conteúdo, mas sem restrições principais
const skills = retrieve('bar chart', { library: 'g2', topK: 5, content: true, includeInfo: false });

retrieve(query: string, options?: RetrieveOptions): Skill[]

interface RetrieveOptions {
  library?: string;   // Filtro de biblioteca, ex: 'g2' ou 'g6'
  topK?: number;      // Número de resultados (padrão: 7)
  content?: boolean;  // Incluir corpo do conteúdo markdown (padrão: false)
  includeInfo?: boolean; // Anexar restrições principais do SKILL.md (padrão: igual a content)
}

Notas:

• A recuperação padrão retorna objetos de resultado leves sem o campo content.
• content: true retorna o corpo do conteúdo markdown (metadados do frontmatter são excluídos).
• Quando includeInfo é true (o padrão quando content: true), o bloco de restrições principais — SKILL.md até <!-- CONSTRAINTS:END --> — é injetado como o primeiro elemento (id prefixado com __info__), garantindo que o modelo sempre veja as regras essenciais.

import { info } from '@antv/chart-visualization-skills';

const skillInfo = info('g2');
// => { name: 'antv-g2-chart', description: '...', content: '...', constraintsContent: '...' }

info(library?: string): SkillInfo | undefined

interface SkillInfo {
  name: string;
  description: string;
  content: string;            // Corpo completo do SKILL.md (após o frontmatter)
  constraintsContent: string; // Corpo do SKILL.md até o marcador <!-- CONSTRAINTS:END -->; injetado por retrieve quando includeInfo: true
}

Licença

Licença MIT - veja o arquivo LICENSE para mais detalhes.