Habilidades del Agente de Visualización de Gráficos

Habilidades de Visualización de Gráficos

Convirtiendo datos en un lenguaje visual para un mejor pensamiento.

Descripción general

En la era de la toma de decisiones basada en datos, la visualización y el análisis de datos eficientes y precisos son fundamentales. AntV ofrece un conjunto profesional de soluciones de visualización, proporcionando un robusto kit de herramientas y un conjunto completo de habilidades para todo el flujo de trabajo—desde el diseño de gráficos y la exploración interactiva hasta el análisis profundo de datos. Permite a los usuarios transformar rápidamente conjuntos de datos complejos en gráficos visuales intuitivos, reduciendo significativamente la barrera de creación mediante especificaciones de diseño inteligentes y una rica biblioteca de componentes. Ya sea para informes diarios, paneles dinámicos o análisis interactivos sofisticados, AntV ofrece un soporte confiable. Al integrar capacidades de IA, estas herramientas agilizan y automatizan aún más la generación y optimización de visualizaciones. Esto permite a los analistas centrarse más en descubrir información y tomar decisiones empresariales, haciendo que los datos sean realmente visibles y comprensibles.

[!WARNING] Este proyecto solo fusiona código generado por IA.

Cómo contribuir:

1. Envía un issue describiendo el problema claramente
2. Asígnalo a @copilot con tus requisitos

Uso

Agrega este marketplace a Claude Code:

/plugin marketplace add antvis/chart-visualization-skills

O puedes instalar directamente las habilidades para tus múltiples agentes:

npx skills add antvis/chart-visualization-skills

Habilidades Disponibles

• 📊 chart-visualization: Una habilidad integral de generación de gráficos impulsada por AntV que proporciona más de 26 tipos de gráficos para visualización inteligente de datos.

Chart Visualization selecciona inteligentemente el tipo de gráfico más apropiado entre más de 26 opciones disponibles, extrae parámetros según especificaciones detalladas y genera imágenes de gráficos de alta calidad. Cubre series temporales, comparaciones, partes de un todo, relaciones, visualizaciones geográficas, jerárquicas, estadísticas y especializadas.

• 🎨 infographic-creator: Crea infografías atractivas basadas en el contenido de texto proporcionado. Úsalo cuando los usuarios soliciten crear infografías.

Infographic Creator utiliza AntV Infographic para transformar datos, información y conocimiento en un lenguaje visual perceptible. Combina el diseño visual con la visualización de datos, ofreciendo más de 50 plantillas que incluyen listas, secuencias, jerarquías, comparaciones, relaciones y gráficos. Comprime información compleja con símbolos intuitivos para ayudar a las audiencias a comprender y recordar rápidamente los puntos clave.

• 🖼️ icon-retrieval: Busca y recupera cadenas SVG de iconos de una biblioteca de iconos. Devuelve hasta 5 iconos coincidentes por defecto (personalizable).

Icon Search ayuda a los usuarios a encontrar iconos apropiados para diversos casos de uso, incluyendo infografías, desarrollo web, diseño y más. Busca por palabras clave para descubrir iconos disponibles y recuperar sus cadenas SVG directamente. Cada búsqueda devuelve hasta 5 iconos coincidentes por defecto (personalizable mediante el parámetro topK) con sus URLs y el contenido SVG completo.

• 📝 narrative-text-visualization: Genera visualizaciones estructuradas de texto narrativo a partir de datos utilizando la Sintaxis T8.

Narrative Text Visualization (T8) transforma datos no estructurados en informes narrativos semánticamente ricos utilizando la Sintaxis T8, un lenguaje declarativo similar a Markdown para crear narrativas de datos con anotaciones de entidades. Es amigable con los LLM y agnóstico al framework, funcionando sin problemas con HTML, React y Vue. Perfecto para crear informes de análisis de datos, resúmenes y documentos de insights con entidades como métricas, valores, tendencias y dimensiones correctamente etiquetadas. Las características incluyen mini gráficos integrados, estilo estandarizado y formato profesional. Soporta fuentes de datos auténticas y proporciona una renderización ligera y agnóstica a la tecnología.

• 📋 antv-s2-expert: Asistente de desarrollo de tablas de análisis cruzado multidimensional S2. Úsalo cuando los usuarios necesiten ayuda con tablas dinámicas S2, hojas de tabla o cualquier desarrollo relacionado con @antv/s2.

AntV S2 Expert ayuda a los usuarios a desarrollar con el motor de tablas de análisis cruzado multidimensional S2. Proporciona orientación integral sobre el motor principal @antv/s2, los bindings de framework @antv/s2-react y @antv/s2-vue, los componentes de análisis avanzado @antv/s2-react-components y el renderizado del lado del servidor @antv/s2-ssr. Cubre tablas dinámicas, hojas de tabla, celdas personalizadas, temas, eventos, interacciones, ordenamiento, totales, tooltips, filas/columnas congeladas, iconos, paginación y más.

• 🕸️ antv-g6-graph: Generador de código de visualización de grafos G6 v5. Úsalo cuando los usuarios necesiten generar grafos G6: grafos de red, árboles, diagramas de flujo, mapas mentales y cualquier visualización de datos relacionales o estructurados en grafos con la biblioteca G6.

