Compétences de l'agent de visualisation de graphiques

Compétences de visualisation graphique

Transformer les données en un langage visuel pour une meilleure réflexion.

Aperçu

À l'ère de la prise de décision basée sur les données, une visualisation et une analyse des données efficaces et précises sont primordiales. AntV propose une suite professionnelle de solutions de visualisation, offrant une boîte à outils robuste et un ensemble complet de compétences pour l'ensemble du flux de travail, de la conception de graphiques et de l'exploration interactive à l'analyse approfondie des données. Il permet aux utilisateurs de transformer rapidement des ensembles de données complexes en graphiques visuels intuitifs, réduisant considérablement la barrière à la création grâce à des spécifications de conception intelligentes et une riche bibliothèque de composants. Que ce soit pour les rapports quotidiens, les tableaux de bord dynamiques ou les analyses interactives sophistiquées, AntV offre un support fiable. En intégrant des capacités d'IA, ces outils simplifient et automatisent davantage la génération et l'optimisation des visualisations. Cela permet aux analystes de se concentrer davantage sur la découverte d'informations et la prise de décisions commerciales, rendant véritablement les données visibles et compréhensibles.

[!WARNING] Ce projet fusionne uniquement du code généré par l'IA.

Comment contribuer :

1. Soumettez un ticket décrivant clairement le problème
2. Assignez-le à @copilot avec vos exigences

Utilisation

Ajoutez ce marketplace à Claude Code :

/plugin marketplace add antvis/chart-visualization-skills

Ou vous pouvez installer directement les compétences pour vos multiples agents :

npx skills add antvis/chart-visualization-skills

Compétences disponibles

• 📊 chart-visualization : Une compétence complète de génération de graphiques propulsée par AntV, offrant plus de 26 types de graphiques pour une visualisation intelligente des données.

Chart Visualization sélectionne intelligemment le type de graphique le plus approprié parmi plus de 26 options disponibles, extrait les paramètres en fonction de spécifications détaillées et génère des images de graphiques de haute qualité. Il couvre les séries temporelles, les comparaisons, les parties d'un tout, les relations, les visualisations géographiques, hiérarchiques, statistiques et spécialisées.

• 🎨 infographic-creator : Créez de magnifiques infographies à partir d'un contenu textuel donné. À utiliser lorsque les utilisateurs demandent de créer des infographies.

Infographic Creator utilise AntV Infographic pour transformer les données, les informations et les connaissances en un langage visuel perceptible. Il combine le design visuel et la visualisation de données, offrant plus de 50 modèles, y compris des listes, des séquences, des hiérarchies, des comparaisons, des relations et des graphiques. Il compresse des informations complexes à l'aide de symboles intuitifs pour aider le public à comprendre et à mémoriser rapidement les points clés.

• 🖼️ icon-retrieval : Recherchez et récupérez des chaînes SVG d'icônes à partir de la bibliothèque d'icônes. Renvoie jusqu'à 5 icônes correspondantes par défaut (personnalisable).

Icon Search aide les utilisateurs à trouver des icônes appropriées pour divers cas d'utilisation, notamment les infographies, le développement web, le design, etc. Recherchez par mots-clés pour découvrir les icônes disponibles et récupérer directement leurs chaînes SVG. Chaque recherche renvoie jusqu'à 5 icônes correspondantes par défaut (personnalisable via le paramètre topK) avec leurs URL et le contenu SVG complet.

• 📝 narrative-text-visualization : Générez des visualisations de texte narratif structuré à partir de données en utilisant la syntaxe T8.

Narrative Text Visualization (T8) transforme les données non structurées en rapports narratifs riches sémantiquement en utilisant la syntaxe T8 - un langage déclaratif de type Markdown pour créer des récits de données avec des annotations d'entités. Il est compatible avec les LLM et indépendant du framework, fonctionnant parfaitement avec HTML, React et Vue. Idéal pour créer des rapports d'analyse de données, des résumés et des documents d'informations avec des entités telles que les métriques, les valeurs, les tendances et les dimensions correctement étiquetées. Les fonctionnalités incluent des mini-graphiques intégrés, un style standardisé et un formatage professionnel. Prend en charge des sources de données authentiques et fournit un rendu léger et indépendant de la technologie.

• 📋 antv-s2-expert : Assistant de développement de tableaux d'analyse croisée multidimensionnelle S2. À utiliser lorsque les utilisateurs ont besoin d'aide avec les tableaux croisés dynamiques S2, les feuilles de tableau, ou tout développement lié à @antv/s2.

AntV S2 Expert aide les utilisateurs à développer avec le moteur de table d'analyse croisée multidimensionnelle S2. Il fournit des conseils complets sur le moteur principal @antv/s2, les liaisons de framework @antv/s2-react et @antv/s2-vue, les composants d'analyse avancés @antv/s2-react-components et le rendu côté serveur @antv/s2-ssr. Couvre les tableaux croisés dynamiques, les feuilles de tableau, les cellules personnalisées, la thématisation, les événements, les interactions, le tri, les totaux, les infobulles, les lignes/colonnes figées, les icônes, la pagination, et plus encore.

• 🕸️ antv-g6-graph : Générateur de code de visualisation de graphes G6 v5. À utiliser lorsque les utilisateurs ont besoin de générer des graphes G6 — graphes de réseau, arborescences, organigrammes, cartes mentales, et toute visualisation de données relationnelles ou structurées en graphe avec la bibliothèque G6.

AntV G6 Graph génère du code G6 v5 précis et exécutable en suivant les meilleures pratiques. Il couvre l'initialisation du graphe de base, les structures de données (nœuds, arêtes, combos), plus de 10 algorithmes de disposition (force, dagre, circulaire, grille, carte mentale, arête de poisson, etc.), tous les types intégrés de nœuds/arêtes/combos, la gestion d'état, plus de 15 comportements (drag-canvas, zoom-canvas, click-select, lasso, etc.), plus de 10 plugins (minimap, tooltip, toolbar, legend, timebar, etc.), le développement d'éléments personnalisés, les transformations et les animations. Des garde-fous intégrés empêchent les pièges courants de migration de v4 à v5, comme l'utilisation de constructeurs G6.Graph() obsolètes, d'API graph.data(), ou de configuration de comportement basée sur le mode.

• 📈 antv-g2-chart : Générateur de code de graphiques G2 v5. À utiliser lorsque les utilisateurs ont besoin de générer des graphiques G2 — diagrammes à barres, graphiques linéaires, diagrammes circulaires, nuages de points, graphiques en aires, cartes de chaleur, et toute visualisation de données statistiques avec la bibliothèque G2.

AntV G2 Chart génère du code G2 v5 précis et exécutable en suivant les meilleures pratiques du mode Spec. Il couvre plus de 30 types de graphiques (intervalle, ligne, aire, point, rect, cellule, treemap, sankey, chord, wordCloud, gauge, etc.), les transformations de données (stackY, dodgeX, binX, fold, etc.), les systèmes de coordonnées (cartésien, polaire, theta, radial), les échelles, les interactions (brush, slider, filtre de légende), les composants (axe, légende, infobulle, annotation) et les compositions multi-vues. Des garde-fous intégrés empêchent les pièges courants de migration de v4 à v5, comme l'utilisation d'API chaînées obsolètes, de noms de palette invalides ou le référencement de d3 dans le code utilisateur.

Résultats de l'évaluation

L'approche Harness Engineering a été rigoureusement testée sur 174 cas de test de génération de graphiques, démontrant des améliorations significatives par rapport aux méthodes de référence :

Les résultats montrent que Harness Engineering permet aux LLM d'atteindre une précision quasi opérationnelle (jusqu'à 98,2 %), surpassant significativement l'approche de référence Context7.

[!TIP] Plus de compétences arrivent bientôt.

Utilisation de la bibliothèque

Elle peut être utilisée comme une bibliothèque dans vos projets Node.js avec CLI et API.

Utilisation en ligne de commande

Nous fournissons également un outil CLI nommé antv pour une utilisation facile dans votre terminal, installez-le globalement :

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

Récupérer ou lister les compétences par requête :

# Retrieve skills by query (metadata only)
antv retrieve "bar chart" --library g2 --topk 10

# Retrieve skills with full markdown content (core constraints auto-prepended)
antv retrieve "bar chart" --library g2 --content

# Retrieve skills and output as JSON
antv retrieve "bar chart" --library g2 --output json

# Get a skill by its exact ID
antv get g2-mark-interval-basic --library g2

# List all available skills
antv list --library g2 --category core

# List skills and output as JSON
antv list --output json

# Show skill info (core constraints from SKILL.md)
antv info --library g2

# Show skill info as JSON
antv info --library g2 --output json

Usage de la commande :

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

Note : --content ajoute toujours les contraintes principales de la bibliothèque (Sections 1 et 2 de SKILL.md, jusqu'au marqueur <!-- CONSTRAINTS:END -->) comme premier résultat, garantissant que le modèle reçoive les règles essentielles en même temps que les documents de référence.

Utilisation de l'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)
}

Notes :

• La récupération par défaut renvoie des objets de résultat légers sans le champ content.
• content: true renvoie le contenu du corps en markdown (les métadonnées du frontmatter sont exclues).
• Lorsque includeInfo est vrai (par défaut lorsque content: true), le bloc des contraintes principales — SKILL.md jusqu'à <!-- CONSTRAINTS:END --> — est injecté comme premier élément (id préfixé par __info__), garantissant que le modèle voie toujours les règles essentielles.

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
}

Licence

Licence MIT - voir le fichier LICENSE pour plus de détails.