AntV G6 Graph genera código preciso y ejecutable de G6 v5 siguiendo las mejores prácticas. Cubre la inicialización básica del grafo, estructuras de datos (nodos, aristas, combos), más de 10 algoritmos de layout (force, dagre, circular, grid, mindmap, fishbone, etc.), todos los tipos integrados de nodo/arista/combo, gestión de estados, más de 15 comportamientos (drag-canvas, zoom-canvas, click-select, lasso, etc.), más de 10 plugins (minimap, tooltip, toolbar, legend, timebar, etc.), desarrollo de elementos personalizados, transformaciones y animación. Las barreras de seguridad integradas previenen errores comunes de migración de v4 a v5, como el uso de constructores obsoletos G6.Graph(), APIs graph.data() o configuración de comportamientos basada en Modo.

• 📈 antv-g2-chart: Generador de código de gráficos G2 v5. Úsalo cuando los usuarios necesiten generar gráficos G2: gráficos de barras, líneas, circulares, de dispersión, de áreas, mapas de calor y cualquier visualización de datos estadísticos con la biblioteca G2.

AntV G2 Chart genera código preciso y ejecutable de G2 v5 siguiendo las mejores prácticas del Modo Spec. Cubre más de 30 tipos de gráficos (interval, line, area, point, rect, cell, treemap, sankey, chord, wordCloud, gauge, y más), transformaciones de datos (stackY, dodgeX, binX, fold, etc.), sistemas de coordenadas (cartesian, polar, theta, radial), escalas, interacciones (brush, slider, legend filter), componentes (axis, legend, tooltip, annotation) y composiciones de múltiples vistas. Las barreras de seguridad integradas previenen errores comunes de migración de v4 a v5, como el uso de APIs encadenadas obsoletas, nombres de paleta inválidos o la referencia a d3 en el código del usuario.

Resultados de la Evaluación

El enfoque de Harness Engineering ha sido rigurosamente probado en 174 casos de prueba de generación de gráficos, demostrando mejoras significativas sobre los métodos de referencia:

Los resultados muestran que Harness Engineering permite a los LLM alcanzar una precisión casi lista para producción (hasta 98.2%), superando significativamente el enfoque de línea base de Context7.

[!TIP] Más habilidades llegarán pronto.

Uso de la Biblioteca

Puede usarse como una biblioteca en tus proyectos Node.js con CLI y API.

Uso de CLI

También proporcionamos una herramienta CLI llamada antv para un uso fácil en tu terminal. Instálala globalmente:

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

Recuperar o listar habilidades por consulta:

# Recuperar habilidades por consulta (solo metadatos)
antv retrieve "bar chart" --library g2 --topk 10

# Recuperar habilidades con contenido markdown completo (restricciones principales añadidas automáticamente)
antv retrieve "bar chart" --library g2 --content

# Recuperar habilidades y mostrar como JSON
aantv retrieve "bar chart" --library g2 --output json

# Obtener una habilidad por su ID exacta
antv get g2-mark-interval-basic --library g2

# Listar todas las habilidades disponibles
antv list --library g2 --category core

# Listar habilidades y mostrar como JSON
antv list --output json

# Mostrar información de la habilidad (restricciones principales de SKILL.md)
antv info --library g2

# Mostrar información de la habilidad como JSON
antv info --library g2 --output json

Uso del comando:

Usage: antv [options] [command]

CLI tool for AntV chart visualization skills retrieval

Options:
  -V, --version               output the version number
  -h, --help                  display help for command

Commands:
  retrieve [options] <query>  Search for skills matching a query
  get [options] <id>          Get a skill by its exact ID
  list [options]              List all available skills
  info [options]              Show skill info from SKILL.md
  help [command]              display help for command

Options for retrieve:
  --library <lib>             Filter by library (e.g. g2, g6)
  --topk <n>                  Number of results to return (default: 7)
  --content                   Include markdown content body in results; core constraints (SKILL.md Section 1-2) are always prepended as the first result
  --output <format>           Output format: json | text (default: "text")

Nota: --content siempre antepone las restricciones principales de la biblioteca (Secciones 1 y 2 de SKILL.md, hasta el marcador <!-- CONSTRAINTS:END -->) como el primer resultado, asegurando que el modelo reciba las reglas esenciales junto con los documentos de referencia.

Uso de la API

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

// Metadata only (no content)
const skills = retrieve('bar chart', { library: 'g2', topK: 5 });

// With full markdown content (core constraints auto-prepended as first result)
const skills = retrieve('bar chart', { library: 'g2', topK: 5, content: true });

// With content but without core constraints
const skills = retrieve('bar chart', { library: 'g2', topK: 5, content: true, includeInfo: false });

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

interface RetrieveOptions {
  library?: string;   // Library filter, e.g. 'g2' or 'g6'
  topK?: number;      // Number of results (default: 7)
  content?: boolean;  // Include markdown content body (default: false)
  includeInfo?: boolean; // Prepend SKILL.md core constraints (default: same as content)
}

Notas:

• La recuperación por defecto devuelve objetos de resultado ligeros sin el campo content.
• content: true devuelve el cuerpo del contenido markdown (los metadatos del frontmatter se excluyen).
• Cuando includeInfo es verdadero (el valor por defecto cuando content: true), el bloque de restricciones principales — SKILL.md hasta <!-- CONSTRAINTS:END --> — se inyecta como el primer elemento (con id prefijado __info__), asegurando que el modelo siempre vea las reglas esenciales.

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;            // Full SKILL.md body (after frontmatter)
  constraintsContent: string; // SKILL.md body up to <!-- CONSTRAINTS:END --> marker; injected by retrieve when includeInfo: true
}

Licencia

Licencia MIT - consulta el archivo LICENSE para más detalles.